网站LOGO
白雾茫茫丶
页面加载中
6月26日
网站LOGO 白雾茫茫丶
记录学习、生活和有趣的事
菜单
  • 热评
    用户的头像
    首次访问
    上次留言
    累计留言
    我的等级
    我的角色
    打赏二维码
    打赏博主
    Nuxt3 实战 (八):优雅的实现暗黑主题模式
    点击复制本页信息
    微信扫一扫
    文章二维码
    文章图片 文章标题
    创建时间
  • 一 言
    确认删除此评论么? 确认
  • 本弹窗介绍内容来自,本网站不对其中内容负责。
    • 复制图片
    • 复制图片地址
    • 百度识图
    按住ctrl可打开默认菜单

    Nuxt3 实战 (八):优雅的实现暗黑主题模式

    谢明伟 · 原创 ·
    前端开发Nuxt3 实战 · VueNuxt
    共 3148 字 · 约 1 分钟 · 161

    前言

    Nuxt3 中要实现暗黑模式,需要用到一个库:color-mode,它可以帮助我们很轻易地实现暗黑模式切换。

    具体使用

    1. 安装 @nuxtjs/color-mode 依赖:

      powershell 代码:
      pnpm add @nuxtjs/color-mode -D
    2. 打开 nuxt.config.ts 配置文件注入依赖:

      ts 代码:
      export default defineNuxtConfig({
        modules: ['@nuxtjs/color-mode']
      })
    3. 你也可以根据项目实际情况自定义配置,以下是一些默认配置:

      ts 代码:
      import { defineNuxtConfig } from 'nuxt'
      
      export default defineNuxtConfig({
        modules: ['@nuxtjs/color-mode'],
        colorMode: {
      preference: 'system', // default value of $colorMode.preference
      fallback: 'light', // fallback value if not system preference found
      hid: 'nuxt-color-mode-script',
      globalName: '__NUXT_COLOR_MODE__',
      componentName: 'ColorScheme',
      classPrefix: '',
      classSuffix: '-mode',
      storageKey: 'nuxt-color-mode'
        }
      })

    具体的使用文档:NuxtColorMode

    按钮模式

    1. src/components 中新建 ColorMode/index.vue 文件:

      html 代码:
       <script setup lang="ts">
       const colorMode = useColorMode()
      
       // 切换模式
       const setColorMode = () => {
      colorMode.value = colorMode.value === 'dark' ? 'light' : 'dark'
       }
      
       // 判断是否支持 startViewTransition API
       const enableTransitions = () =>
      'startViewTransition' in document &&
      window.matchMedia('(prefers-reduced-motion: no-preference)').matches
      
       // 切换动画
       async function toggleDark({ clientX: x, clientY: y }: MouseEvent) {
      const isDark = colorMode.value === 'dark'
      
      if (!enableTransitions()) {
       setColorMode()
       return
      }
      
      const clipPath = [
       `circle(0px at $px ${y}px)`,
       `circle(${Math.hypot(
         Math.max(x, innerWidth - x),
         Math.max(y, innerHeight - y)
       )}px at $px ${y}px)`
      ]
      
      await document.startViewTransition(async () => {
       setColorMode()
       await nextTick()
      }).ready
      
      document.documentElement.animate(
       { clipPath: !isDark ? clipPath.reverse() : clipPath },
       {
         duration: 300,
         easing: 'ease-in',
         pseudoElement: `::view-transition-${!isDark ? 'old' : 'new'}(root)`
       }
      )
       }
       </script>
      
       <template>
      <el-tooltip
       :content="`切换${$colorMode.value === 'dark' ? '白天' : '黑夜'}模式`"
       placement="bottom"
      >
       <el-button
         circle
         text
         @click="toggleDark"
       >
         <Icon
           :name="$colorMode.value === 'dark' ? 'i-heroicons-moon-solid' : 'i-heroicons-sun-solid'"
           class="h-5 w-5"
         />
       </el-button>
      </el-tooltip>
       </template>
      
       <style>
       ::view-transition-old(root),
       ::view-transition-new(root) {
      animation: none;
      mix-blend-mode: normal;
       }
      
       ::view-transition-old(root),
       .dark::view-transition-new(root) {
      z-index: 1;
       }
      
       ::view-transition-new(root),
       .dark::view-transition-old(root) {
      z-index: 9999;
       }
       </style>
    2. 在需要的地方加载组件:

      html 代码:
      <ColorMode />

    最终效果

    声明:本文由 谢明伟(博主)原创,依据 CC-BY-NC-SA 4.0 许可协议 授权,转载请注明出处。

    还没有人喜爱这篇文章呢

    现在已有

    2

    条评论
    我要发表评论
    1. 头像
      · · 河北-秦皇岛
      • 等级:Lv.3
      • 角色:访客
      • 在线:本月
      头像
      沙发

      哇,新颜色好好看啊,主题

      评论
      1. · · 广东-深圳
        • 角色:博主
        • 在线:本周
        头像

        还好吧,反正不是我们操心 我觉得还是清新一点好,搞的花里胡哨的

        评论
    博客logo 白雾茫茫丶 记录学习、生活和有趣的事 51统计 百度统计
    MOEICP 萌ICP备20236860号 ICP 粤ICP备2023007649号 ICP 粤公网安备44030402006402号

    💻️ 谢明伟 昨天 17:59 在线

    🕛

    本站已运行 2 年 176 天 12 小时 27 分

    🌳

    自豪地使用 Typecho 建站,并搭配 MyLife 主题
    白雾茫茫丶. © 2022 ~ 2024.
    网站logo

    白雾茫茫丶 记录学习、生活和有趣的事