From 9386f9e8bc07e234a77d2d17cf08cfa54f35b1d9 Mon Sep 17 00:00:00 2001 From: LooseLi <1329307562@qq.com> Date: Tue, 3 Jun 2025 15:06:37 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=B7=B1=E8=89=B2?= =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E4=B8=8B=E9=97=AA=E7=83=81=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/_document.js | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/pages/_document.js b/pages/_document.js index f6a24e60..96c20a34 100644 --- a/pages/_document.js +++ b/pages/_document.js @@ -2,6 +2,37 @@ import BLOG from '@/blog.config' import Document, { Head, Html, Main, NextScript } from 'next/document' +// 预先设置深色模式的脚本内容 +const darkModeScript = ` +(function() { + const darkMode = localStorage.getItem('darkMode') + + const prefersDark = + window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches + + const defaultAppearance = '${BLOG.APPEARANCE || 'auto'}' + + let shouldBeDark = darkMode === 'true' || darkMode === 'dark' + + if (darkMode === null) { + if (defaultAppearance === 'dark') { + shouldBeDark = true + } else if (defaultAppearance === 'auto') { + // 检查是否在深色模式时间范围内 + const date = new Date() + const hours = date.getHours() + const darkTimeStart = ${BLOG.APPEARANCE_DARK_TIME ? BLOG.APPEARANCE_DARK_TIME[0] : 18} + const darkTimeEnd = ${BLOG.APPEARANCE_DARK_TIME ? BLOG.APPEARANCE_DARK_TIME[1] : 6} + + shouldBeDark = prefersDark || (hours >= darkTimeStart || hours < darkTimeEnd) + } + } + + // 立即设置 html 元素的类 + document.documentElement.classList.add(shouldBeDark ? 'dark' : 'light') +})() +` + class MyDocument extends Document { static async getInitialProps(ctx) { const initialProps = await Document.getInitialProps(ctx) @@ -29,6 +60,9 @@ class MyDocument extends Document { /> )} + + {/* 预先设置深色模式，避免闪烁 */} +