首先通過JavaScript獲取用戶系統(tǒng)偏好和本地存儲的主題設置，初始化頁面主題；1. HTML結構包含一個按鈕用于觸發(fā)主題切換；2. CSS使用:root定義亮色主題變量，.dark-mode類定義暗色主題變量，并通過var()應用這些變量；3. JavaScript檢測prefers-color-scheme并讀取localStorage決定初始主題；4. 點擊按鈕時切換html元素上的dark-mode類，并將當前狀態(tài)保存至localStorage；5. 所有顏色變化均帶有0.3秒過渡動畫，提升用戶體驗；最終實現(xiàn)了一個支持記憶選擇、尊重系統(tǒng)偏好且視覺平滑的暗黑模式切換功能。
實現(xiàn)一個 CSS 暗黑模式切換（Dark Mode Toggle）功能，通常結合 HTML、CSS 和少量 JavaScript。下面是一個簡潔、實用的完整示例，適合初學者或需要快速集成的項目。
? 基本思路
- 使用一個切換按鈕（toggle）控制頁面主題。
- 主題通過在
dark-mode）來切換。
- 利用 CSS 變量定義亮色和暗色主題顏色。
? HTML 結構
<!DOCTYPE html>
<html lang="zh" class="light-mode">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Dark Mode Toggle</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>歡迎來到我的網(wǎng)站</h1>
<p>點擊按鈕切換主題?</p>
<button id="theme-toggle">切換暗黑模式</button>
</header>
<main>
<section>
<h2>這是主要內(nèi)容區(qū)域</h2>
<p>背景和文字顏色會根據(jù)主題自動變化。</p>
</section>
</main>
<script src="script.js"></script>
</body>
</html>
? CSS 樣式（支持主題變量）
/* style.css */
:root {
/* 亮色主題變量 */
--bg-color: #ffffff;
--text-color: #333333;
--primary-color: #007bff;
--header-bg: #f0f0f0;
}
.dark-mode {
/* 暗色主題變量 */
--bg-color: #1a1a1a;
--text-color: #f0f0f0;
--primary-color: #00d8ff;
--header-bg: #333;
}
/* 應用變量 */
html {
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s ease, color 0.3s ease;
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
header {
background-color: var(--header-bg);
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
}
button {
background-color: var(--primary-color);
color: white;
border: none;
padding: 10px 16px;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
}
button:hover {
opacity: 0.9;
}
/* 添加一點動畫效果 */
h1, h2, p {
transition: color 0.3s ease;
}
?? JavaScript 切換邏輯
// script.js
const toggleButton = document.getElementById('theme-toggle');
const htmlElement = document.documentElement;
// 檢查用戶偏好（優(yōu)先使用系統(tǒng)設置）
const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
const currentMode = localStorage.getItem('theme') || (prefersDarkMode ? 'dark' : 'light');
// 初始化主題
if (currentMode === 'dark') {
htmlElement.classList.add('dark-mode');
}
// 切換主題函數(shù)
function toggleTheme() {
const isDark = htmlElement.classList.toggle('dark-mode');
// 保存用戶選擇
localStorage.setItem('theme', isDark ? 'dark' : 'light');
}
// 綁定點擊事件
toggleButton.addEventListener('click', toggleTheme);
? 功能亮點
- 記憶用戶選擇：使用
localStorage 保存主題偏好。 - 尊重系統(tǒng)偏好：首次訪問時根據(jù)
prefers-color-scheme 自動適配。 - 平滑過渡：CSS
transition 讓顏色變化更自然。 - 可擴展性強：通過 CSS 變量可輕松添加更多主題（如深紅、紫色等）。
? 小技巧
- 你可以把按鈕做成 Moon/Sun 圖標，提升視覺體驗。
- 使用
color-scheme: light dark; 可讓瀏覽器控件（如輸入框）也適配主題。
:root {
color-scheme: light dark;
}
基本上就這些，不復雜但很實用。你可以把這個結構集成到任何網(wǎng)頁中。
以上是CSS暗模式切換示例的詳細內(nèi)容。更多信息請關注PHP中文網(wǎng)其他相關文章！