diff --git a/lib/global.js b/lib/global.js index a9e3cac5..55222219 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 Router from 'next/router' -import { initTheme, loadUserThemeFromCookies } from './theme' +import { initTheme, loadDarkModeFromCookies } from './theme' const GlobalContext = createContext() /** @@ -12,7 +12,7 @@ const GlobalContext = createContext() */ export function GlobalContextProvider ({ children }) { const [locale, changeLocale] = useState(generateLocaleDict('en-US')) - const [theme, changeTheme] = useState(loadUserThemeFromCookies()) + const [isDarkMode, updateDarkMode] = useState(loadDarkModeFromCookies()) const [onLoading, changeLoadingState] = useState(false) Router.events.on('routeChangeStart', (...args) => { changeLoadingState(true) @@ -24,12 +24,12 @@ export function GlobalContextProvider ({ children }) { // 服务端静态渲染，在渲染hooks后根据前端变量做初始化工作 useEffect(() => { - initTheme(theme, changeTheme) + initTheme(isDarkMode, updateDarkMode) initLocale(locale, changeLocale) }) return ( - + {children} ) diff --git a/lib/theme.js b/lib/theme.js index b1865298..9cff0061 100644 --- a/lib/theme.js +++ b/lib/theme.js @@ -3,27 +3,27 @@ import cookie from 'react-cookies' /** * 初始化主题 * @param theme 用户默认主题state - * @param changeTheme 更改主题ChangeState函数 + * @param updateDarkMode 更改主题ChangeState函数 * @description 读取cookie中存的用户主题 */ -export const initTheme = (theme, changeTheme) => { +export const initTheme = (isDarkMode, updateDarkMode) => { // 若未指定主题，则从时间和浏览器偏好中决定初始主题 - if (!theme) { + 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) { - theme = 'dark' + isDarkMode = true } else { - theme = 'light' + isDarkMode = false } } if (typeof window !== 'undefined') { const htmlElement = document.getElementsByTagName('html') htmlElement.className = '' - changeTheme(theme) - saveTheme(theme) - htmlElement.classList?.add(theme) + updateDarkMode(isDarkMode) + saveDarkModeToCookies(isDarkMode) + htmlElement.classList?.add(isDarkMode) } } @@ -31,7 +31,7 @@ export const initTheme = (theme, changeTheme) => { * 读取默认主题 * @returns {*} */ -export const loadUserThemeFromCookies = () => { +export const loadDarkModeFromCookies = () => { return cookie.load('theme') } @@ -39,6 +39,6 @@ export const loadUserThemeFromCookies = () => { * 保存默认主题 * @param newTheme */ -export const saveTheme = (newTheme) => { +export const saveDarkModeToCookies = (newTheme) => { cookie.save('theme', newTheme, { path: '/' }) } diff --git a/themes/Hexo/components/Header.js b/themes/Hexo/components/Header.js index f177ee0d..25c06f1c 100644 --- a/themes/Hexo/components/Header.js +++ b/themes/Hexo/components/Header.js @@ -14,7 +14,7 @@ let autoScroll = false */ export default function Header () { const [typed, changeType] = useState() - const { theme } = useGlobal() + const { isDarkMode } = useGlobal() useEffect(() => { scrollTrigger() @@ -76,7 +76,7 @@ export default function Header () { } const updateTopNav = () => { - if (theme !== 'dark') { + if (!isDarkMode) { const stickyNavElement = document.getElementById('sticky-nav') if (window.scrollY < window.innerHeight) { stickyNavElement?.classList?.add('dark') diff --git a/themes/NEXT/components/DarkModeButton.js b/themes/NEXT/components/DarkModeButton.js index f70b1428..8205cca7 100644 --- a/themes/NEXT/components/DarkModeButton.js +++ b/themes/NEXT/components/DarkModeButton.js @@ -1,18 +1,18 @@ import { useGlobal } from '@/lib/global' -import { loadUserThemeFromCookies, saveTheme } from '@/lib/theme' +import { loadDarkModeFromCookies, saveDarkModeToCookies } from '@/lib/theme' const DarkModeButton = () => { - const { changeTheme } = useGlobal() - const userTheme = loadUserThemeFromCookies() + const { updateDarkMode } = useGlobal() + const isDarkMode = loadDarkModeFromCookies() // 用户手动设置主题 const handleChangeDarkMode = () => { - const newTheme = (userTheme === 'light' ? 'dark' : 'light') - saveTheme(newTheme) - changeTheme(newTheme) + const newTheme = (isDarkMode ? 'dark' : 'light') + saveDarkModeToCookies(newTheme) + updateDarkMode(newTheme) } return
-
} diff --git a/themes/NEXT/components/FloatDarkModeButton.js b/themes/NEXT/components/FloatDarkModeButton.js index 2e610a2f..2a7b5865 100644 --- a/themes/NEXT/components/FloatDarkModeButton.js +++ b/themes/NEXT/components/FloatDarkModeButton.js @@ -1,5 +1,5 @@ import { useGlobal } from '@/lib/global' -import { loadUserThemeFromCookies, saveTheme } from '@/lib/theme' +import { loadDarkModeFromCookies, saveDarkModeToCookies } from '@/lib/theme' import CONFIG_NEXT from '../config_next' export default function FloatDarkModeButton () { @@ -7,16 +7,15 @@ export default function FloatDarkModeButton () { return <> } - const { changeTheme } = useGlobal() - const userTheme = loadUserThemeFromCookies() + const { isDarkMode, updateDarkMode } = useGlobal() // 用户手动设置主题 const handleChangeDarkMode = () => { - const newTheme = userTheme === 'light' ? 'dark' : 'light' - saveTheme(newTheme) - changeTheme(newTheme) + const newStatus = !isDarkMode + saveDarkModeToCookies(newStatus) + updateDarkMode(newStatus) const htmlElement = document.getElementsByTagName('html')[0] - htmlElement.classList?.remove(userTheme) - htmlElement.classList?.add(newTheme) + htmlElement.classList?.remove(newStatus ? 'light' : 'dark') + htmlElement.classList?.add(newStatus ? 'dark' : 'light') } return ( @@ -27,7 +26,7 @@ export default function FloatDarkModeButton () { > ) diff --git a/themes/NEXT/components/Header.js b/themes/NEXT/components/Header.js index 4f04f58f..363dc6c1 100644 --- a/themes/NEXT/components/Header.js +++ b/themes/NEXT/components/Header.js @@ -27,7 +27,7 @@ export default function Header () { ) } }) - const { theme } = useGlobal() + const { isDarkMode } = useGlobal() const autoScrollEnd = () => { if (autoScroll) { @@ -61,7 +61,7 @@ export default function Header () { } const updateTopNav = () => { - if (theme !== 'dark') { + if (!isDarkMode) { const stickyNavElement = document.getElementById('sticky-nav') if (window.scrollY < window.innerHeight) { stickyNavElement.classList.add('dark')