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

宁雨澄Alina

于 2025-06-25 09:09:53 发布

阅读量354

点赞数 3

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/gitblog_00126/article/details/148889882

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

前言

在现代Web开发中，暗黑模式(Dark Mode)已成为提升用户体验的重要功能。Nuxt.js生态中的@nuxtjs/color-mode模块不仅支持简单的明暗切换，还能实现多种色彩主题(如sepia模式)的切换，并自动检测系统偏好设置。本文将详细介绍如何在Nuxt.js项目中实现这一功能。

核心原理

@nuxtjs/color-mode模块的工作原理是通过在<html>标签上添加.${color}-mode类来实现主题切换。该模块具有以下特点：

支持所有Nuxt目标模式(静态或服务器端渲染)
自动检测系统色彩模式
提供$colorMode辅助工具，包含：
- preference: 当前选择的色彩模式(可能为'system')
- value: 当模式为'system'时实际检测到的模式
- unknown: 判断SSR或静态生成时是否需要渲染占位符

实现步骤

1. 项目初始化

首先创建一个基本的Nuxt项目，在pages/index.vue中添加简单内容：

<template>
  <h1>测试色彩模式</h1>
</template>

2. 安装模块

使用Yarn或npm安装模块：

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

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

export default {
  buildModules: ['@nuxtjs/color-mode']
}

3. 定义色彩样式

在assets/main.css中定义CSS变量实现主题切换：

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

.dark-mode {
  --color: #ebf4f1;
  --color-primary: #41b38a;
  --bg: #091a28;
  /* 暗色模式变量... */
}

.sepia-mode {
  --color: #433422;
  --bg: #f1e7d0;
  /* 复古模式变量... */
}

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

在配置文件中引入CSS：

css: ['@/assets/main.css']

4. 创建色彩切换组件

创建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>

5. 使用SVG图标

安装@nuxtjs/svg模块处理SVG图标：

yarn add --dev @nuxtjs/svg

配置nuxt.config.js：

buildModules: ['@nuxtjs/svg', '@nuxtjs/color-mode']

6. 完善交互体验

添加过渡效果和视觉反馈：

.feather {
  cursor: pointer;
  transition: all 0.1s ease;
}
.feather:hover {
  transform: translateY(-3px);
}
.feather.preferred {
  border-color: var(--color-primary);
}
.feather.selected {
  color: var(--color-primary);
}