css: 暗夜模式

深色模式是，可将网站或应用程序的颜色主题从浅色背景切换为深色背景。这种模式因其在低光环境中减少眼睛疲劳，节省OLED屏幕设备的能源而变得越来越受欢迎。

以下有两种方式实现暗夜模式的css样式表：

prefers-color-scheme

prefers-color-scheme CSS媒体功能用于检测用户是否请求了浅色或深色主题。

css

代码解读

复制代码

@media (prefers-color-scheme: dark) { .post { background: #753; color: #dcb; } } @media (prefers-color-scheme: light) { .post { background: #bcd; color: #334; } }

现在有了更好的方法。

light-dark()

light-dark（）CSS函数允许为属性设置两种颜色。通过检测开发人员是否设置了浅色或深色配色方案，来返回两种颜色选项之一。

css

代码解读

复制代码

:root { color-scheme: light dark; } body { color: light-dark(#292524, #f5f5f4); background-color: light-dark(#f5f5f4, #292524); }

浏览器兼容性如何：

原文链接：https://juejin.cn/post/7445989757626974223