Nuxt.js项目实战：使用Color Mode模块实现暗黑模式切换-CSDN博客

Nuxt.js项目实战：使用Color Mode模块实现暗黑模式切换

前言

在现代Web开发中，暗黑模式(Dark Mode)已成为提升用户体验的重要功能。Nuxt.js生态系统中提供的@nuxtjs/color-mode模块不仅支持暗黑/明亮模式的切换，还能实现任意颜色主题(如sepia模式)的转换。本文将深入讲解如何在Nuxt.js项目中实现这一功能。

核心原理

@nuxtjs/color-mode模块的工作原理十分巧妙：

它会在<html>标签上动态添加.${color}-mode类
支持所有Nuxt目标模式(静态或服务端渲染)
自动检测系统颜色偏好设置
注入$colorMode辅助工具，提供：
- preference: 当前选择的颜色模式
- value: 系统检测到的实际颜色模式
- unknown: 判断SSR或静态生成时是否需要渲染占位符

实现步骤详解

1. 模块安装与配置

首先需要安装模块依赖：

yarn add --dev @nuxtjs/color-mode
# 或
npm install --save-dev @nuxtjs/color-mode

然后在nuxt.config.js中进行配置：

export default {
  buildModules: ['@nuxtjs/color-mode'],
  css: ['@/assets/main.css']
}

2. 颜色模式样式定义

在assets/main.css中定义不同模式的CSS变量：

:root {
  --color: #243746;
  --bg: #f3f5f4;
  /* 其他变量... */
}

.dark-mode {
  --color: #ebf4f1;
  --bg: #091a28;
  /* 其他变量... */
}

.sepia-mode {
  --color: #433422;
  --bg: #f1e7d0;
  /* 其他变量... */
}

body {
  background-color: var(--bg);
  color: var(--color);
  transition: background-color 0.3s;
}

3. 创建颜色模式切换组件

创建components/ColorModePicker.vue组件：

<template>
  <div>
    <ul>
      <li v-for="color of colors" :key="color">
        <component 
          :is="`icon-${color}`" 
          @click="$colorMode.preference = color"
          :class="getClasses(color)"
        />
      </li>
    </ul>
    <ColorScheme placeholder="..." tag="span">
      当前模式: <b>{{ $colorMode.preference }}</b>
      <span v-if="$colorMode.preference === 'system'">
        (检测到<i>{{ $colorMode.value }}</i>模式)
      </span>
    </ColorScheme>
  </div>
</template>

<script>
import IconSystem from '@/assets/icons/system.svg?inline'
// 导入其他图标...

export default {
  components: { IconSystem /* 其他图标组件 */ },
  data() {
    return {
      colors: ['system', 'light', 'dark', 'sepia']
    }
  },
  methods: {
    getClasses(color) {
      if (this.$colorMode.unknown) return {}
      return {
        preferred: color === this.$colorMode.preference,
        selected: color === this.$colorMode.value
      }
    }
  }
}
</script>

<style scoped>
/* 样式定义... */
</style>

4. 组件样式优化

为切换按钮添加视觉反馈：

.feather {
  cursor: pointer;
  padding: 7px;
  background-color: var(--bg-secondary);
  border: 2px solid var(--border-color);
  border-radius: 5px;
  transition: all 0.1s ease;
}

.feather:hover {
  transform: translateY(-3px);
}

.feather.preferred {
  border-color: var(--color-primary);
}

.feather.selected {
  color: var(--color-primary);
}