最近我要在我的个人网站上添加自动检测明暗模式。此解决方案不使用JavaScript。相反，它通过CSS媒体查询检测用户的系统设置，并使用两个自定义CSS属性来确定基本配色方案。定义2个自定义CSS属性CSS自定义属性也称为CSS变量或级联变量。您可以在CSS文件中的任何位置定义CSS自定义属性，并且它们遵循与其他CSS规则相同的级联和特定模式。例如，您可以在文档根目录中定义CSS变量，并在更具体的CSS类中覆盖它们。您还可以检查和调试在浏览器的开发工具中声明的CSS变量，这些变量出现在样式表规则下方。CSS自定义属性由以两个破折号(--)为前缀的单词声明组成，可使用var()函数访问。:root{--my-color-variable:#000000;}.element{color:var(--my-color-variable);}您还可以将第二个参数传递给var()函数，当您尝试使用自定义属性时，如果自定义属性不存在，它充当回退值。.element{color:var(--my-new-color,#ff0000);}对于这个亮/暗模式解决方案，在document.root中定义两个颜色变量-一个用于前景色，一个用于背景色.我倾向于默认选择深色模式，因此我将背景颜色设置为黑色(--color-bg)，将前景色设置为白色(--color-fg)。:root{--color-bg:#000000;--color-fg:#ffffff;}媒体查询：preferences-color-scheme接下来，我们将使用preferences-color-schemeCSS媒体查询挂钩系统设置。当检测到浅色主题设置时，下面的代码将--color-bg设置为白色，将--color-fg设置为黑色。@media(prefers-color-scheme:light){:root{--color-bg:#ffffff;--color-fg:#000000;}}添加body样式最后，使用CSS自定义属性设置HTMLbody元素的背景颜色（页面颜色）和文字颜色，如果不重写，所有子元素都会继承。body{背景色：var(--color-bg);color:var(--color-fg);}现在，您已经实现了明暗模式支持。写个例子自己试试~完整代码：root{--color-bg:#000000;--color-fg:#ffffff;}@media(prefers-color-scheme:light){:root{--color-bg:#ffffff;--color-fg:#000000;}}body{背景色：var(--color-bg);颜色：var(--color-fg);}
