首頁 >web前端 >css教學 >建立 CSS 暗/亮模式切換器

建立 CSS 暗/亮模式切換器

WBOY原創: 2024-07-16 13:28:17553瀏覽

Creating a CSS Dark/Light Mode Switcher

深色和淺色模式切換器變得越來越流行，為使用者提供了靈活選擇自己喜歡的視覺體驗的功能。無論是為了減輕眼睛疲勞、節省電池壽命，還是只是遵循個人喜好，實現暗/亮模式切換器都可以顯著增強用戶體驗。在本文中，我們將指導您使用 HTML、CSS 和 JavaScript 建立一個簡單而有效的暗/亮模式切換器。

為什麼要實施暗/亮模式？

1。使用者偏好： 有些使用者為了美觀或減少眼睛疲勞而偏好深色模式，尤其是在低光源環境下。

2。輔助功能： 透過提供可以幫助視障使用者的主題來提升輔助功能。

3。省電：在 OLED 螢幕上，深色模式可以節省電池壽命。

設定 HTML 結構

先建立一個簡單的 HTML 結構。我們需要一個按鈕來在深色和淺色模式之間切換。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dark/Light Mode Switcher</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Dark/Light Mode Switcher</h1>
        <button id="modeSwitcher">Switch to Dark Mode</button>
        <p>Toggle the button to switch between dark and light modes.</p>
    </div>
    <script src="script.js"></script>
</body>
</html>

使用 CSS 設計樣式

接下來，我們將為深色和淺色模式定義樣式。我們將使用 CSS 變數來更輕鬆地切換主題。

/* styles.css */
:root {
    --bg-color: #ffffff;
    --text-color: #000000;
    --button-bg-color: #000000;
    --button-text-color: #ffffff;
}

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

.container {
    text-align: center;
    margin-top: 50px;
}

button {
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

button:hover {
    opacity: 0.8;
}

body.dark-mode {
    --bg-color: #333333;
    --text-color: #ffffff;
    --button-bg-color: #ffffff;
    --button-text-color: #000000;
}

新增 JavaScript 功能

現在，我們將新增 JavaScript 來處理主題切換。我們還將在 localStorage 中保存使用者的首選項，以便他們的選擇在整個會話中保持不變。

// script.js
document.addEventListener('DOMContentLoaded', () => {
    const switcher = document.getElementById('modeSwitcher');
    const currentMode = localStorage.getItem('theme') || 'light';

    if (currentMode === 'dark') {
        document.body.classList.add('dark-mode');
        switcher.textContent = 'Switch to Light Mode';
    }

    switcher.addEventListener('click', () => {
        document.body.classList.toggle('dark-mode');
        const mode = document.body.classList.contains('dark-mode') ? 'dark' : 'light';
        switcher.textContent = mode === 'dark' ? 'Switch to Light Mode' : 'Switch to Dark Mode';
        localStorage.setItem('theme', mode);
    });
});

解釋

1。 CSS 變數： 我們使用 CSS 變數來定義兩種模式的顏色，以便在它們之間輕鬆切換。

2。 JavaScript: 我們為按鈕新增一個事件偵聽器，以切換 body 元素上的暗模式類別。我們也根據目前模式更新按鈕文字並將模式保存在 localStorage 中。

3。持久主題： 當頁面載入時，我們檢查 localStorage 以了解使用者的偏好並套用適當的主題。

結論

實現暗/亮模式切換器透過提供滿足不同偏好和條件的視覺選項來增強使用者體驗。只需幾行 HTML、CSS 和 JavaScript，您就可以將這項有價值的功能新增到您的 Web 專案中。

隨意嘗試更高級的功能，例如平滑過渡或附加主題。可能性是無限的，您的用戶將會欣賞增加的靈活性。

編碼愉快！

以上是建立 CSS 暗/亮模式切換器的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript css html define switch for using class Event this

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：使用 CSS 變數優化網頁設計下一篇：使用 CSS 變數優化網頁設計

看更多