使用 React Context 管理主题状态

首先，调用 createContext()，传入与上下文结构匹配的默认值：const ThemeContext = createContext({ theme: 'light', toggleTheme: () => {} })。仅当组件在没有父级提供者的情况下读取上下文时，才会使用默认值；这有助于测试独立组件。

ThemeProvider 组件是一个包装组件，包含所有主题逻辑。它在挂载时读取系统偏好设置，管理 theme 状态，提供 toggleTheme 函数，并将子组件包装在 ThemeContext.Provider value={{ theme, toggleTheme }} 中。请将它放在组件树靠近顶部的位置。

任何后代组件都可以通过调用 useContext(ThemeContext) 来访问主题。它会返回当前上下文值，其中包括 theme 和 toggleTheme。主题发生变化时，组件会自动重新渲染，因此始终保持同步，无需逐层传递属性。

CSS 变量依赖根元素上的 data-theme 属性。在 ThemeProvider 中添加一个 useEffect，使其在 theme 发生变化时运行：document.documentElement.setAttribute('data-theme', theme)。这样可以无缝连接 React 状态和 CSS 层。

为了让用户的选择在页面重新加载后仍然保留，请在主题发生变化时写入 localStorage：localStorage.setItem('theme', theme)。您可以将这段逻辑封装在自定义的 useLocalStorage 钩子中；它返回一对类似状态的值，并自动持久化每次更新。

初始化主题状态时，请先从 localStorage 读取：localStorage.getItem('theme')。如果不存在已存储的值，则通过 window.matchMedia('(prefers-color-scheme: dark)').matches 回退到系统偏好设置。此初始化只会在挂载时运行一次。

正确的优先级顺序从高到低是：localStorage 中存储的用户偏好设置、系统 OS 偏好设置，最后是硬编码的默认值（通常为浅色）。这种顺序确保用户始终拥有最终控制权；如果用户尚未在应用中明确选择主题，也会继续遵循其 OS 配置。

如果在每个组件中直接调用 useContext(ThemeContext)，就会暴露实现细节。相反，请导出一个 useTheme 钩子：function useTheme() { return useContext(ThemeContext); }。这样，组件只需导入并调用 useTheme，无需了解底层上下文。

toggleTheme 函数会在浅色和深色之间切换：setTheme(prev => prev === 'light' ? 'dark' : 'light')。请通过上下文公开它，这样组件树中的任何按钮都可以触发它。状态集中存放，切换逻辑则在各处共享。

每次 ThemeProvider 重新渲染时，都会重新创建上下文值对象。请使用 useMemo 包装它，以避免所有上下文使用组件不必要地重新渲染：const value = useMemo(() => ({ theme, toggleTheme }), [theme])。这是上下文提供者常用的性能优化方式。

在测试中，请使用自定义的 renderWithTheme 工具包装渲染，并将 ThemeProvider 作为包装器。您也可以创建一个轻量的模拟上下文，以便独立测试：ThemeContext.Provider value={{ theme: 'dark', toggleTheme: jest.fn() }}。这样就可以在指定的主题状态下测试组件。

初始化应用主题时，正确的优先级顺序（从高到低）是什么？

创建一个 ThemeContext 和一个 ThemeProvider，用于管理主题状态、同步到 localStorage，并在文档上设置 data-theme。使用 useTheme 便捷钩子来简洁地使用主题。优先级顺序是：已存储的偏好设置、系统偏好设置，最后是默认值。