网站开启深色模式

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


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

深色模式”采用了最优的文字前景与深色背景对比度,对文字和系统图标的颜色做了优化处理,确保人眼观看感受的一致性、舒适性和阅读的易读性。 [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/cdn@3.1.2/other-sites/api-index/images/me.png);}/*添加宇宙背景,或其他深色夜景照片等*/
}

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


努力学习ing