From 4c707c1df1ab7acba308d0e93b2c5b6c4214c7b0 Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Mon, 3 Jan 2022 17:56:12 +0800
Subject: [PATCH] =?UTF-8?q?feature:=20=E5=B0=81=E8=A3=85=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/FloatDarkModeButton.js |  3 ++-
 lib/global.js                     | 44 +------------------------------
 lib/theme.js                      | 44 +++++++++++++++++++++++++++++++
 3 files changed, 47 insertions(+), 44 deletions(-)
 create mode 100644 lib/theme.js

diff --git a/components/FloatDarkModeButton.js b/components/FloatDarkModeButton.js
index 077e904a..3e3b246e 100644
--- a/components/FloatDarkModeButton.js
+++ b/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)
diff --git a/lib/global.js b/lib/global.js
index a5346535..a9e3cac5 100644
--- a/lib/global.js
+++ b/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: '/' })
-}
 
 /**
  * 深度合并两个对象
diff --git a/lib/theme.js b/lib/theme.js
new file mode 100644
index 00000000..b1865298
--- /dev/null
+++ b/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: '/' })
+}