Next.js 中的主题切换指南：在系统、浅色和深色模式间轻松切换

javascript

2024-03-05 20:04:04

Next.js 中的主题切换：在系统、浅色和深色模式间无缝过渡

简介

在现代 Web 应用程序中，提供个性化体验至关重要，其中主题切换功能扮演着关键角色。在本文中，我们将探讨如何使用 MUI 在 Next.js 应用程序中实现无缝的主题切换，包括系统、浅色和深色模式。

问题：主题切换中的挑战

在 Next.js 中使用 MUI 进行主题切换时，可能会遇到以下挑战：

主题持久性失效： 在某些情况下，选定的主题可能会在重新加载页面或从浅色切换到深色模式时丢失。
加载时错误： 从浅色切换到系统或深色模式时，可能会出现组件类名不匹配的错误。

解决方案：逐步解决主题切换问题

为了解决上述问题，我们将分步指导你实施一个健壮的主题切换机制：

步骤 1：持久化主题设置

使用 useLayoutEffect 钩子在首次渲染前存储选定的主题。
将选定的主题存储在 localStorage 中，以在会话之间进行持久化。

步骤 2：监听系统主题更改

使用 useEffect 钩子监听系统主题更改，并在系统主题更改时更新应用程序的主题。

步骤 3：创建主题选择器

创建一个允许用户选择主题的下拉菜单组件。
将选定的主题存储在状态中，并通过 onChange 事件处理程序处理主题切换。

代码示例：实现主题切换

以下代码片段展示了如何实现主题切换功能：

import { createContext, useEffect, useState, useLayoutEffect } from 'react'
import { createTheme, ThemeProvider, CssBaseline } from '@mui/material'

const ThemeContext = createContext()

const useThemeContext = () => useContext(ThemeContext)

export const ThemeModeProviderComponent = ({ children }) => {
  const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'

  const [selectedTheme, setSelectedTheme] = useState(() =>
    typeof localStorage !== 'undefined' && localStorage.getItem('theme') || 'system'
  )

  useEffect(() => {
    if (selectedTheme === 'system') {
      const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
      themes.system.palette.mode = systemTheme
    }
  }, [selectedTheme, themes.system])

  const handleThemeChange = (event) => {
    const { value } = event.target

    setSelectedTheme(value)
    localStorage.setItem('theme', value)
  }

  return (
    <ThemeContext.Provider value={{ selectedTheme, handleThemeChange }}>
      <ThemeProvider theme={themes[selectedTheme]}>
          <CssBaseline enableColorScheme/>
          {children}
      </ThemeProvider>
    </ThemeContext.Provider>
  )
}

结论

通过遵循这些步骤，你可以在 Next.js 应用程序中轻松实现主题切换，为用户提供个性化的体验。现在，你的应用程序可以根据用户的喜好或系统设置在系统、浅色和深色模式之间无缝切换。

常见问题解答

如何确保主题设置在重新加载页面后仍然生效？
- 使用 localStorage 来持久化选定的主题。
如何处理加载时出现的组件类名不匹配错误？
- 确保从浅色切换到系统或深色模式时，主题提供程序已更新。
我可以使用自己的自定义主题吗？
- 当然，你可以创建自己的自定义主题，并将其添加到 themes 对象中。
主题切换是否支持在多个设备上同步？
- 目前不提供跨设备同步，但你可以探索第三方解决方案来实现这一功能。
如何设置默认主题？
- 你可以在 useThemeContext 钩子中定义一个默认主题，并在 selectedTheme 初始值为 null 时返回该主题。