本文由德广发表于码道-科技博客微信支持深色模式，体验如何？微信周日支持深色模式，也就是我们一直在说的深色模式。深色模式并不是简单地改成黑色主题。在深色模式下，默认聊天背景为深灰色(#181818)。自定义聊天背景，微信也会调暗背景亮度。同时对聊天气泡和文字的饱和度和亮度进行了调整。这种处理比纯黑背景+纯白文字的对比度要低。减少了用户的视觉疲劳，在保证文字可读性的同时相对更加舒适。操作系统/浏览器对深色模式的支持从Windows101809版本开始，深色模式在微软自家软件中全面推广。自Apple在2018年发布Mojave以来，它引入了深色模式。去年IOS13和Android10也支持了这个功能。名称略有不同。苹果称其为深色模式，安卓称其为深色模式（DarkMode）。同时，Safari、Chrome等浏览器也适配了系统中的深色模式。在某些设备屏幕（AMOLED）下，纯黑色背景也能带来更长的续航时间。如何改造网站支持深色模式？最简单的，我们使用媒体查询prefers-color-scheme，它检测用户的系统主题是浅色还是深色。该属性共有三个值：no-preference：用户没有指定系统主题light：浅色主题dark：深色主题当用户在系统主题中选择深色模式或夜间模式时，如下样式代码将生效：@media(prefers-color-scheme:dark){body{background-color:black;颜色：#ccc；}}prefers-color-scheme兼容较新版本的主流浏览器，这里也支持JavaScript获取当前浏览器浏览器对prefers-color-scheme的支持：if(window.matchMedia('(prefers-color-scheme)').media==='notall'){console.log('Browserdoesn'tsupportdarkmode');}当然，这里采用了最粗暴的方法，将背景颜色改为黑色，将文字颜色为灰色。在实际业务场景中，应结合站点内容和对比，达到软展示效果。此外，网站“一键式”改造也有现成的解决方案：Darkmode.Js推荐阅读：做一个极致舒适的“深色模式”有多难？如何以黑白哀悼类似于黑暗模式。当一些灾难引起举国哀悼和人们的痛苦时，很多网站都会将整个站点灰化以表示哀悼。如何产生这种灰色调效果？这里为根元素设置filter:grayscale(100%)，可以快速将网站转为灰度模式。filterCSS属性将模糊或颜色偏移等图形效果应用于元素，通常用于调整图像、背景和边框的渲染。这里使用灰度函数，将图像等元素转换为灰度。延伸阅读iOS13也将加入深色模式，“全黑”时代要来了吗？做一个让人极致舒适的“深色模式”有多难？MDN首选配色方案MDN过滤器
