网站增加深色模式
source link: https://www.williamlong.info/archives/6906.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
网站增加深色模式
这两天将网页CSS代码修改了一下，给网站增加了深色模式（Dark Mode），目前主流操作系统（iOS、Windows 10、macOS等）都可以支持深色模式，默认还是浅色模式。
本网站上一次改版的时候，使用的颜色系统是浅色模式，简单的说就是白底黑字，而深色模式简单的说就是黑底白字。
对于手机系统来说，深色模式比浅色模式发射更少的光，因此，深色模式可能会延长电池寿命。
在具有正常视力的人群中，浅色模式下的视觉表现往往会更好；对于一些视觉减退的人来说，深色模式的表现形式可能会更好。
网站修改的方法比较简单，先将网页颜色分类，主要分为三类，背景色、前景色、框架色，然后增加一个新的配色方案即可，深色模式配色方案我直接从微信公众号的深色模式提取出颜色，懒得自己配色了。
之后在CSS头部加入以下代码。
:root {
--background-color: #F1F1F1;
--box-color: #FFFFFF;
--text-color:#000000;
}
@media (prefers-color-scheme: dark) {
:root{
--background-color: #191919;
--box-color: #202020;
--text-color:#A3A3A3;
}
}
之后，使用CSS变量将CSS里相关颜色代码替换即可。
目前网站切换到深色模式后，文字还算正常，但是很多LOGO图片由于之前是基于浅色模式制作的，因此在深色模式下，图片边缘的颜色和背景不协调，不过，由于LOGO图片太多，全部重新修改工作量还挺大，还是以后再说吧。
关于深色模式的详细开发，可参见《手机网页自适应深色模式适配》一文。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK