javascript - 使用两个 CSS 文件的深色/浅色模式

Question

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

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

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

Answer 1

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

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

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

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

(为了旧版浏览器，最好只让其中一个文件具有媒体查询，然后再包含该文件)