编辑“︁Next.js主题切换”︁（章节）

= Next.js主题切换 =

'''主题切换'''（Theme Switching）是Next.js应用中常见的功能需求，允许用户在亮色（Light）和暗色（Dark）主题之间动态切换，或自定义其他主题样式。Next.js提供了多种方式实现这一功能，包括CSS变量、CSS-in-JS库（如styled-components或Emotion）以及第三方状态管理工具（如Zustand或Redux）。

== 基本概念 ==
主题切换的核心原理是通过动态修改CSS变量或类名来改变页面样式。通常涉及以下步骤：
1. '''定义主题变量'''：在CSS中声明不同主题的颜色、字体等属性。
2. '''状态管理'''：存储当前主题状态（如"light"或"dark"）。
3. '''动态应用主题'''：根据状态切换对应的CSS类或变量。
4. '''持久化'''：将用户偏好保存到localStorage或Cookie中。

== 实现方法 ==
=== 使用CSS变量 ===
CSS变量（Custom Properties）是实现主题切换的最轻量方案。以下是一个完整示例：

<syntaxhighlight lang="javascript">
// pages/_app.js
import { useState, useEffect } from 'react';

function MyApp({ Component, pageProps }) {
  const [theme, setTheme] = useState('light');

  useEffect(() => {
    // 从localStorage读取保存的主题
    const savedTheme = localStorage.getItem('theme') || 'light';
    setTheme(savedTheme);
    document.documentElement.setAttribute('data-theme', savedTheme);
  }, []);

  const toggleTheme = () => {
    const newTheme = theme === 'light' ? 'dark' : 'light';
    setTheme(newTheme);
    localStorage.setItem('theme', newTheme);
    document.documentElement.setAttribute('data-theme', newTheme);
  };

  return (
    <>
      <button onClick={toggleTheme}>切换主题</button>
      <Component {...pageProps} />
    </>
  );
}
</syntaxhighlight>

<syntaxhighlight lang="css">
/* styles/globals.css */
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
}

[data-theme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #f0f0f0;
}

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

=== 使用CSS-in-JS ===
通过styled-components等库可以更灵活地管理主题：

<syntaxhighlight lang="javascript">
// theme.js
export const lightTheme = {
  colors: {
    background: '#ffffff',
    text: '#333333',
  },
};

export const darkTheme = {
  colors: {
    background: '#1a1a1a',
    text: '#f0f0f0',
  },
};
</syntaxhighlight>

<syntaxhighlight lang="javascript">
// pages/_app.js
import { ThemeProvider } from 'styled-components';
import { useState, useEffect } from 'react';
import { lightTheme, darkTheme } from '../theme';

function MyApp({ Component, pageProps }) {
  const [theme, setTheme] = useState(lightTheme);

  const toggleTheme = () => {
    setTheme(theme === lightTheme ? darkTheme : lightTheme);
  };

  return (
    <ThemeProvider theme={theme}>
      <button onClick={toggleTheme}>切换主题</button>
      <Component {...pageProps} />
    </ThemeProvider>
  );
}
</syntaxhighlight>

== 系统偏好检测 ==
可以自动检测用户系统的主题偏好：

<syntaxhighlight lang="javascript">
useEffect(() => {
  const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
  const handleChange = (e) => {
    setTheme(e.matches ? darkTheme : lightTheme);
  };

  mediaQuery.addEventListener('change', handleChange);
  return () => mediaQuery.removeEventListener('change', handleChange);
}, []);
</syntaxhighlight>

== 状态流程图 ==
<mermaid>
graph TD
    A[用户点击切换按钮] --> B{当前主题}
    B -->|light| C[设置为dark]
    B -->|dark| D[设置为light]
    C --> E[保存到localStorage]
    D --> E
    E --> F[更新DOM样式]
</mermaid>

== 进阶技巧 ==
=== 主题持久化 ===
为防止页面刷新后主题重置，需要将主题状态保存到localStorage或通过服务端注入：

<syntaxhighlight lang="javascript">
// 服务端获取主题（SSR/SSG）
export async function getServerSideProps(context) {
  const theme = context.req.cookies.theme || 'light';
  return { props: { theme } };
}
</syntaxhighlight>

=== 动画过渡 ===
添加平滑的过渡效果提升用户体验：

<syntaxhighlight lang="css">
* {
  transition: background-color 0.3s ease, color 0.3s ease;
}
</syntaxhighlight>

== 实际案例 ==
'''案例：仪表盘主题切换'''
1. 用户进入仪表盘页面
2. 系统自动检测OS主题偏好
3. 顶部导航栏显示主题切换按钮
4. 切换时所有图表组件同步更新主题色

== 性能考量 ==
* 避免在主题对象中定义过多变量
* 使用CSS变量而非直接修改样式以获得更好性能
* 对于复杂应用，考虑使用useMemo优化主题计算

== 常见问题 ==
'''Q: 如何实现多主题（不止light/dark）？'''
A: 扩展主题对象，例如：
<syntaxhighlight lang="javascript">
const themes = {
  light: { ... },
  dark: { ... },
  blue: { primary: '#1e90ff' }
};
</syntaxhighlight>

'''Q: 主题切换闪烁怎么办？'''
A: 在SSR时通过脚本在HTML渲染前设置初始主题：
<syntaxhighlight lang="javascript">
// pages/_document.js
<script dangerouslySetInnerHTML={{
  __html: `
    (function() {
      var theme = localStorage.getItem('theme') || 
        (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
      document.documentElement.setAttribute('data-theme', theme);
    })();
  `
}} />
</syntaxhighlight>

== 数学表达 ==
主题对比度计算（WCAG标准）：
<math>
\text{contrast ratio} = \frac{L1 + 0.05}{L2 + 0.05}
</math>
其中L1和L2为颜色的相对亮度。

== 总结 ==
Next.js主题切换可以通过多种方式实现，关键是根据项目复杂度选择合适方案。对于大多数应用，CSS变量方案足够高效；复杂应用可能需要结合状态管理库。记住始终考虑：
1. 用户偏好持久化
2. 系统主题检测
3. 切换性能优化
4. 无障碍设计（足够的对比度）

[[Category:后端框架]]
[[Category:Next.js]]
[[Category:Next.js样式解决方案]]