如何使用 CSS 變數和 JavaScript 為我的網站建立可自訂的暗模式？

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

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

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

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

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

<code class="css">:root {
    --font-color: #000;
    ...
    --bg-color: rgb(243,243,243);
}

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

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

用於主題偵測和切換的JavaScript

在標題中HTML 部分，加入JavaScript 來偵測使用者的首選主題：

<code class="javascript">function detectColorScheme() {
    var theme = "light";
    ...
}
detectColorScheme();</code>

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

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

function switchTheme(e) {
    ...
}

toggleSwitch.addEventListener('change', switchTheme, false);</code>

用於主題切換的HTML

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

<code class="html"><label id="theme-switch" class="theme-switch" for="checkbox_theme">
    <input type="checkbox" id="checkbox_theme">
</label></code>

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

以上是如何使用 CSS 變數和 JavaScript 為我的網站建立可自訂的暗模式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！