From fe4007bbca86ad8f6d7e441843856f9cd5de0818 Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Thu, 3 Mar 2022 15:56:55 +0800 Subject: [PATCH] =?UTF-8?q?=E5=88=9D=E5=A7=8B=E5=8C=96=E5=A4=9C=E9=97=B4?= =?UTF-8?q?=E6=A8=A1=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/global.js | 17 +++++++---- lib/theme.js | 30 ++++++++++--------- pages/_document.js | 2 +- themes/NEXT/components/FloatDarkModeButton.js | 2 +- 4 files changed, 29 insertions(+), 22 deletions(-) diff --git a/lib/global.js b/lib/global.js index 77898d29..860d37f1 100644 --- 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 ( diff --git a/lib/theme.js b/lib/theme.js index 9cff0061..ba888dba 100644 --- 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 {*} diff --git a/pages/_document.js b/pages/_document.js index 5a62d753..4a4cb812 100644 --- a/pages/_document.js +++ b/pages/_document.js @@ -11,7 +11,7 @@ class MyDocument extends Document { render () { return ( - + diff --git a/themes/NEXT/components/FloatDarkModeButton.js b/themes/NEXT/components/FloatDarkModeButton.js index 2a7b5865..87e10983 100644 --- 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 () {