使用兩個 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">