首先通過JavaScript獲取用戶系統(tǒng)偏好和本地存儲(chǔ)的主題設(shè)置，初始化頁(yè)面主題；1. HTML結(jié)構(gòu)包含一個(gè)按鈕用於觸發(fā)主題切換；2. CSS使用:root定義亮色主題變量，.dark-mode類定義暗色主題變量，並通過var()應(yīng)用這些變量；3. JavaScript檢測(cè)prefers-color-scheme並讀取localStorage決定初始主題；4. 點(diǎn)擊按鈕時(shí)切換html元素上的dark-mode類，並將當(dāng)前狀態(tài)保存至localStorage；5. 所有顏色變化均帶有0.3秒過渡動(dòng)畫，提升用戶體驗(yàn)；最終實(shí)現(xiàn)了一個(gè)支持記憶選擇、尊重系統(tǒng)偏好且視覺平滑的暗黑模式切換功能。
實(shí)現(xiàn)一個(gè)CSS 暗黑模式切換（Dark Mode Toggle）功能，通常結(jié)合HTML、CSS 和少量JavaScript。下面是一個(gè)簡(jiǎn)潔、實(shí)用的完整示例，適合初學(xué)者或需要快速集成的項(xiàng)目。
? 基本思路
- 使用一個(gè)切換按鈕（toggle）控制頁(yè)面主題。
- 主題通過在
dark-mode ）來切換。
- 利用CSS 變量定義亮色和暗色主題顏色。
? HTML 結(jié)構(gòu)
<!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>點(diǎn)擊按鈕切換主題?</p>
<button id="theme-toggle">切換暗黑模式</button>
</header>
<main>
<section>
<h2>這是主要內(nèi)容區(qū)域</h2>
<p>背景和文字顏色會(huì)根據(jù)主題自動(dòng)變化。 </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;
}
/* 應(yīng)用變量*/
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;
}
/* 添加一點(diǎn)動(dòng)畫效果*/
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)設(shè)置）
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');
}
// 綁定點(diǎn)擊事件toggleButton.addEventListener('click', toggleTheme);
? 功能亮點(diǎn)
- 記憶用戶選擇：使用
localStorage保存主題偏好。 - 尊重系統(tǒng)偏好：首次訪問時(shí)根據(jù)
prefers-color-scheme自動(dòng)適配。 - 平滑過渡：CSS
transition讓顏色變化更自然。 - 可擴(kuò)展性強(qiáng)：通過CSS 變量可輕鬆添加更多主題（如深紅、紫色等）。
? 小技巧
- 你可以把按鈕做成Moon/Sun 圖標(biāo)，提升視覺體驗(yàn)。
- 使用
color-scheme: light dark;可讓瀏覽器控件（如輸入框）也適配主題。
:root {
color-scheme: light dark;
}
基本上就這些，不復(fù)雜但很實(shí)用。你可以把這個(gè)結(jié)構(gòu)集成到任何網(wǎng)頁(yè)中。
以上是CSS暗模式切換示例的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！