深色模式是一种显示选项，可将网站或应用程序的颜色主题从浅色背景（带有深色文本）切换为深色背景（带有浅色文本）。这种模式因其在减轻弱光环境下的眼睛疲劳、节省 oled 屏幕设备的能源以及提供传统灯光主题的视觉吸引力替代方案等方面的优势而越来越受欢迎。
通常，您可以在 3 种模式之间切换：深色、浅色和系统主题设置。
老办法
到目前为止，我们已经使用了prefers-color-scheme css媒体功能：
prefers-color-scheme css 媒体功能用于检测用户是否请求浅色或深色主题。用户通过操作系统设置（例如浅色或深色模式）或用户代理设置来表明他们的偏好。
@media (prefers-color-scheme: dark) { .post { background: #753; color: #dcb; }}@media (prefers-color-scheme: light) { .post { background: #bcd; color: #334; }}
如您所见，我们需要维护 2 个主题，每种模式一个。
在大规模应用中采用这种方法可能很困难。
新的更好的方法
幸运的是，css 引入了一个新属性，让我们的生活更轻松，light-dark()，并且所有主流浏览器都支持它：
light-dark() css 函数可以为属性设置两种颜色 – 通过检测开发人员是否设置了浅色或深色配色方案或用户是否请求浅色或深色主题来返回两种颜色选项之一 -无需将主题颜色包含在首选颜色方案媒体功能查询中。
AS系统本次的主要更新和新开发的功能如下（暂不详述）： 1、修复了普及版的一些大大小小的BUG 2、重新规划整个后台，使后台更加个性化、智能化、更加易用 3、重写了广告部分模块，使其更加专业化 4、重写了文章采集模块，添加了定时自动采集功能 5、添加了供求信息采集功能 6、重写了友情连接功能（原来的太简单了） 8、重写了生成HTML模块。（几个主要模块首页不用原来的生成方式，不再会被卡巴斯机杀毒软
:root { color-scheme: light dark;}body { color: light-dark(#292524, #f5f5f4); background-color: light-dark(#f5f5f4, #292524);}
只需在我们希望在模式之间切换的每个元素上使用 light-dark() 属性，就是这样！
以上就是CSS：简单的深色模式的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1152167.html
微信扫一扫 
支付宝扫一扫 
