d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-06-06 15:10:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

初始化夜间模式

Browse Source
This commit is contained in:
tangly1024
2022-03-03 15:56:55 +08:00
parent 3453bf9b11
commit fe4007bbca
4 changed files with 29 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
lib/global.js
View File

@@ -1,8 +1,9 @@
import lang from './lang' import lang from './lang'
import { useContext, createContext, useState, useEffect } from 'react' import { useContext, createContext, useState, useEffect } from 'react'
import Router from 'next/router' import Router from 'next/router'
import { initTheme, loadDarkModeFromCookies } from './theme' import { initDarkMode } from './theme'
const GlobalContext = createContext() const GlobalContext = createContext()
let hasInit = false
/** /**
* 全局变量Provider，包括语言本地化、样式主题、搜索词 * 全局变量Provider，包括语言本地化、样式主题、搜索词
@@ -12,7 +13,7 @@ const GlobalContext = createContext()
*/ */
export function GlobalContextProvider ({ children }) { export function GlobalContextProvider ({ children }) {
const [locale, updateLocale] = useState(generateLocaleDict('en-US')) const [locale, updateLocale] = useState(generateLocaleDict('en-US'))
const [isDarkMode, updateDarkMode] = useState(loadDarkModeFromCookies()) const [isDarkMode, updateDarkMode] = useState(false)
const [onLoading, changeLoadingState] = useState(false) const [onLoading, changeLoadingState] = useState(false)
Router.events.on('routeChangeStart', (...args) => { Router.events.on('routeChangeStart', (...args) => {
changeLoadingState(true) changeLoadingState(true)
@@ -23,10 +24,14 @@ export function GlobalContextProvider ({ children }) {
}) })
// 服务端静态渲染，在渲染hooks后根据前端变量做初始化工作 // 服务端静态渲染，在渲染hooks后根据前端变量做初始化工作
useEffect(() => { setTimeout(() => {
initTheme(isDarkMode, updateDarkMode) console.log('初始化', hasInit, isDarkMode)
initLocale(locale, updateLocale) if (!hasInit) {
}) hasInit = true
initLocale(locale, updateLocale)
initDarkMode(isDarkMode, updateDarkMode)
}
}, 1000)
return ( return (
<GlobalContext.Provider value={{ onLoading, locale, isDarkMode, updateDarkMode }}> <GlobalContext.Provider value={{ onLoading, locale, isDarkMode, updateDarkMode }}>

30
lib/theme.js
View File

@@ -2,31 +2,33 @@ import cookie from 'react-cookies'
/** /**
* 初始化主题 * 初始化主题
* @param theme 用户默认主题state * @param
* @param isDarkMode
* @param updateDarkMode 更改主题ChangeState函数 * @param updateDarkMode 更改主题ChangeState函数
* @description 读取cookie中存的用户主题 * @description 读取cookie中存的用户主题
*/ */
export const initTheme = (isDarkMode, updateDarkMode) => { export const initDarkMode = (isDarkMode, updateDarkMode) => {
// 若未指定主题，则从时间和浏览器偏好中决定初始主题
if (!isDarkMode) { if (!isDarkMode) {
const date = new Date() isDarkMode = isPreferDark()
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
}
} }
if (typeof window !== 'undefined') { if (typeof window !== 'undefined') {
const htmlElement = document.getElementsByTagName('html')
htmlElement.className = ''
updateDarkMode(isDarkMode) updateDarkMode(isDarkMode)
saveDarkModeToCookies(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 {*} * @returns {*}

2
pages/_document.js
View File

@@ -11,7 +11,7 @@ class MyDocument extends Document {
render () { render () {
return ( return (
<Html lang={BLOG.LANG}> <Html lang={BLOG.LANG} className='test'>
<Head> <Head>
<link rel='icon' href='/favicon.ico' /> <link rel='icon' href='/favicon.ico' />
<link rel='icon' href='/favicon.svg' type='image/svg+xml' /> <link rel='icon' href='/favicon.svg' type='image/svg+xml' />

2
themes/NEXT/components/FloatDarkModeButton.js
View File

@@ -1,5 +1,5 @@
import { useGlobal } from '@/lib/global' import { useGlobal } from '@/lib/global'
import { loadDarkModeFromCookies, saveDarkModeToCookies } from '@/lib/theme' import { saveDarkModeToCookies } from '@/lib/theme'
import CONFIG_NEXT from '../config_next' import CONFIG_NEXT from '../config_next'
export default function FloatDarkModeButton () { export default function FloatDarkModeButton () {