feature:

封装主题组件

components/FloatDarkModeButton.js

@@ -1,7 +1,8 @@
 import { useEffect, useState } from 'react'
-import { loadUserThemeFromCookies, saveTheme, useGlobal } from '@/lib/global'
+import { useGlobal } from '@/lib/global'
 import { faMoon, faSun } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { loadUserThemeFromCookies, saveTheme } from '@/lib/theme'
 
 export default function FloatDarkModeButton () {
   const [show, switchShow] = useState(false)

lib/global.js

@@ -1,7 +1,7 @@
 import lang from './lang'
 import { useContext, createContext, useState, useEffect } from 'react'
-import cookie from 'react-cookies'
 import Router from 'next/router'
+import { initTheme, loadUserThemeFromCookies } from './theme'
 const GlobalContext = createContext()
 
 /**
@@ -76,48 +76,6 @@ const initLocale = (locale, changeLocale) => {
     }
   }
 }
-/**
- * 初始化主题
- * @param theme 用户默认主题state
- * @param changeTheme 更改主题ChangeState函数
- * @description 读取cookie中存的用户主题
- */
-const initTheme = (theme, changeTheme) => {
-  if (!theme) {
-    const date = new Date()
-    const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
-    const useDark = prefersDarkMode || (date.getHours() >= 18 || date.getHours() < 6)
-    const htmlElement = document.getElementsByTagName('html')
-
-    if (useDark) {
-      changeTheme('dark')
-      saveTheme('dark')
-      htmlElement.classList?.remove('light')
-      htmlElement.classList?.add('dark')
-    } else {
-      changeTheme('light')
-      saveTheme('light')
-      htmlElement.classList?.remove('dark')
-      htmlElement.classList?.add('light')
-    }
-  }
-}
-
-/**
- * 读取默认主题
- * @returns {*}
- */
-export const loadUserThemeFromCookies = () => {
-  return cookie.load('theme')
-}
-
-/**
- * 保存默认主题
- * @param newTheme
- */
-export const saveTheme = (newTheme) => {
-  cookie.save('theme', newTheme, { path: '/' })
-}
 
 /**
  * 深度合并两个对象

lib/theme.js

@@ -0,0 +1,44 @@
+import cookie from 'react-cookies'
+
+/**
+ * 初始化主题
+ * @param theme 用户默认主题state
+ * @param changeTheme 更改主题ChangeState函数
+ * @description 读取cookie中存的用户主题
+ */
+export const initTheme = (theme, changeTheme) => {
+  // 若未指定主题，则从时间和浏览器偏好中决定初始主题
+  if (!theme) {
+    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'
+    } else {
+      theme = 'light'
+    }
+  }
+  if (typeof window !== 'undefined') {
+    const htmlElement = document.getElementsByTagName('html')
+    htmlElement.className = ''
+    changeTheme(theme)
+    saveTheme(theme)
+    htmlElement.classList?.add(theme)
+  }
+}
+
+/**
+ * 读取默认主题
+ * @returns {*}
+ */
+export const loadUserThemeFromCookies = () => {
+  return cookie.load('theme')
+}
+
+/**
+   * 保存默认主题
+   * @param newTheme
+   */
+export const saveTheme = (newTheme) => {
+  cookie.save('theme', newTheme, { path: '/' })
+}