Next.js中在layout.tsx声明主题时，如何用Radix UI实现Navbar明暗切换？

1. 在layout.tsx中全局注入Radix颜色模式上下文 #

给layout.tsx加上客户端组件标识（App Router下必须），用Radix的ColorModeProvider包裹整个应用，让主题状态能在全局组件中共享：

'use client';

import { ColorModeProvider } from '@radix-ui/react-color-mode';
import NavBar from './NavBar';

export default function RootLayout({ children }) {
  return (
    <html lang="zh-CN">
      <body>
        <ColorModeProvider>
          <NavBar />
          {children}
        </ColorModeProvider>
      </body>
    </html>
  );
}

2. 在Navbar.tsx中添加切换按钮 #

NavBar同样需要是客户端组件，两种实现方式任选：

方式一：直接用Radix内置切换组件 #

快速集成，自带默认样式：

'use client';

import { ColorModeToggle } from '@radix-ui/react-color-mode';

export default function NavBar() {
  return (
    <nav className="flex justify-between items-center p-4">
      {/* 你的其他导航内容，比如logo、菜单 */}
      <ColorModeToggle aria-label="切换明暗模式" />
    </nav>
  );
}

方式二：自定义切换按钮 #

如果想完全控制样式，用useColorMode钩子获取状态和切换方法：

'use client';

import { useColorMode } from '@radix-ui/react-color-mode';

export default function NavBar() {
  const { colorMode, toggleColorMode } = useColorMode();

  return (
    <nav className="flex justify-between items-center p-4">
      {/* 其他导航内容 */}
      <button
        onClick={toggleColorMode}
        aria-label={`切换到${colorMode === 'light' ? '深色' : '浅色'}模式`}
        className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
      >
        {colorMode === 'light' ? '🌙' : '☀️'}
      </button>
    </nav>
  );
}

3. 全局样式适配明暗模式 #

Radix会自动给<html>标签加上data-color-mode属性，你可以基于这个属性写全局样式：

/* globals.css */
:root[data-color-mode='light'] {
  --bg: #ffffff;
  --text: #1f2937;
}

:root[data-color-mode='dark'] {
  --bg: #1f2937;
  --text: #ffffff;
}

body {
  background-color: var(--bg);
  color: var(--text);
  transition: background-color 0.3s, color 0.3s;
}

4. 主题状态持久化 #

Radix的ColorModeProvider默认会把用户选择的主题存在localStorage里，刷新页面会自动恢复，不需要额外写代码。

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