1

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

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

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

4

2 回答 2

6

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

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

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

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

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

于 2020-04-28T11:45:35.870 回答
1

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

<link rel="stylesheet"
    href="css/light.css">
<link rel="stylesheet" media="(prefers-color-scheme: dark)"
    href="css/dark.css">
于 2021-12-29T07:51:29.570 回答