介紹

深色模式是一種使用深色背景和淺色文字和元素的顯示設定。它之所以受歡迎，是因為它看起來不錯並且提供了一些實際好處。

深色模式的好處包括：

1. 減少眼睛疲勞：深色模式可以減少眼睛發出的強光，因此更適合眼睛，尤其是在弱光環境中。
2. 延長OLED 螢幕的電池壽命： 在OLED（有機發光二極管）螢幕上，深色模式可以節省電池壽命，因為黑色像素基本上被關閉，與顯示明亮的顏色相比，消耗的電量更少。

在本教學中，我們將介紹如何使用 CSS 和 JavaScript 將網站切換到深色模式。我們將從一個簡單的淺色主題網頁模板開始，將其改造成一個可切換淺色/深色模式的網站，讓用戶可以在淺色和深色主題之間順利切換。

設定項目

讓我們從一個簡單的淺色主題網頁範本開始。然後，我們將其改造成一個可切換明暗模式的網站，讓使用者在明暗主題之間切換。

實現深色模式樣式

選擇顏色

第一步是列出我們正在使用的所有顏色，並為每種顏色選擇深色主題版本。在下表中，我列出了頁面上的所有顏色及其對應的深色版本。

自訂變數

然後我們使用 CSS 變數在 body 上使用這些變數來建立一個深色和淺色類別。

body.dark {
    --body-bg: #121212;
    --primary-text: #e0e0e0;
    --header-footer-bg: #1f1f1f;
    --header-footer-text: #ffffff;
    --section-bg: #1f1f1f;
    --secondary-text: #1e90ff;
    --shadow: rgba(0, 0, 0, 0.2);
}

body.light {
    --body-bg: #f4f4f4;
    --primary-text: #333333;
    --header-footer-bg: #333333;
    --header-footer-text: #ffffff;
    --section-bg: #ffffff;
    --secondary-text: #006baf;
    --shadow: rgba(0, 0, 0, 0.1);
}

您可以在使用 CSS 自訂屬性中閱讀有關 CSS 變數的內容。本質上，它們是使用兩個破折號 (--) 定義的實體，用於儲存值以便在文件中重複使用。 CSS 變數允許自動更新更改，從而使維護變得更加容易。

動態元素顏色

我們使用 var() CSS 函數插入 CSS 變數的值。這樣，我們就可以動態更改顏色並更新一個變數以反映整個文件的更改，而不是手動更改每個變數。

這是 nav 元素及其子元素的例子：

body {
  background-color: var(--body-bg);
  color: var(--primary-text);
}

header, footer {
  background-color: var(--header-footer-bg);
  color: var(--header-footer-text);
}

article {
  background-color: var(--section-bg);
  box-shadow: 0 4px 8px var(--shadow);
}

a {
  color: var(--secondary-text);
}

使用 JavaScript 切換亮/暗模式

現在我們可以將主體的類別改為深色或淺色來切換主體。首先，在標題中新增一個按鈕，並為其點擊事件設定changeTheme()函數：

定義切換主體類別的changeTheme()函數：

function changeTheme() {
    if (document.body.classList.contains('light')) {
        document.body.classList.remove('light');
        document.body.classList.add('dark');
    } else {
        document.body.classList.remove('dark');
        document.body.classList.add('light');
    }
}

現在使用者可以透過點擊按鈕來更改網站的主題。

下面的CodePen中可以看到教學的程式碼

下一步

此外，您可以將使用者的主題偏好儲存在本機儲存中。更新 changeTheme() 函數以保存選定的主題並在頁面加載時檢查它，這將確保用戶的選擇被記住並在下次訪問時自動套用。

function changeTheme() {
    if (document.body.classList.contains('light')) {
        document.body.classList.remove('light');
        document.body.classList.add('dark');
    } else {
        document.body.classList.remove('dark');
        document.body.classList.add('light');
    }

    // Save the current theme in localStorage
    const theme = document.body.classList.contains('dark') ? 'dark' : 'light';
    localStorage.setItem('theme', theme);
}

document.addEventListener('DOMContentLoaded', function () {
    // Get the saved theme from localStorage when the page loads
    const savedTheme = localStorage.getItem('theme') || 'light';
    document.body.classList.add(savedTheme);
});

添加配色方案：深色；深色主題中的屬性還可以確保某些難以設定樣式的元素的樣式將被瀏覽器更改。

body.dark {
  color-scheme: dark;
}

結論

總而言之，在您的網站中添加深色模式可以透過減少眼睛疲勞並延長 OLED 螢幕的電池壽命來改善用戶體驗。遵循本指南，您可以使用 CSS 和 JavaScript 輕鬆設定亮/暗模式切換。自訂深色模式以適合您的設計。

分享您的實現或在下面的評論中提出問題。