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

Question

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

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

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

Answer 1

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

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

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

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

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

Answer 2

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

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