小编Mat*_*ori的帖子

我正在尝试使用 Context API 创建一个主题提供程序来设置应用程序主题，这只是一个classNameon body。

上下文非常简单。在主题状态的惰性初始化器上，首先，我检查主题是否打开localStorage。如果主题不在本地存储中，那么我会根据用户系统首选项设置主题。

'use client'

import { createContext, useEffect, useState } from 'react'
import {
  type ThemeContextData,
  type ThemeProviderProps,
  type Themes
} from './types'
import { darkTheme, lightTheme } from '@/styles/themes.css'

export const ThemeContext = createContext<ThemeContextData>(
  {} as ThemeContextData
)

export function ThemeProvider({
  children,
  className
}: ThemeProviderProps): JSX.Element {
  const [theme, setTheme] = useState<Themes>(() => {
    if (typeof window !== 'undefined') {
      const isThemeOnLocalStorage = window.localStorage.getItem(
        '@matheussartori/theme'
      )

      if (isThemeOnLocalStorage) {
        return …