使用CSS 變數和JavaScript 自訂深色模式

為您的應用程式或網站實現深色模式對於提供無縫的用戶體驗至關重要。本機 CSS 媒體規則為瀏覽器提供了一個選項來偵測系統設定的暗模式，但使用者可能會喜歡針對尚未支援它的特定網站或瀏覽器（例如​​ Microsoft Edge）使用不同的主題。

要解決這樣，我們就可以利用 CSS 變數和 JavaScript 來管理主題設定。

使用變數和主題進行CSS 自訂

在根或預設層級定義​​CSS 變量，並指定深色主題:

:root {
    --font-color: #000;
    ...
    --bg-color: rgb(243,243,243);
}

[data-theme="dark"] {
    --font-color: #c1bfbd;
    ...
    --bg-color: #333;
}

在需要動態調整樣式的地方呼叫變數。

用於主題偵測與切換的JavaScript

在HTML 的標頭部分中，新增用於偵測使用者首選主題的JavaScript：

function detectColorScheme() {
    var theme = "light";
    ...
}
detectColorScheme();

使用JavaScript 在淺色和深色主題之間切換:

const toggleSwitch = document.querySelector('#theme-switch input[type="checkbox"]');

function switchTheme(e) {
    ...
}

toggleSwitch.addEventListener('change', switchTheme, false);

用於主題切換的HTML

為使用者控制的主題切換建立HTML 複選框:

透過這種方法，您可以自動偵測使用者的主題，允許他們覆蓋它，並提供跨瀏覽器和平台的自訂體驗。