保存用户深色模式

Han-Orz · Jul 28, 2023 · af2a5b3 · af2a5b3
1 parent 70d6f9b
commit af2a5b3
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 8 deletions.
diff --git a/lib/global.js b/lib/global.js
@@ -24,7 +24,7 @@ export function GlobalContextProvider({ children }) {
 
   useEffect(() => {
     initLocale(lang, locale, updateLang, updateLocale)
-    initDarkMode(isDarkMode, updateDarkMode)
+    initDarkMode(updateDarkMode)
     initTheme()
   }, [])
 

diff --git a/themes/theme.js b/themes/theme.js
@@ -60,16 +60,26 @@ export const getLayoutNameByPath = (path) => {
  * @param updateDarkMode 更改主题ChangeState函数
  * @description 读取cookie中存的用户主题
  */
-export const initDarkMode = (isDarkMode, updateDarkMode) => {
+export const initDarkMode = (updateDarkMode) => {
+  console.log('检查深色模式')
+  // 查看用户设备浏览器是否深色模型
+  let newDarkMode = isPreferDark()
+
+  // 查看cookie中是否用户强制设置深色模式
+  const cookieDarkMode = loadDarkModeFromCookies()
+  if (cookieDarkMode) {
+    newDarkMode = JSON.parse(cookieDarkMode)
+  }
+
+  // url查询条件中是否深色模式
   const queryMode = getQueryVariable('mode')
   if (queryMode) {
-    isDarkMode = queryMode === 'dark'
-  } else if (!isDarkMode) {
-    isDarkMode = isPreferDark()
+    newDarkMode = queryMode === 'dark'
   }
-  updateDarkMode(isDarkMode)
-  saveDarkModeToCookies(isDarkMode)
-  document.getElementsByTagName('html')[0].setAttribute('class', isDarkMode ? 'dark' : 'light')
+
+  updateDarkMode(newDarkMode)
+  saveDarkModeToCookies(newDarkMode)
+  document.getElementsByTagName('html')[0].setAttribute('class', newDarkMode ? 'dark' : 'light')
 }
 
 /**