当前位置：首页 > news >正文

Next.js主题切换实战：next-themes实现无闪烁暗色模式

news 2026/5/14 4:44:46

1. 项目概述：为什么我们需要一个“主题”管理器？

如果你正在用 Next.js 开发一个现代 Web 应用，尤其是面向用户的产品，那么“主题切换”功能几乎是一个标配需求。用户希望能在亮色（Light）和暗色（Dark）模式间自由切换，甚至跟随系统偏好自动切换，这已经从一个“锦上添花”的特性变成了基础用户体验的一部分。然而，当你真正动手在 Next.js 应用中实现这个功能时，很快就会发现一堆令人头疼的问题：如何避免页面初始渲染时的主题闪烁（Flash）？如何在服务端渲染（SSR）时正确获取并注入主题？如何将用户的选择持久化到本地存储（localStorage）？如何确保主题状态在 React 组件树中高效、一致地传递？

next-themes这个库，就是专门为解决这些问题而生的。它不是一个庞大的 UI 组件库，而是一个极其轻量、专注的 React 上下文（Context）工具。它的核心目标只有一个：在 Next.js 框架下，提供一套零配置、开箱即用、无闪烁的主题状态管理方案。我最初接触它是因为在一个后台管理系统中需要实现暗色模式，手动折腾 CSS 变量、localStorage和useEffect后，代码变得冗长且脆弱，直到发现了next-themes，它用不到 10 行代码就优雅地解决了所有核心痛点。这个库的维护者pacocoursey也是 Vercel 团队的成员，对 Next.js 的机制理解非常深入，因此这个库与 Next.js 的集成度非常高，可以说是官方推荐的实践方案之一。

简单来说，next-themes帮你抽象了主题管理的所有底层复杂性。你不再需要关心document.documentElement的class或>// 这是一个有问题的示例 function MyApp({ Component, pageProps }) { const [theme, setTheme] = useState('light'); useEffect(() => { const stored = localStorage.getItem('theme'); if (stored) { setTheme(stored); document.documentElement.className = stored; } }, []); return <Component {...pageProps} />; }

这个实现存在一个致命问题：主题闪烁。因为useEffect只会在组件挂载到客户端之后才执行。而在它执行之前，服务端已经渲染好了初始的 HTML（此时<html>标签没有dark类），并发送给了浏览器。浏览器会立即应用默认的亮色样式进行渲染。几毫秒后，useEffect执行，将类名改为dark，浏览器不得不重新计算样式并重绘页面，用户就会看到一个明显的从亮到暗的闪烁。这种体验非常糟糕。

next-themes的聪明之处在于，它利用了 Next.js 的Script组件和内联脚本，将决定主题的关键逻辑尽可能地前置。它不是在 React 渲染生命周期中通过useEffect来设置主题，而是在浏览器解析 HTML 的早期阶段，通过一段内嵌的 JavaScript 脚本，同步地决定并应用主题。这段脚本会按优先级检查：1.localStorage中的持久化主题；2. 系统的主题偏好（通过window.matchMedia('(prefers-color-scheme: dark)')）；3. 你提供的默认主题。一旦确定，它立即修改<html>的属性，此时 CSS 样式表甚至可能还没有加载完，从而从根本上避免了因 React 水合（Hydration）滞后导致的闪烁。

2.2 架构与数据流设计

next-themes的架构非常简洁，核心是两部分：一个 React Context Provider (ThemeProvider) 和一个与之配套的 Hook (useTheme)。

ThemeProvider：这是整个库的发动机。它需要被包裹在你的 Next.js 应用的根组件（通常是pages/_app.tsx或app/layout.tsx）中。它的职责是：
- 在服务端渲染时，提供一个初始的、稳定的主题状态给 React 上下文，避免水合不匹配。
- 在客户端，执行上述的“早期脚本”逻辑，确定初始主题并应用到 DOM。
- 监听系统主题偏好的变化（例如，用户在操作系统中切换了亮/暗模式）。
- 提供一个更新主题状态的方法，并负责将新的主题同步到 DOM 和localStorage。
useThemeHook：这是给开发者使用的 API。在任何子组件中调用useTheme()，它会返回一个对象，包含当前主题 (theme)、可用主题列表 (themes)、以及切换主题的函数 (setTheme)。这个 Hook 内部订阅了ThemeProvider提供的上下文，因此当主题变化时，所有使用该 Hook 的组件都会自动重新渲染，获取最新的主题值。

整个数据流是单向且清晰的：用户交互或系统事件触发setTheme->ThemeProvider更新 Context 状态并持久化到localStorage和 DOM -> 所有订阅了useTheme的组件获得新状态并重新渲染。由于 DOM 的更新是同步且优先的，样式变化总是先于 React 组件的渲染更新，确保了视觉上的连贯性。

2.3 与 CSS 方案的完美解耦

next-themes另一个优秀的设计是它不关心你的具体 CSS 实现。它只负责管理一个状态（当前主题名），并将这个状态通过属性（attribute）反映在<html>元素上。默认情况下，它设置的是>:root { --bg-color: white; --text-color: black; } html[data-theme='dark'] { --bg-color: #1a1a1a; --text-color: #f0f0f0; } body { background-color: var(--bg-color); color: var(--text-color); }

CSS Modules / Sass：同样利用属性选择器定义不同主题下的样式块。

Tailwind CSS：这是最流行的搭配。Tailwind 本身支持通过dark:变体来应用暗色样式，而next-themes默认的行为（修改html的class）与 Tailwind 的暗色模式机制完全兼容。你只需要在tailwind.config.js中设置darkMode: 'class'，next-themes就会通过添加/移除html元素上的class="dark"来触发 Tailwind 的所有dark:样式。

CSS-in-JS (Styled-components, Emotion)：你可以在样式组件内部通过props或 Theme Provider 获取next-themes管理的主题，然后动态生成样式。

这种关注点分离的设计使得next-themes极其灵活，能够无缝融入几乎任何现有的样式技术栈。

3. 从零开始集成与深度配置指南

3.1 基础安装与最小化集成

首先，通过你喜欢的包管理器安装next-themes。

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

接下来，在你的应用入口文件进行集成。对于 Next.js 13+ 的 App Router，修改app/layout.tsx；对于 Pages Router，修改pages/_app.tsx。

这里以 App Router 为例：

// app/layout.tsx import { ThemeProvider } from 'next-themes'; export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( <html lang="en" suppressHydrationWarning> <body> <ThemeProvider attribute="class" defaultTheme="system" enableSystem> {children} </ThemeProvider> </body> </html> ); }

关键参数解析：

attribute：这是最重要的配置之一。它决定了next-themes如何将主题状态应用到 DOM 上。
- ”class”：库会在<html>元素上添加或移除一个与主题同名的 CSS 类（例如class=”dark”）。这是与Tailwind CSS协同工作的推荐方式。
- ”data-theme”：库会在<html>元素上设置一个>// components/ThemeToggle.tsx 'use client'; // 在 App Router 中，使用状态的组件必须是 Client Component import { useTheme } from 'next-themes'; import { useEffect, useState } from 'react'; export function ThemeToggle() { const { theme, setTheme, resolvedTheme } = useTheme(); const [mounted, setMounted] = useState(false); // 组件挂载后才渲染，避免水合不匹配 useEffect(() => { setMounted(true); }, []); if (!mounted) { // 在服务端渲染或水合完成前，返回一个占位符，避免内容跳动 return ( <button className="w-10 h-10 rounded-lg bg-gray-200 dark:bg-gray-800 flex items-center justify-center"> <div className="w-5 h-5 bg-transparent"></div> </button> ); } // `theme` 是存储的值，可能是 'light', 'dark', 或 'system' // `resolvedTheme` 是实际生效的主题值，永远是 'light' 或 'dark' const isDark = resolvedTheme === 'dark'; const toggleTheme = () => { // 简单的循环切换：light -> dark -> system -> light ... // 或者更常见的：在 light 和 dark 间切换 setTheme(isDark ? 'light' : 'dark'); }; return ( <button onClick={toggleTheme} className="w-10 h-10 rounded-lg bg-gray-200 dark:bg-gray-800 flex items-center justify-center hover:ring-2 ring-gray-300 dark:ring-gray-600 transition-all" aria-label={`切换到${isDark ? '亮色' : '暗色'}模式`} > {isDark ? ( // 太阳图标 (亮色模式) <SunIcon className="w-5 h-5 text-yellow-500" /> ) : ( // 月亮图标 (暗色模式) <MoonIcon className="w-5 h-5 text-gray-700" /> )} </button> ); } // 简单的图标组件示例 function SunIcon(props: React.SVGProps<SVGSVGElement>) { return (/* SVG 路径 */); } function MoonIcon(props: React.SVGProps<SVGSVGElement>) { return (/* SVG 路径 */); }
  重要细节与避坑指南：
  1. mounted状态是必须的：useTheme在服务端渲染时返回的是defaultTheme或上下文初始值。在客户端水合完成前，theme可能与你最终想要渲染的图标不匹配。直接根据theme或resolvedTheme渲染图标会导致“水合错误”（Hydration Error）或内容不匹配。使用mounted状态来延迟客户端特定内容的渲染，是解决此问题的标准模式。
  2. themevsresolvedTheme：
    - theme：代表用户选择的主题。它可以是”light”、”dark”或”system”。这个值会被保存到localStorage。
    - resolvedTheme：代表当前实际生效的主题。它永远是”light”或”dark”。如果theme是”system”，那么resolvedTheme会根据操作系统的偏好动态计算得出。在决定 UI 元素（如图标）如何显示时，你应该总是使用resolvedTheme。
  3. 无障碍访问 (a11y)：为切换按钮添加aria-label非常重要，它能让屏幕阅读器用户理解按钮的作用。
  3.3 高级配置与自定义行为
  next-themes的ThemeProvider提供了更多精细控制的属性。
```
<ThemeProvider attribute="class" defaultTheme="system" enableSystem={true} disableTransitionOnChange={false} storageKey="my-app-theme" themes={['light', 'dark', 'blue', 'pink']} forcedTheme={isMaintenance ? 'light' : undefined} nonce="your-nonce-here" > {children} </ThemeProvider>
```
  - disableTransitionOnChange：默认为false。如果设置为true，在主题切换时，库会临时向<html>添加一个”changing-theme”类，你可以利用这个类来禁用 CSS 过渡，避免主题切换时颜色、背景等属性的过渡动画导致性能问题或视觉混乱。
```
.changing-theme * { transition: none !important; }
```
  - storageKey：自定义存储在localStorage中的键名。默认是”theme”。如果你有多个子域名应用需要独立存储主题，或者想避免与其它使用next-themes的页面冲突，可以修改此键。
  - themes：定义你的应用支持的所有主题列表。默认是[‘light’， ‘dark’]。你可以扩展它来支持多主题，比如[‘light’， ‘dark’， ‘blue’， ‘pink’]。useTheme().setTheme()只能切换到列表中的主题。
  - forcedTheme：一个非常强大的属性。当你设置了这个值（例如forcedTheme=”light”），它会强制整个应用使用指定的主题，覆盖用户的所有选择（localStorage和系统偏好）。这在某些场景下非常有用，比如：
    - 网站维护页面，需要统一的亮色背景。
    - 特定的营销活动页面需要固定的主题风格。
    - 用户未登录时使用默认主题，登录后读取其个人偏好。你可以根据条件动态设置forcedTheme。
  - nonce：如果你有内容安全策略（CSP）的要求，需要为next-themes注入的内联脚本指定一个 nonce，以确保脚本能正确执行。
  4. 与 Tailwind CSS 的深度集成实践
  Tailwind CSS 是目前与next-themes搭配最广泛、最丝滑的样式方案。以下是详细的配置和最佳实践。
  4.1 基础配置
  首先，在tailwind.config.js中启用基于类的暗色模式。
```
// tailwind.config.js /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: 'class', // 关键配置：使用 class 策略，而不是默认的 'media' content: [ './pages/**/*.{js,ts,jsx,tsx,mdx}', './components/**/*.{js,ts,jsx,tsx,mdx}', './app/**/*.{js,ts,jsx,tsx,mdx}', ], theme: { extend: {}, }, plugins: [], }
```
  将darkMode设置为’class’后，Tailwind 的所有dark:变体（如dark:bg-gray-900）将不再响应@media (prefers-color-scheme: dark)，而是响应父元素是否具有dark类。由于next-themes会将主题类直接添加到<html>根元素上，这意味着整个文档树下的所有元素都能正确应用dark:样式。
  确保你的ThemeProvider配置了attribute=”class”。
  4.2 处理 Tailwind 的过渡与闪烁
  即使配置正确，在极快的网络或本地开发时，你仍可能观察到一瞬间的闪烁。这是因为 Tailwind 的基础样式（在:root下定义）会立即生效，而dark:样式需要等到html元素拥有dark类后才生效。虽然next-themes的脚本执行得很早，但仍有极短的时间差。
  一个有效的技巧是在你的全局 CSS 文件（例如app/globals.css）中，为可能因主题变化而改变的关键属性（如背景色和文字颜色）添加过渡定义，并将其作用在html元素上。
```
/* app/globals.css */ @tailwind base; @tailwind components; @tailwind utilities; @layer base { html { /* 为背景和文字颜色添加平滑过渡 */ transition: background-color 0.3s ease, color 0.3s ease; } /* 你也可以在这里定义基于 CSS 变量的主题色，作为 Tailwind 的补充 */ :root { --primary: 222.2 47.4% 11.2%; } .dark { --primary: 210 40% 98%; } }
```
  注意：过度使用transition: all可能会导致性能问题。最好只对你明确知道会变化的属性（如color,background-color,border-color）应用过渡。next-themes的disableTransitionOnChange属性可以帮助你在主题切换的瞬间禁用所有过渡，避免奇怪的中间状态动画。
  4.3 自定义多主题方案
  虽然next-themes和 Tailwind 默认支持light/dark，但你可以利用它们构建更复杂的多主题系统。例如，支持“蓝色主题”、“绿色主题”。
  1. 扩展themes列表：
```
<ThemeProvider attribute="class" themes={['light', 'dark', 'blue', 'green']}>
```
  2. 在 Tailwind 中定义主题类：你需要通过添加自定义 CSS 类来覆盖 Tailwind 的实用类。
```
/* app/globals.css */ .blue { --background: 220 70% 95%; --foreground: 220 70% 10%; } .green { --background: 120 70% 95%; --foreground: 120 70% 10%; }
```
    然后，你需要在 Tailwind 配置中引用这些 CSS 变量，或者更简单地在组件中使用任意值（Arbitrary Values）。
```
<div className="bg-[hsl(var(--background))] text-[hsl(var(--foreground))]"> 这个 div 的背景和文字颜色会随 .blue 或 .green 类而改变。 </div>
```
  3. 切换逻辑：你的切换按钮或下拉菜单现在需要处理多个选项。
```
const { theme, setTheme } = useTheme(); const themes = ['light', 'dark', 'blue', 'green']; // ... 在组件中渲染一个下拉菜单，options 为 themes，onChange 调用 setTheme
```
  这种方案的缺点是，你需要为每个自定义主题手动编写大量的 CSS 覆盖规则，维护成本较高。对于复杂的多主题需求，可能需要考虑结合 CSS-in-JS 或更专业的设计系统。
  5. 常见问题排查与实战经验分享
  即使按照指南操作，在实际项目中你仍可能遇到一些棘手的情况。以下是我在多个项目中总结出的常见问题及其解决方案。
  5.1 水合错误与内容不匹配
  问题描述：在浏览器控制台看到类似 “Text content did not match” 或 “Hydration failed” 的警告或错误。或者，页面加载时，主题切换按钮的图标会快速变化一下。
  根本原因：这是 Next.js 服务端渲染（SSR）应用中最常见的问题。服务端渲染的 HTML 内容与客户端 React 初次渲染（水合）时的内容不一致。对于next-themes，这通常是因为：
  1. 组件在服务端根据defaultTheme渲染（比如亮色图标）。
  2. 在客户端，useTheme()在组件渲染时可能返回了不同的值（比如从localStorage读出了”dark”），导致渲染出暗色图标。
  3. 两者不匹配，React 抛出警告。
  解决方案：
  1. 使用mounted状态（推荐）：如前文ThemeToggle组件示例所示，这是最标准、最可靠的解决方案。确保任何依赖于客户端主题状态的 UI（如图标、文本）只在组件挂载到客户端后才渲染。
  2. 使用suppressHydrationWarning：在根<html>标签上添加此属性，可以静默由next-themes修改 DOM 属性所产生的水合警告。但这只是隐藏了警告，并未解决内容不匹配导致的视觉跳动问题，因此必须与第一种方案结合使用。
  3. 确保ThemeProvider配置正确：检查_app.tsx或layout.tsx中的ThemeProvider是否包裹了所有组件，并且attribute等参数设置无误。
  5.2 主题不随系统偏好变化
  问题描述：设置了enableSystem={true}和defaultTheme=”system”，但操作系统切换亮暗模式时，网站主题没有自动跟随变化。
  排查步骤：
  1. 检查enableSystem属性：确认ThemeProvider的enableSystem显式设置为true。这是最常见的疏忽。
  2. 检查resolvedTheme：在组件中打印resolvedTheme，观察当系统主题变化时，它是否从”light”变成了”dark”。如果resolvedTheme变了但页面样式没变，问题出在你的 CSS（如 Tailwind 配置darkMode: ‘class’是否正确）。
  3. 监听事件：next-themes内部使用window.matchMedia(‘(prefers-color-scheme: dark)’).addEventListener来监听系统变化。确保你的浏览器支持此 API，并且没有其他脚本干扰了事件监听。
  4. forcedTheme冲突：检查是否在某个父级组件或特定条件下设置了forcedTheme。forcedTheme的优先级最高，会覆盖系统偏好。
  5.3 本地存储（localStorage）不生效
  问题描述：用户切换主题后，刷新页面又回到了默认主题，用户的选择没有被记住。
  排查步骤：
  1. 无痕/隐私模式：浏览器的无痕模式或某些隐私设置可能会阻止或清除localStorage。在普通模式下测试。
  2. storageKey冲突：如果你自定义了storageKey，请确保读取和写入的键名一致。检查浏览器开发者工具（Application -> Storage -> Local Storage）中，你的网站域名下是否存在预期的键值对。
  3. 服务器端渲染干扰：在极少数情况下，服务器端可能尝试访问localStorage（这是不存在的），导致错误。确保任何访问localStorage的代码都在useEffect或客户端条件判断中执行。
  4. 存储空间已满：localStorage有大小限制（通常 5MB），虽然一个主题字符串几乎不可能占满，但可以作为一个排查方向。
  5.4 与第三方组件库的样式冲突
  问题描述：使用了像 Material-UI, Chakra UI, Ant Design 这样的第三方组件库，它们有自己的主题系统，与next-themes管理的根类名冲突，导致组件样式错乱。
  解决方案：
  1. 优先使用组件库自带的主题切换：许多现代组件库（如 Chakra UI, Mantine）内置了完善的主题和暗色模式支持，并且与自身的组件样式深度集成。在这种情况下，使用next-themes可能不是最佳选择，除非你只用它来管理全局 CSS（如自定义变量），而让组件库管理其内部组件的主题。
  2. 隔离作用域：如果坚持使用next-themes，可以尝试将第三方组件库的 Provider 包裹在特定的主题容器内，而不是让它们直接响应html的类名。但这通常很复杂。
  3. CSS 重置与覆盖：确保你的全局 CSS 重置（如normalize.css或tailwindcss/preflight）先于组件库的样式加载。有时组件库的基础样式会与你的主题类产生特异性冲突，可能需要编写更高特异性的 CSS 来覆盖。
  4. 实践建议：对于重度依赖某个组件库的项目，我强烈建议深入研究该库的主题文档，并遵循其推荐的主题切换方案。next-themes更适合用于管理“全局视觉主题”（如背景色、文字色、品牌色变量），而让组件库管理其“组件主题”。
  5.5 性能优化小贴士
  - 避免在大量组件中使用useTheme：虽然useTheme很轻量，但在成百上千个组件中同时使用，任何主题变化都会触发所有这些组件的重渲染。对于只关心主题值的叶子组件，可以考虑通过 Props 向下传递主题值，或者使用像styled-components的 ThemeProvider 这类不依赖 React Context 重渲染的样式方案。
  - 善用disableTransitionOnChange：如果你的主题切换涉及大面积的颜色变化，启用此选项可以显著提升切换时的感知性能，避免因 CSS 过渡造成的卡顿。
  - 内联脚本的优化：next-themes的内联脚本非常小，对性能影响微乎其微。无需过度担心。
  6. 进阶应用：实现主题持久化与服务器端同步
  在更复杂的应用场景中，比如用户系统，你可能希望将用户的主题偏好保存到服务器数据库，而不仅仅是localStorage。这样用户在任何设备上登录都能保持一致的界面主题。
  6.1 思路与架构
  我们需要扩展next-themes的基本流程：
  1. 初始化：页面加载时，next-themes依然优先从localStorage读取，提供即时反馈。
  2. 用户切换主题：调用setTheme后，除了更新本地状态，还应发起一个 API 调用，将偏好保存到服务器。
  3. 服务器端注入：在服务端渲染时，如果检测到用户已登录，可以从数据库或用户会话中读取其保存的主题偏好，并通过forcedTheme属性或直接修改初始 HTML 的方式，确保服务端渲染出的 HTML 就是用户偏好的主题，实现真正的“零闪烁”。
  6.2 实现示例
  步骤一：创建主题同步 Hook
```
// hooks/useSyncTheme.ts import { useTheme } from 'next-themes'; import { useEffect } from 'react'; import { useUser } from './useUser'; // 假设有一个获取用户信息的 Hook export function useSyncTheme() { const { theme, setTheme } = useTheme(); const { user, isLoggedIn } = useUser(); // 1. 当用户登录且主题变化时，同步到服务器 useEffect(() => { if (!isLoggedIn || !theme) return; const syncToServer = async () => { try { await fetch('/api/user/preferences', { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ theme }), }); } catch (error) { console.error('Failed to sync theme to server:', error); // 可选：回退到 localStorage，或显示错误提示 } }; // 可以添加防抖，避免频繁调用 API const timer = setTimeout(syncToServer, 500); return () => clearTimeout(timer); }, [theme, isLoggedIn]); // 2. 当用户登录时，尝试从服务器加载主题偏好 useEffect(() => { if (!isLoggedIn || !user?.id) return; const loadServerTheme = async () => { try { const res = await fetch(`/api/user/preferences?userId=${user.id}`); const data = await res.json(); if (data.theme && data.theme !== theme) { setTheme(data.theme); // 这将更新 next-themes 的状态和 localStorage } } catch (error) { console.error('Failed to load theme from server:', error); } }; loadServerTheme(); }, [isLoggedIn, user?.id]); // 注意：依赖项中不包含 theme 和 setTheme，避免循环 // 这个 Hook 可以不返回任何值，它只是一个副作用管理器 }
```
  步骤二：在应用中使用同步 Hook
  在你的根布局或一个高层级组件中调用这个 Hook。
```
// app/layout.tsx import { ThemeProvider } from 'next-themes'; import { useSyncTheme } from '@/hooks/useSyncTheme'; function ThemeSyncer() { useSyncTheme(); return null; // 这是一个无 UI 的组件，仅用于执行副作用 } export default function RootLayout({ children }) { return ( <html lang="en" suppressHydrationWarning> <body> <ThemeProvider attribute="class" defaultTheme="system" enableSystem> <ThemeSyncer /> {children} </ThemeProvider> </body> </html> ); }
```
  步骤三：服务端注入主题（高级）
  为了彻底消除登录用户的首屏闪烁，我们可以在服务端获取用户偏好，并通过forcedTheme或直接修改initialTheme的方式传递给ThemeProvider。这需要用到 Next.js 的服务器组件或getServerSideProps。
  对于 App Router，我们可以使用服务器组件来获取数据：
```
// app/layout.tsx (Server Component) import { ThemeProvider } from 'next-themes'; import { getServerSession } from 'next-auth'; // 假设使用 next-auth import { getUserPreferenceFromDB } from '@/lib/db'; export default async function RootLayout({ children }) { const session = await getServerSession(); let userTheme = null; if (session?.user?.id) { const prefs = await getUserPreferenceFromDB(session.user.id); userTheme = prefs?.theme; // 从数据库获取主题 } return ( <html lang="en" suppressHydrationWarning> <body> {/* 如果用户有保存的主题，则强制使用，否则使用默认行为 */} <ThemeProvider attribute="class" defaultTheme="system" enableSystem forcedTheme={userTheme || undefined} // forcedTheme 优先级最高 > {children} </ThemeProvider> </body> </html> ); }
```
  重要提示：使用forcedTheme会完全覆盖用户的本地localStorage设置。这意味着即使用户在当前设备上用localStorage存了另一个主题，只要他登录了，就会强制显示服务器保存的主题。这是否符合你的产品逻辑需要仔细权衡。一个更复杂的方案是，在客户端水合后，比较服务器注入的主题和localStorage的主题，让用户选择以哪个为准。
  通过以上组合拳，你可以构建一个非常健壮、用户体验极佳的主题系统，既能享受next-themes带来的无闪烁和系统跟随特性，又能实现跨设备的主题偏好同步。这体现了next-themes作为一个底层状态管理工具的灵活性，它能够很好地融入更复杂的应用架构中。