DarkMode 模块重命名

lib/global.js

@@ -1,7 +1,7 @@
 import lang from './lang'
 import { useContext, createContext, useState, useEffect } from 'react'
 import Router from 'next/router'
-import { initTheme, loadUserThemeFromCookies } from './theme'
+import { initTheme, loadDarkModeFromCookies } from './theme'
 const GlobalContext = createContext()
 
 /**
@@ -12,7 +12,7 @@ const GlobalContext = createContext()
  */
 export function GlobalContextProvider ({ children }) {
   const [locale, changeLocale] = useState(generateLocaleDict('en-US'))
-  const [theme, changeTheme] = useState(loadUserThemeFromCookies())
+  const [isDarkMode, updateDarkMode] = useState(loadDarkModeFromCookies())
   const [onLoading, changeLoadingState] = useState(false)
   Router.events.on('routeChangeStart', (...args) => {
     changeLoadingState(true)
@@ -24,12 +24,12 @@ export function GlobalContextProvider ({ children }) {
 
   // 服务端静态渲染，在渲染hooks后根据前端变量做初始化工作
   useEffect(() => {
-    initTheme(theme, changeTheme)
+    initTheme(isDarkMode, updateDarkMode)
     initLocale(locale, changeLocale)
   })
 
   return (
-    <GlobalContext.Provider value={{ onLoading, locale, theme, changeTheme }}>
+    <GlobalContext.Provider value={{ onLoading, locale, isDarkMode, updateDarkMode }}>
       {children}
     </GlobalContext.Provider>
   )

lib/theme.js

@@ -3,27 +3,27 @@ import cookie from 'react-cookies'
 /**
  * 初始化主题
  * @param theme 用户默认主题state
- * @param changeTheme 更改主题ChangeState函数
+ * @param updateDarkMode 更改主题ChangeState函数
  * @description 读取cookie中存的用户主题
  */
-export const initTheme = (theme, changeTheme) => {
+export const initTheme = (isDarkMode, updateDarkMode) => {
   // 若未指定主题，则从时间和浏览器偏好中决定初始主题
-  if (!theme) {
+  if (!isDarkMode) {
     const date = new Date()
     const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
     const useDark = prefersDarkMode || (date.getHours() >= 18 || date.getHours() < 6)
     if (useDark) {
-      theme = 'dark'
+      isDarkMode = true
     } else {
-      theme = 'light'
+      isDarkMode = false
     }
   }
   if (typeof window !== 'undefined') {
     const htmlElement = document.getElementsByTagName('html')
     htmlElement.className = ''
-    changeTheme(theme)
-    saveTheme(theme)
-    htmlElement.classList?.add(theme)
+    updateDarkMode(isDarkMode)
+    saveDarkModeToCookies(isDarkMode)
+    htmlElement.classList?.add(isDarkMode)
   }
 }
 
@@ -31,7 +31,7 @@ export const initTheme = (theme, changeTheme) => {
  * 读取默认主题
  * @returns {*}
  */
-export const loadUserThemeFromCookies = () => {
+export const loadDarkModeFromCookies = () => {
   return cookie.load('theme')
 }
 
@@ -39,6 +39,6 @@ export const loadUserThemeFromCookies = () => {
    * 保存默认主题
    * @param newTheme
    */
-export const saveTheme = (newTheme) => {
+export const saveDarkModeToCookies = (newTheme) => {
   cookie.save('theme', newTheme, { path: '/' })
 }