Next.js 13 App目录下暗黑模式变量跨组件传递问题求助

问题根源 #

你当前的实现存在两个致命问题：

1. 全局变量无法同步状态：直接导出的mode全局变量不符合React状态管理逻辑，组件重新渲染时无法触发其他组件更新；且RootLayout默认是服务端组件，根本无法读取客户端组件的状态。
2. 导入错误：import mode from "./ToggleTheme"实际导入的是默认导出的ToggleThemeIcon组件函数，而非你声明的mode变量。函数在条件判断中属于真值，导致className={mode ? "dark" : ""}会始终添加dark类。

解决方案一：使用next-themes（推荐） #

这是适配Next.js的成熟主题方案，能自动处理服务端渲染、本地存储和系统偏好。

1. 安装依赖

npm install next-themes
# 或
yarn add next-themes

2. 创建客户端主题提供者组件
   新建components/ThemeProviderWrapper.tsx：

"use client";

import { ThemeProvider } from "next-themes";
import React from "react";

export default function ThemeProviderWrapper({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <ThemeProvider enableSystem={true} attribute="class">
      {children}
    </ThemeProvider>
  );
}

3. 修改RootLayout
   让服务端的RootLayout嵌套客户端主题提供者：

import Footer from "./components/Footer";
import Header from "./components/Header";
import "./globals.css";
import ThemeProviderWrapper from "./components/ThemeProviderWrapper";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <ThemeProviderWrapper>
          <div className="dark:bg-slate-900 dark:text-white bg-gray-400">
            <Header />
            {children}
            <Footer />
          </div>
        </ThemeProviderWrapper>
      </body>
    </html>
  );
}

4. 修改ToggleThemeIcon组件
   使用useTheme钩子获取和切换主题：

"use client";

import React from "react";
import { CiBrightnessUp, CiCloudMoon } from "react-icons/ci";
import { useTheme } from "next-themes";

const ToggleThemeIcon = () => {
  const { theme, setTheme } = useTheme();

  return (
    <button
      className="w-10 h-10 bg-blue-100 rounded-lg dark:bg-slate-800 hover:ring-2 ring-blue-400 pl-3 mt-1"
      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
      aria-label="toggle dark mode"
    >
      {theme === "dark" ? <CiBrightnessUp /> : <CiCloudMoon />}
    </button>
  );
};

export default ToggleThemeIcon;

解决方案二：自定义React Context实现 #

如果不想依赖第三方库，可以自己用Context管理主题状态。

1. 创建主题Context
   新建components/ThemeContext.tsx：

"use client";

import React, { createContext, useContext, useState, useEffect } from "react";

type ThemeContextType = {
  isDark: boolean;
  toggleTheme: () => void;
};

const ThemeContext = createContext<ThemeContextType | undefined>(undefined);

export function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [isDark, setIsDark] = useState(false);

  // 初始化：读取本地存储或系统偏好
  useEffect(() => {
    const savedTheme = localStorage.getItem("theme");
    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
    setIsDark(savedTheme ? savedTheme === "dark" : prefersDark);
  }, []);

  // 切换主题：更新状态、本地存储和HTML类名
  const toggleTheme = () => {
    const newTheme = !isDark;
    setIsDark(newTheme);
    localStorage.setItem("theme", newTheme ? "dark" : "light");
    document.documentElement.classList.toggle("dark", newTheme);
  };

  // 初始化时设置HTML类名
  useEffect(() => {
    document.documentElement.classList.toggle("dark", isDark);
  }, [isDark]);

  return (
    <ThemeContext.Provider value={{ isDark, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

export function useTheme() {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error("useTheme必须在ThemeProvider内部使用");
  }
  return context;
}

2. 修改RootLayout
   嵌套自定义的ThemeProvider：

import Footer from "./components/Footer";
import Header from "./components/Header";
import "./globals.css";
import { ThemeProvider } from "./components/ThemeContext";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <ThemeProvider>
          <div className="dark:bg-slate-900 dark:text-white bg-gray-400">
            <Header />
            {children}
            <Footer />
          </div>
        </ThemeProvider>
      </body>
    </html>
  );
}

3. 修改ToggleThemeIcon组件
   使用自定义的useTheme钩子：

"use client";

import React from "react";
import { CiBrightnessUp, CiCloudMoon } from "react-icons/ci";
import { useTheme } from "./components/ThemeContext";

const ToggleThemeIcon = () => {
  const { isDark, toggleTheme } = useTheme();

  return (
    <button
      className="w-10 h-10 bg-blue-100 rounded-lg dark:bg-slate-800 hover:ring-2 ring-blue-400 pl-3 mt-1"
      onClick={toggleTheme}
      aria-label="toggle dark mode"
    >
      {isDark ? <CiBrightnessUp /> : <CiCloudMoon />}
    </button>
  );
};

export default ToggleThemeIcon;

内容的提问来源于stack exchange，提问作者Ahmed Ali Ansari