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

前言

在 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 />

最终效果