使用两个 CSS 文件的暗/亮模式答案

【问题标题】：Dark/Light mode using two CSS files使用两个 CSS 文件的暗/亮模式
【发布时间】：2020-04-28 11:42:48
【问题描述】：

我正在使用允许创建主题的网络软件。它为每个主题创建一个 CSS 文件，所以我有两个 CSS 文件：dark.css 和 light.css。

使用这两个 CSS 文件创建暗/亮模式开关（独立于访问者的系统设置）的最佳方法是什么？我尝试过在点击时加载相反的主题，但这非常不切实际，并且至少需要再往返一次。

我可以将 CSS 文件内容嵌入到 DOM 中，如果这有助于实现平滑切换。

【问题讨论】：

一次加载两个文件无关紧要，除非您有 1990 年代的互联网速度。加载和卸载正确的 CSS 文件会产生比它解决的问题更多的问题。替代解决方案：向正文添加一个类，例如 CSS 使用的 light 和 dark。然后你可以切换 body 类使其独立于prefers-color-scheme。

【解决方案1】：

如果您想将 CSS 文件分开，您可以使用：

<link rel="stylesheet"
    href="css/light.css">
<link rel="stylesheet" media="(prefers-color-scheme: dark)"
    href="css/dark.css">

【讨论】：

【解决方案2】：

我能想到的最简单的解决方案是只包含两个文件并使用媒体查询：

@media (prefers-color-scheme: light) {
    /* CSS here */
}

@media (prefers-color-scheme: dark) {
    /* CSS here */
}

然后浏览器将使用用户的系统配色方案来确定使用哪一组 CSS。

（对于旧版浏览器，最好只让其中一个文件具有媒体查询，然后包含该文件）

【讨论】：

好吧，谢谢你。但是，我正在寻找一种独立于系统设置的解决方案。访问者应该能够在这两种方案之间切换，而无需更改任何系统设置。所以我正在寻找一个“正常”的暗/亮模式开关，难以处理两个单独的 CSS 文件（我可以将其嵌入到网站中以便于访问）。