Nuxt3中@nuxtjs/color-mode暗黑模式切换按钮失效问题

你遇到的核心问题是：手动切换系统模式时样式正常响应，但通过按钮切换仅图标变化、样式无更新。这是因为代码中存在两处关键配置/使用方式的问题，以下是具体修正步骤：

1. 修正Tailwind配置中darkMode的位置 #

Tailwind的darkMode是顶级配置项，不属于theme对象的子属性。你之前将其放在theme内会导致Tailwind无法正确识别暗黑模式的触发逻辑（虽然系统切换时可能侥幸生效，但手动切换时会失效）。

修改tailwind.config.js：

module.exports= {
  darkMode: 'class', // 移到theme对象外部
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      dark: '#212129',
      darkPrimary: '#00E1FF',
      darkSecondary: '#00D6D6',
      light: '#E9DAC1',
      lightPrimary: '#1d68f3',
      lightSecondary: '#00b5f0',
      main: '#0073FF',
      white: '#FFFFFF',
    },
    spacing: {
      'header': '120px',
    }
  }
}

2. 正确使用useColorMode的响应式状态 #

重复调用useColorMode()会导致无法跟踪统一的响应式状态，且直接设置preference时需确保使用缓存的实例。同时可以简化切换逻辑，直接使用模块内置的方法。

修改头部组件代码：

<template>
  <header class="contain py-[15px] flex items-center justify-between backdrop-blur-3xl">
    <button @click="toggleDarkMode">
      <nuxt-icon v-if="colorMode.preference === 'dark'" name="sun"/>
      <nuxt-icon v-else name="moon"/>
    </button>
  </header>
</template>

<script setup>
// 缓存colorMode实例，确保响应式状态统一
const colorMode = useColorMode()

function toggleDarkMode() {
  // 方式1：手动切换偏好
  colorMode.preference = colorMode.preference === 'dark' ? 'light' : 'dark'
  // 方式2：使用模块内置的toggle方法（更简洁）
  // colorMode.toggle()
}
</script>

验证与额外提示 #

1. 修改后重启Nuxt开发服务器，确保配置生效
2. 点击按钮时，检查浏览器控制台的html标签，确认dark类是否被正确添加/移除
3. 若仍有问题，清除浏览器本地存储（color-mode模块会缓存用户偏好）后重试

内容的提问来源于stack exchange，提问作者StefanGarofalo