[自动深色模式] 根据 系统状态 切换黑夜白天模式

[bbb3n]

为什么提出这个新的特性改动
大部分网站都是会根据手机或者浏览器的黑暗白天模式
来切换网页的黑暗白天模式

描述一下你推荐的解决方案
可以保留固定时间切换黑夜白天的同时
添加一个选项，可以根据系统黑暗还是白天来切换网页

描述一下你考虑过的其它替代解决方案
无

补充说明
无

[tangly1024]

原本就支持的：

NotionNext/blog.config.js

Lines 12 to 13 in d1268ea

	APPEARANCE: process.env.NEXT_PUBLIC_APPEARANCE || 'light', // ['light', 'dark', 'auto'], // light 日间模式 ， dark夜间模式， auto根据时间和主题自动夜间模式
	APPEARANCE_DARK_TIME: process.env.NEXT_PUBLIC_APPEARANCE_DARK_TIME || [18, 6], // 夜间模式起至时间，false时关闭根据时间自动切换夜间模式

NotionNext/themes/theme.js

Lines 92 to 97 in d1268ea

	if (BLOG.APPEARANCE === 'auto') {
	// 系统深色模式或时间是夜间时，强行置为夜间模式
	const date = new Date()
	const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
	return prefersDarkMode || (BLOG.APPEARANCE_DARK_TIME && (date.getHours() >= BLOG.APPEARANCE_DARK_TIME[0] || date.getHours() < BLOG.APPEARANCE_DARK_TIME[1]))
	}

[bbb3n]

原本就支持的：

NotionNext/blog.config.js

Lines 12 to 13 in d1268ea

	APPEARANCE: process.env.NEXT_PUBLIC_APPEARANCE || 'light', // ['light', 'dark', 'auto'], // light 日间模式 ， dark夜间模式， auto根据时间和主题自动夜间模式
	APPEARANCE_DARK_TIME: process.env.NEXT_PUBLIC_APPEARANCE_DARK_TIME || [18, 6], // 夜间模式起至时间，false时关闭根据时间自动切换夜间模式

NotionNext/themes/theme.js

Lines 92 to 97 in d1268ea

	if (BLOG.APPEARANCE === 'auto') {
	// 系统深色模式或时间是夜间时，强行置为夜间模式
	const date = new Date()
	const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
	return prefersDarkMode || (BLOG.APPEARANCE_DARK_TIME && (date.getHours() >= BLOG.APPEARANCE_DARK_TIME[0] || date.getHours() < BLOG.APPEARANCE_DARK_TIME[1]))
	}

您的意思是APPEARANCE_DARK_TIME需要设置为false吗

[bbb3n]

原本就支持的：

NotionNext/blog.config.js

Lines 12 to 13 in d1268ea

	APPEARANCE: process.env.NEXT_PUBLIC_APPEARANCE || 'light', // ['light', 'dark', 'auto'], // light 日间模式 ， dark夜间模式， auto根据时间和主题自动夜间模式
	APPEARANCE_DARK_TIME: process.env.NEXT_PUBLIC_APPEARANCE_DARK_TIME || [18, 6], // 夜间模式起至时间，false时关闭根据时间自动切换夜间模式

NotionNext/themes/theme.js

Lines 92 to 97 in d1268ea

	if (BLOG.APPEARANCE === 'auto') {
	// 系统深色模式或时间是夜间时，强行置为夜间模式
	const date = new Date()
	const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
	return prefersDarkMode || (BLOG.APPEARANCE_DARK_TIME && (date.getHours() >= BLOG.APPEARANCE_DARK_TIME[0] || date.getHours() < BLOG.APPEARANCE_DARK_TIME[1]))
	}

测试了确实可以根据浏览器状态切换
但是还有点小问题
不知道是不是作者您预料之内的
我在手机上测试中发现
原生自带浏览器（三星浏览器）可以完美跟随系统
但是edge和Chrome不是
第一次进入网站时，网站确实会根据系统状态转为白天或者黑夜
但是如果这时我手动切换系统为相反的状态
我的三星浏览器上打开的网站可以正常切换
edge和Chrome却无法切换，无论刷新多少次网页
只有清除cookies后，刷新才行（那就和首次进一样了）

作为对照，我拿github官网测试，
所有浏览器在手机系统切换模式时，
网页均能够跟随切换

所以我个人认为可能是您的实现方式
与其他网站有区别吗？

[bbb3n]

拿了两个手机，测试了7.8个浏览器，就是edge，Chrome，firefox这三家不能随意切换，其他国产浏览器都可以😂