网站开启深色模式

发布于 2020-04-29  161 次阅读


提醒:本文已经超过 389 天未修改,其中某些信息可能已经过时,请谨慎使用!
你似乎正在查看一篇很久远的文章。
为了你这样的访客,我特地保留了我的历史博文。不要笑话过去的我,用温柔的目光看下去吧。

深色模式是在通过大量的“人因研究”后,对文字前景与深色背景对比度以及文字和系统图标的颜色进行优化处理,确保人眼观看感受一致、舒适和易读的一种模式。

深色模式”采用了最优的文字前景与深色背景对比度,对文字和系统图标的颜色做了优化处理,确保人眼观看感受的一致性、舒适性和阅读的易读性。 [1]深色模式采用文字前景与深色背景的对比度。同样的色彩,在浅色背景和深色背景上人眼视觉感知的亮度与饱和度是不同的。从普通模式变为深色模式,同时对文字与系统图标的颜色做了优化处理,来保证深色模式和普通模式视觉感受的一致性、舒适性和阅读的易读性。

由苹果带头,MIUI EMUI等都支持了深色模式,各大APP也陆续支持了深色模式

# 示例代码

@media (prefers-color-scheme: dark/*把dark改成light即判断是否为亮色模式*/) { 
    //CSS 适配代码
}

简单的给网站适配深色模式:

@media (prefers-color-scheme: dark) {
   html{-webkit-filter: brightness(0.9);/*降低亮度为0.9*/
        filter: brightness(0.9);}
        body{
    background-image: url(https://cdn.jsdelivr.net/gh/moezx/[email protected]/other-sites/api-index/images/me.png);}/*添加宇宙背景,或其他深色夜景照片等*/
}

扩展阅读:《如何设计一个深色模式页面》

版权声明:转载时请以超链接形式标明文章原始出处和作者信息,来源孤影墨香
本文链接: https://www.gymxbl.com/2576.html
访问时间:2021-08-06 11:18:45


努力学习ing