使用next-themes切换主题时字体颜色仍遵循系统配色偏好

你的核心问题是使用next-themes切换到亮色模式时，文本颜色未正确切换，根源在于样式优先级冲突和ThemeProvider配置错误，以下是具体解决步骤：

1. 修正ThemeProvider的布尔属性 #

你当前enableSystem='false'的写法错误——在JSX中字符串'false'会被识别为真值，导致系统主题检测实际处于开启状态，和手动切换的主题产生冲突。将其改为布尔值：

// _app.js 修改后
import '@components/styles/globals.css';
import { ThemeProvider } from 'next-themes';
import Layout from '@components/components/Layout';

export default function App({ Component, pageProps }) {
  return (
    <ThemeProvider 
      defaultTheme='light' 
      attribute='class' 
      enableSystem={false} // 改为布尔值
    >
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </ThemeProvider>
  )
}

如果希望系统决定初始主题，只需将defaultTheme改为'system'，同时保持enableSystem={true}即可：

<ThemeProvider 
  defaultTheme='system' 
  attribute='class' 
  enableSystem={true}
>

2. 补充亮色模式的样式类 #

你目前的文本元素仅设置了暗色模式类dark:text-gray-100，缺少亮色模式对应的文本颜色类。切换到亮色模式时，dark类被移除，文本会 fallback 到默认样式或媒体查询样式，导致颜色异常。

给文本元素同时添加亮色和暗色类：

// 示例：文本元素的className写法
<p className="text-gray-800 dark:text-gray-100">你的内容</p>

• 亮色模式下：应用text-gray-800（深灰色文本）
• 暗色模式下：应用dark:text-gray-100（浅灰色文本）

3. 验证主题切换的DOM变化 #

打开浏览器开发者工具，查看<html>标签的class属性：

• 切换到暗色模式时，应出现dark类
• 切换到亮色模式时，dark类应被移除

如果dark类未正确切换，检查：

• 确保ThemeProvider包裹了整个应用（你当前的代码已满足）
• 确认ThemeButton组件的useTheme钩子正常获取到主题状态

4. 排查全局样式冲突 #

检查globals.css中是否存在@media (prefers-color-scheme: dark)的全局样式，这类样式可能会覆盖Tailwind的主题类。如果有，可将其迁移到Tailwind的@layer utilities中，确保样式优先级正确：

/* globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  @media (prefers-color-scheme: dark) {
    /* 自定义暗色模式样式 */
  }
}

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