Nuxt 3 中的深色模式切换器无法与官方 @nuxtjs/color-mode 配合使用

我想使用 tailwind 和推荐的 @nuxtjs/color-mdoe 模块在我的 Nuxt 应用程序上实现深色模式。测试顺风的黑暗：类运行良好并且按预期工作，但是我无法使按钮切换器以编程方式设置颜色模式。

我在 devDeps 中安装了 3.2.0 版本的模块，根据文档，该模块应该与 Nuxt 3 兼容

"@nuxtjs/tailwindcss": "^6.1.3",
"@nuxtjs/color-mode": "^3.2.0"

并应用了正确的配置nuxt.config.ts

modules: [ '@nuxtjs/color-mode' ],
colorMode: {
    classSuffix: '',
    preference: 'system',
    fallback: 'dark'
  }

我使用了 Tailwind nuxt 模块 在tailwind.config.js

module.exports= {
  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',
    },
    darkMode: 'class'
  }
}

而在./assets/css/main.css我没有关于黑暗模式的有意义的配置，只是我全局定义的一些类

html {
  @apply transition-colors ease-in duration-1000;
  @apply bg-gradient-to-b bg-no-repeat w-screen ;
  @apply dark:from-dark/95 dark:via-dark/95 dark:to-dark dark:text-white from-white via-light/50 to-light;
}

.contain {
  @apply px-[5%] md:px-[25%];       
}

由于我想将开关放置在标题中，因此我在组件中执行了以下操作：

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

<script setup>
function toggleDarkMode(theme) {
  useColorMode().preference = theme
}
</script>

当我从操作系统（win11）设置中手动更改颜色模式时，这些类实际上正在切换，但单击按钮不会复制相同的行为。由于图标确实发生了相应变化，因此模式似乎正在切换。

看看我在其他地方找到的文档和教程，它应该像那样工作。
我需要将模式设置为商店内的全局状态吗？我应该在根级组件中调用钩子吗？

好吧，有几个错误：

包.json

my package.json文件内容是这样的：

我认为你的顺风版本是3.1.6

"devDependencies": {
    "@nuxtjs/color-mode": "^3.2.0",
    "autoprefixer": "^10.4.13",
    "nuxt": "3.0.0",
    "postcss": "^8.4.19",
    "tailwindcss": "^3.2.4"
  }

tailwind.config.js

你的有错误tailwind.config.js file:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./app.vue'], // you forget content
  darkMode: 'class', //you should define darkMode here
  theme: {
    extend: {},
   //darkMode: 'class' >> this is mistake
  },
  plugins: [],
};

首先，你忘记了content财产你应该得到这个警告：

警告 - Tailwind CSS 配置中的内容选项丢失或为空。

内容是什么：

The content section of your tailwind.config.js file is where you configure the paths to all of your HTML templates, JavaScript components, and any other source files that contain Tailwind class names.

第二，你的darkMode不应该是theme你应该在根目录中定义它

main.css

现在关于你的main.css文件中您没有添加 tailwind 指令（但这不是必需的）：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body{
    @apply bg-lightPrimary dark:bg-darkPrimary;
  }
}

nuxt.config.ts

最后，你的nuxt.config.ts应该是这样的：

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  modules: ['@nuxtjs/color-mode'],
  colorMode: {
    classSuffix: '',
    preference: 'system',
    fallback: 'dark',
  },
  css: ['/assets/css/main.css'],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
});

我复制了你的代码并测试了它们我认为你的主要错误是你定义了darkMode财产在错误的地方：

请检查这个LINK https://stackblitz.com/edit/github-ac9rz7?file=nuxt.config.ts

summary

1. 检查顺风安装here https://tailwindcss.com/docs/guides/nuxtjs#3
2. add darkMode: 'class'正确地
3. check content财产（了解更多here https://tailwindcss.com/docs/content-configuration)
4. 确保您添加了main.css文件至nuxt.config.ts全球

这两个问题也可以帮助你：

在 nuxt3 中安装 tailwind https://stackoverflow.com/questions/74678254/nuxt-3-with-tailwindcss-heroicons/74678865#74678865

更好的暗模式配置 https://stackoverflow.com/questions/72117668/tailwind-colors-based-on-dark-mode/74574410#74574410