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

前言

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

具体使用

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

   pnpm add @nuxtjs/color-mode -D
   

2. 打开 nuxt.config.ts 配置文件注入依赖：

   export default defineNuxtConfig({
        
        
   modules: ['@nuxtjs/color-mode']
   })
   

3. 你也可以根据项目实际情况自定义配置，以下是一些默认配置：

   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 文件：

   <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 ${
           
           x}px ${
           
           y}px)`,
     `circle(${
           
           Math.hypot(
       Math.max(x, innerWidth - x),
       Math.max(y, innerHeight - y)
     )}px at ${
           
           x}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. 在需要的地方加载组件：

   <ColorMode />
   

最终效果