Auto dark mode

2022-11-28 20:27:10 +08:00
 kidlj

V2EX 已经有了手动 dark mode 开关,可不可以加上自动跟随操作系统 dark mode 设定的功能呢?

只需要简单的设定一下 CSS 查询:

@media (prefers-color-scheme: light) {
	body {
		background-color: #f5f5f5;
		color: #222;
	}
}

@media (prefers-color-scheme: dark) {
	body {
		background-color: #222;
		color: #fff;
	}
}

参考: https://www.section.io/engineering-education/watch-for-system-dark-mode-using-js-css/

941 次点击
所在节点    反馈
2 条回复
kidlj
2022-11-28 20:50:33 +08:00
重新考虑了下,自动和手动开启好像有冲突。在已经有了手动开关的情况下,不太好设计,这可能不是一个好的选项。
kidlj
2022-11-29 11:03:59 +08:00
或者可以做成三段式的:(Auto | Light | Dark),像 Apple 文档页面那样。

https://developer.apple.com/documentation/bundleresources/information_property_list/uiuserinterfacestyle

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/898614

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX