初始化夜间模式

2026-05-14 07:26:52 +00:00 · 2022-03-03 15:56:55 +08:00
parent 3453bf9b11
commit fe4007bbca
4 changed files with 29 additions and 22 deletions
--- a/lib/global.js
+++ b/lib/global.js
@@ -1,8 +1,9 @@
 import lang from './lang'
 import { useContext, createContext, useState, useEffect } from 'react'
 import Router from 'next/router'
-import { initTheme, loadDarkModeFromCookies } from './theme'
+import { initDarkMode } from './theme'
 const GlobalContext = createContext()
+let hasInit = false

 /**
 * 全局变量Provider，包括语言本地化、样式主题、搜索词
@@ -12,7 +13,7 @@ const GlobalContext = createContext()
 */
 export function GlobalContextProvider ({ children }) {
  const [locale, updateLocale] = useState(generateLocaleDict('en-US'))
-  const [isDarkMode, updateDarkMode] = useState(loadDarkModeFromCookies())
+  const [isDarkMode, updateDarkMode] = useState(false)
  const [onLoading, changeLoadingState] = useState(false)
  Router.events.on('routeChangeStart', (...args) => {
    changeLoadingState(true)
@@ -23,10 +24,14 @@ export function GlobalContextProvider ({ children }) {
  })

  // 服务端静态渲染，在渲染hooks后根据前端变量做初始化工作
-  useEffect(() => {
-    initTheme(isDarkMode, updateDarkMode)
-    initLocale(locale, updateLocale)
-  })
+  setTimeout(() => {
+    console.log('初始化', hasInit, isDarkMode)
+    if (!hasInit) {
+      hasInit = true
+      initLocale(locale, updateLocale)
+      initDarkMode(isDarkMode, updateDarkMode)
+    }
+  }, 1000)

  return (
    <GlobalContext.Provider value={{ onLoading, locale, isDarkMode, updateDarkMode }}>
--- a/lib/theme.js
+++ b/lib/theme.js
@@ -2,31 +2,33 @@ import cookie from 'react-cookies'

 /**
 * 初始化主题
- * @param theme 用户默认主题state
+ * @param
+ * @param isDarkMode
 * @param updateDarkMode 更改主题ChangeState函数
 * @description 读取cookie中存的用户主题
 */
-export const initTheme = (isDarkMode, updateDarkMode) => {
-  // 若未指定主题，则从时间和浏览器偏好中决定初始主题
+export const initDarkMode = (isDarkMode, updateDarkMode) => {
  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) {
-      isDarkMode = true
-    } else {
-      isDarkMode = false
-    }
+    isDarkMode = isPreferDark()
  }
  if (typeof window !== 'undefined') {
-    const htmlElement = document.getElementsByTagName('html')
-    htmlElement.className = ''
    updateDarkMode(isDarkMode)
    saveDarkModeToCookies(isDarkMode)
-    htmlElement.classList?.add(isDarkMode)
+    document.getElementsByTagName('html')[0].setAttribute('class', isDarkMode ? 'dark' : 'light')
  }
 }

+/**
+ * 是否优先深色模式
+ * @returns {*}
+ */
+export function isPreferDark () {
+  // 系统深色模式或时间是夜间时，强行置为夜间模式
+  const date = new Date()
+  const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
+  return prefersDarkMode || (date.getHours() >= 18 || date.getHours() < 6)
+}
+
 /**
 * 读取默认主题
 * @returns {*}
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -11,7 +11,7 @@ class MyDocument extends Document {

  render () {
    return (
-      <Html lang={BLOG.LANG}>
+      <Html lang={BLOG.LANG} className='test'>
        <Head>
          <link rel='icon' href='/favicon.ico' />
          <link rel='icon' href='/favicon.svg' type='image/svg+xml' />
--- a/themes/NEXT/components/FloatDarkModeButton.js
+++ b/themes/NEXT/components/FloatDarkModeButton.js
@@ -1,5 +1,5 @@
 import { useGlobal } from '@/lib/global'
-import { loadDarkModeFromCookies, saveDarkModeToCookies } from '@/lib/theme'
+import { saveDarkModeToCookies } from '@/lib/theme'
 import CONFIG_NEXT from '../config_next'

 export default function FloatDarkModeButton () {