為網站添加深色模式的最簡單方法-js教程-PHP中文網

為網站添加深色模式的最簡單方法

WBOY

發布： 2024-07-29 04:46:23

原創

482 人瀏覽過

The Easiest Way to Add Dark Mode to Your Website

近年來，以深色模式使用網站和應用程式的能力越來越受歡迎。它可以緩解眼睛疲勞，延長 OLED 螢幕設備的電池壽命，並為傳統的燈光主題提供美觀的替代品。本教學將向您展示如何使用 JavaScript 切換主題和 CSS 變量，以在您的網站上新增暗模式。

第 1 步：設定 HTML

首先，讓我們從基本的 HTML 結構開始。建立一個包含以下內容的 index.html 檔案：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dark Mode Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Welcome to Dark Mode Tutorial</h1>
        <button id="theme-toggle">Toggle Dark Mode</button>
    </header>
    <main>
        <p>This is a sample website to demonstrate dark mode implementation.</p>
    </main>
    <script src="script.js"></script>
</body>
</html>

登入後複製

此 HTML 檔案包含一個帶有標題的標頭和一個用於切換暗模式的按鈕、一個包含一些文字的主要內容區域以及指向我們的 CSS 和 JavaScript 檔案的連結。

第 2 步：定義 CSS 變數

現在讓我們在 CSS 中定義變數。製作一個包含以下內容的 styles.css 檔案：

:root {
    --background-color: #ffffff;
    --text-color: #000000;
    --header-background-color: #f1f1f1;
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
    font-family: Arial, sans-serif;
    transition: background-color 0.3s, color 0.3s;
}

header {
    background-color: var(--header-background-color);
    padding: 20px;
    text-align: center;
}

button {
    padding: 10px 20px;
    margin-top: 20px;
    cursor: pointer;
}

.dark-mode {
    --background-color: #181818;
    --text-color: #ffffff;
    --header-background-color: #242424;
}

登入後複製

我們使用 :root 在此 CSS 檔案中定義一組 CSS 變數。對於淺色模式，這些變數決定背景顏色、文字顏色和標題背景顏色。此外，還定義了 .dark-mode 類，其設定優先於這些變數。 body 元素的過渡屬性保證了主題之間的無縫過渡。

第 3 步：新增用於主題切換的 JavaScript

現在，讓我們加入 JavaScript 來處理主題切換。建立一個包含以下內容的 script.js 檔案：

const themeToggle = document.getElementById('theme-toggle');
const body = document.body;

// Check for saved user preference
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
    body.classList.add(savedTheme);
}

// Toggle dark mode
themeToggle.addEventListener('click', () => {
    body.classList.toggle('dark-mode');

    // Save user preference
    if (body.classList.contains('dark-mode')) {
        localStorage.setItem('theme', 'dark-mode');
    } else {
        localStorage.removeItem('theme');
    }
});

登入後複製

此腳本選擇主題切換按鈕和主體元素。當按鈕按一下時，它會切換主體上的 深色模式 類別。該腳本還將使用者的主題首選項保存在 localStorage 中，因此主題在頁面重新載入時仍然存在。