@media在我爱模板网的印象中，好像最多的是屏幕宽度高度查询来做响应式，如下：
@media(max-width: 756px) {
margin: 0
}实际上，它还能查询系统使用的是深色模式还是浅色模式，即prefers-color-scheme，css 媒体特性，用于检测用户是否有将系统的主题色设置为亮色或者暗色。
在过去，必须手动切换主题色，写两套css，然后通过js来切换。那如果要让网站跟着系统的颜色模式进行自动切换，就不好做了。还好css3提供了prefers-color-scheme，它有三个值：
// 浅色模式
@media (prefers-color-scheme: light) {
...
}
// 深色模式
@media (prefers-color-scheme: dark) {
...
}
// 不查询模式
@media (prefers-color-scheme: no-preference) {
...
}除了第三种没什么用，上面两种就非常实用了，在浅色模式写浅色样式，在深色模式下写深色样式，在这两种模式之外写其他不随着系统模式变化而变化的样式，就能实现自动切换了。
案例：
@media (prefers-color-scheme: light) {
:root {
--background-color: white;
--font-color: black;
--border-color: #767575;
}
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: black;
--font-color: white;
--border-color: #eee;
}
}
body {
background-color: var(--background-color);
color: var(--font-color);
}
.title {
border: 1px solid var(--border-color);
}