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: '/' })
 }

themes/Hexo/components/Header.js

@@ -14,7 +14,7 @@ let autoScroll = false
  */
 export default function Header () {
   const [typed, changeType] = useState()
-  const { theme } = useGlobal()
+  const { isDarkMode } = useGlobal()
 
   useEffect(() => {
     scrollTrigger()
@@ -76,7 +76,7 @@ export default function Header () {
   }
 
   const updateTopNav = () => {
-    if (theme !== 'dark') {
+    if (!isDarkMode) {
       const stickyNavElement = document.getElementById('sticky-nav')
       if (window.scrollY < window.innerHeight) {
         stickyNavElement?.classList?.add('dark')

themes/NEXT/components/DarkModeButton.js

@@ -1,18 +1,18 @@
 import { useGlobal } from '@/lib/global'
-import { loadUserThemeFromCookies, saveTheme } from '@/lib/theme'
+import { loadDarkModeFromCookies, saveDarkModeToCookies } from '@/lib/theme'
 
 const DarkModeButton = () => {
-  const { changeTheme } = useGlobal()
-  const userTheme = loadUserThemeFromCookies()
+  const { updateDarkMode } = useGlobal()
+  const isDarkMode = loadDarkModeFromCookies()
 
   // 用户手动设置主题
   const handleChangeDarkMode = () => {
-    const newTheme = (userTheme === 'light' ? 'dark' : 'light')
-    saveTheme(newTheme)
-    changeTheme(newTheme)
+    const newTheme = (isDarkMode ? 'dark' : 'light')
+    saveDarkModeToCookies(newTheme)
+    updateDarkMode(newTheme)
   }
   return <div className='z-10 duration-200 text-xs cursor-pointer py-1.5 px-1'>
-    <i id='darkModeButton' className={`hover:scale-125 transform duration-200 fas ${userTheme === 'dark' ? 'fa-sun' : 'fa-moon'}`}
+    <i id='darkModeButton' className={`hover:scale-125 transform duration-200 fas ${isDarkMode ? 'fa-sun' : 'fa-moon'}`}
        onClick={handleChangeDarkMode} />
   </div>
 }

themes/NEXT/components/FloatDarkModeButton.js

@@ -1,5 +1,5 @@
 import { useGlobal } from '@/lib/global'
-import { loadUserThemeFromCookies, saveTheme } from '@/lib/theme'
+import { loadDarkModeFromCookies, saveDarkModeToCookies } from '@/lib/theme'
 import CONFIG_NEXT from '../config_next'
 
 export default function FloatDarkModeButton () {
@@ -7,16 +7,15 @@ export default function FloatDarkModeButton () {
     return <></>
   }
 
-  const { changeTheme } = useGlobal()
-  const userTheme = loadUserThemeFromCookies()
+  const { isDarkMode, updateDarkMode } = useGlobal()
   // 用户手动设置主题
   const handleChangeDarkMode = () => {
-    const newTheme = userTheme === 'light' ? 'dark' : 'light'
-    saveTheme(newTheme)
-    changeTheme(newTheme)
+    const newStatus = !isDarkMode
+    saveDarkModeToCookies(newStatus)
+    updateDarkMode(newStatus)
     const htmlElement = document.getElementsByTagName('html')[0]
-    htmlElement.classList?.remove(userTheme)
-    htmlElement.classList?.add(newTheme)
+    htmlElement.classList?.remove(newStatus ? 'light' : 'dark')
+    htmlElement.classList?.add(newStatus ? 'dark' : 'light')
   }
 
   return (
@@ -27,7 +26,7 @@ export default function FloatDarkModeButton () {
     >
       <i
         id="darkModeButton"
-        className={`${userTheme === 'dark' ? 'fa-sun' : 'fa-moon'} fas hover:scale-150 transform duration-200`}
+        className={`${isDarkMode ? 'fa-sun' : 'fa-moon'} fas hover:scale-150 transform duration-200`}
       />
     </div>
   )

themes/NEXT/components/Header.js

@@ -27,7 +27,7 @@ export default function Header () {
       )
     }
   })
-  const { theme } = useGlobal()
+  const { isDarkMode } = useGlobal()
 
   const autoScrollEnd = () => {
     if (autoScroll) {
@@ -61,7 +61,7 @@ export default function Header () {
   }
 
   const updateTopNav = () => {
-    if (theme !== 'dark') {
+    if (!isDarkMode) {
       const stickyNavElement = document.getElementById('sticky-nav')
       if (window.scrollY < window.innerHeight) {
         stickyNavElement.classList.add('dark')