Next.js中next-themes默认dark主题不生效问题求助

1. 修复ThemeProvider的包裹位置 #

你的ThemeProvider目前放在<body>标签内部，但next-themes默认会给<html>标签添加主题类（当attribute="class"时），如果Provider在body里，无法正确操作html标签的类，导致Tailwind的dark:前缀样式不生效。

修改app/layout.tsx，让ThemeProvider包裹整个<html>标签：

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <ThemeProvider
      attribute="class"
      defaultTheme="dark"
      enableSystem
      disableTransitionOnChange
    >
      <html lang="en">
        <body className={inter.className}>
          {children}
        </body>
      </html>
    </ThemeProvider>
  );
}

2. 确认Tailwind配置的dark模式为class策略 #

确保tailwind.config.js中开启了基于类的dark模式，否则Tailwind会忽略html上的dark类：

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class', // 必须设置为'class'
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  // ...其他配置
}

3. 检查enableSystem对默认主题的影响 #

你设置了enableSystem: true，这会让主题优先跟随系统设置，覆盖defaultTheme="dark"的配置。如果希望强制默认显示dark主题（不管系统设置），可以去掉enableSystem或者设为false：

<ThemeProvider
  attribute="class"
  defaultTheme="dark"
  // enableSystem={false} 或者直接删除这个属性
  disableTransitionOnChange
>

4. 验证自定义颜色是否存在 #

你的Hero组件中使用了dark:bg-black-100，需要确认这个自定义颜色在Tailwind配置中已定义：

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'black-100': '#0a0a0a', // 替换为你实际需要的深色值
      },
    },
  },
}

如果没有定义这个颜色，dark:bg-black-100不会生效，页面会显示bg-white的白色背景。

5. 排查客户端Hydration问题 #

如果上述步骤都无效，可以在客户端强制触发主题设置，修改Hero.tsx为客户端组件并添加逻辑：

"use client";
import React, { useEffect } from "react";
import { Spotlight } from "./ui/Spotlight";
import { useTheme } from "next-themes";

const Hero = () => {
  const { setTheme } = useTheme();

  useEffect(() => {
    setTheme("dark"); // 强制设置为dark主题
  }, [setTheme]);

  return (
    <div className="pb-20 pt-36">
      <div>
        <Spotlight
          className="-top-40 -left-10 md:-left-32 md:-top-20 h-screen"
          fill="white"
        />
        <Spotlight
          className="top-10 left-full h-[80vh] w-[50vw]"
          fill="purple"
        />
        <Spotlight className="top-28 left-80 h-[80vh] w-[50vw]" fill="blue" />
      </div>

      <div
        className="h-screen w-full dark:bg-black-100 bg-white dark:bg-grid-white/[0.3] bg-grid-black/[0.2] 
      relative flex items-center justify-center"
      >
        <div
          className="absolute pointer-events-none inset-0 flex items-center justify-center dark:bg-black-100 bg-white 
        [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)]"
        />
      </div>
    </div>
  );
};

export default Hero;

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