我有：
body { background: white; }
为了显示暗模式，我使用.dark类：
.dark body { background: black; }
为了检测用户是否将其操作系统设置为使用深色主题，我们有首选配色方案：
@media (prefers-color-scheme: dark) {
body { background: black; }
}
然后我们有了DRY(不要重复自己)编程的想法。我们是否可以在不重复 CSS 属性声明的情况下定义暗模式，并在此过程中允许用户通过 JS 在颜色模式之间切换？
在上面的示例中，.dark类和媒体查询是彼此的副本。
到目前为止我做了什么
跳过 CSS 中的prefers-color-scheme并使用：
body { background: white; }
.dark body { background: black; }
然后通过JS，检测其设置并调整
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.getElementsByTagName('html')[0].classList.add('dark');
}
这种方法的问题在于它不使用 CSS 中的prefers-color-scheme。
虽然我可以补充：
@media (prefers-color-scheme: dark) {
body { background: black; }
}
它不会让我通过 JS切换配色方案，因为我无法为操作系统首选项中设置深色的用户取消prefers-color-scheme: dark。
2022 年解决这个问题的方法是什么？
让我们分析一下。
我们绝对不能只将深色模式样式放在媒体查询中，因为无法通过现场选择来应用它。所以我们希望样式位于某个类(dark)下，没有媒体查询(以便可以通过JS切换类)，但是即使没有该类，媒体查询也应该以某种方式拉取相同的样式，并且不重复样式。如果用户选择，我们可能还希望light类重写媒体查询。
这里完美的解决方案是废弃的规则@apply，它可以允许在单个变量下重用一堆样式。但这被放弃了。
重用一堆样式的标准建议是在CSS预处理器上使用mixins(因此它不会在项目的源代码上重复，而是在编译的CSS上重复)。如果所有属性都应用于<body>元素或一些元素，那么我相信这就是要走的路。但是，您要求没有预处理器的解决方案。
另一种方法是在JS而不是CSS本身中使用媒体查询，并相应地切换类。此方法甚至可以处理应用于许多元素的属性的复杂主题，但在JS生效之前，它可能具有"无样式内容的Flash"。无论如何，您已经提出了这个问题，并要求将媒体查询保留在CSS本身中的解决方案。
您还要求不要使用重复的 CSS 变量。现在，我不确定在不重复任何内容的情况下是否可能，但是我们可以将重复减少到两个"切换"变量，而不管受影响的属性数量如何。
var root = document.documentElement,
theme = window.getComputedStyle(root)
.getPropertyValue('--light') === ' ' ? 'dark' : 'light';
document.getElementById('toggle-theme')
.addEventListener('click', toggleTheme);
function toggleTheme() {
root.classList.remove(theme);
theme = (theme === 'dark') ? 'light' : 'dark';
root.classList.add(theme);
}/*
"initial"ized variables are like undefined variables and will resolve to
their fallback value.
Whitespaced variables (the space is required) will serve as an empty value
in chaining.
*/
@media (prefers-color-scheme: dark) {
:root {
--light: ;
--dark: initial;
}
}
@media (prefers-color-scheme: light) {
:root {
--dark: ;
--light: initial;
}
}
:root.dark {
--light: ;
--dark: initial;
}
:root.light {
--dark: ;
--light: initial;
}
#content {
background-color: var(--dark, darkblue) var(--light, lightblue);
color: var(--dark, white) var(--light, black);
border: 5px solid var(--dark, blue) var(--light, yellow);
}<div id="content">
Hello, world!
<button id="toggle-theme">Toggle theme</button>
</div>最后，我可以想到另一种可能的黑客，尽管我真的不喜欢它。这个想法是添加两个<div>，唯一的目的是根据首选/选定的主题将样式继承到另一个。
var root = document.documentElement,
theme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
document.getElementById('toggle-theme')
.addEventListener('click', toggleTheme);
function toggleTheme() {
root.classList.remove(theme);
theme = (theme === 'dark') ? 'light' : 'dark';
root.classList.add(theme);
}.dark-styles {
background: darkblue;
color: white;
border-color: blue;
}
.light-styles {
background: lightblue;
color: black;
border-color: yellow;
}
:root.dark .light-styles {
all: inherit;
}
@media (prefers-color-scheme:dark) {
:root:not(.light) .light-styles {
all: inherit;
}
}
#content {
border: 5px solid;
border-color: inherit;
}<div class="dark-styles">
<div class="light-styles">
<div id="content">
Hello, world!
<button id="toggle-theme">Toggle theme</button>
</div>
</div>
</div>下面是使用CSS变量，prefers-color-scheme媒体查询和单选按钮的简单解决方案。在这里，该页面检测操作系统深色/浅色主题，并允许用户通过单击没有JavaScript的单选按钮来更改主题。如果您确实需要 JavaScript，也可以在这些单选按钮上触发单击事件。
/* Defines theme variables */
:root {
--theme-light-color: #222222;
--theme-light-background: #FFFFFF;
--theme-dark-color: #DDDDDD;
--theme-dark-background: #222222;
}
/* Defines body content styles */
body {
margin: 0;
}
body>main {
min-height: 100vh;
color: var(--theme-main-color);
background: var(--theme-main-background);
}
label[for="theme-light"] {
color: var(--theme-light-color);
background: var(--theme-light-background);
cursor: pointer;
}
label[for="theme-dark"] {
color: var(--theme-dark-color);
background: var(--theme-dark-background);
cursor: pointer;
}
/* IF theme = light THEN */
#theme-light:checked~main {
--theme-main-color: var(--theme-light-color);
--theme-main-background: var(--theme-light-background);
}
@media (prefers-color-scheme: light){
:root {
--theme-main-color: var(--theme-light-color);
--theme-main-background: var(--theme-light-background);
}
}
/* IF theme = dark THEN */
#theme-dark:checked~main {
--theme-main-color: var(--theme-dark-color);
--theme-main-background: var(--theme-dark-background);
}
@media (prefers-color-scheme: dark){
:root {
--theme-main-color: var(--theme-dark-color);
--theme-main-background: var(--theme-dark-background);
}
}<!DOCTYPE html>
<html lang="en">
<body>
<!-- THEME SWITCH -->
<input type="radio" id="theme-light" name="theme" hidden>
<input type="radio" id="theme-dark" name="theme" hidden>
<!-- BODY CONTENT -->
<main>
<label for="theme-light">Light</label>
<label for="theme-dark">Dark</label>
<p>Hello World!</p>
</main>
</body>
</html>通过使用 JS，您可以保留 CSS 媒体查询的优势，而无需在 CSS 本身中实际使用它。
例如，从代码中获取.dark类，可以使用MediaQueryList对象：
const darkMode = window.matchMedia("(prefers-color-scheme: dark)");
并为文档的类列表设置一个切换开关：
// Initial setting
document.documentElement.classList.toggle("dark", darkMode.matches);
// Listener to changes
darkMode.addListener((event) =>
document.documentElement.classList.toggle("dark", event.matches));
这样，您可以在 CSS 文件中专注于定义.dark类下的类，而无需使用媒体查询定义它两次。此外，以这种方式执行此操作，您可以为用户设置设置，如果需要，这些设置将覆盖默认的操作系统首选项(例如将其保存在localStore中等......
如果你想用css来做到这一点，你可以尝试以下方法
:root {
--body-background-color: white;
}
@media (prefers-color-scheme: dark) {
:root {
--body-background-color: black;
}
}
body {
background-color: var(--body-background-color);
}
您可以通过反转逻辑来实现这一点。
body { background: black; }
@media (prefers-color-scheme: light) {
:root:not(.dark) body { background: white; }
}