快捷導(dǎo)航

html使用JavaScript + CSS實(shí)現(xiàn)亮色和暗色切換功能

更新時(shí)間：2025年07月19日 09:16:16 作者：代碼保安

文章介紹了使用JavaScript和CSS實(shí)現(xiàn)代理模式切換的方法,包含定義兩種主題樣式、動(dòng)態(tài)修改class/data-theme屬性、通過(guò)localStorage保存用戶偏好,并提供媒體查詢和動(dòng)畫優(yōu)化等進(jìn)階建議,實(shí)現(xiàn)兼容性好且用戶體驗(yàn)友好的主題切換功能

實(shí)現(xiàn)一個(gè)黑暗模式切換功能是現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)中常見(jiàn)的需求。下面是一個(gè)完整的示例，展示如何使用 JavaScript + CSS 來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的“黑暗模式”切換按鈕。

? 實(shí)現(xiàn)思路

使用 CSS 定義兩種主題樣式（亮色和暗色）。
通過(guò) JavaScript 動(dòng)態(tài)切換 HTML 元素的 class 或 data-theme 屬性。
使用 localStorage 保存用戶選擇的主題偏好。

?? 示例代碼

?? HTML 部分

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>黑暗模式切換</title>
  <link rel="stylesheet" href="styles.css" rel="external nofollow"  />
</head>
<body>
  歡迎來(lái)到我的網(wǎng)站
  <p>這是一個(gè)可以切換黑暗模式的頁(yè)面。</p>
  <button id="toggleThemeBtn">切換到暗色模式</button>

  <script src="script.js"></script>
</body>
</html>

?? CSS 部分 (styles.css)

/* 默認(rèn)亮色主題 */
body {
  background-color: #ffffff;
  color: #000000;
  transition: background-color 0.3s, color 0.3s;
}

/* 暗色主題樣式 */
.dark-mode {
  background-color: #121212;
  color: #ffffff;
}

?? JavaScript 部分 (script.js)

const toggleButton = document.getElementById("toggleThemeBtn");

// 頁(yè)面加載時(shí)檢查 localStorage 中是否有之前保存的主題
if (localStorage.getItem("theme") === "dark") {
  document.body.classList.add("dark-mode");
  toggleButton.textContent = "切換到亮色模式";
}

// 切換主題函數(shù)
toggleButton.addEventListener("click", () => {
  document.body.classList.toggle("dark-mode");

  // 修改按鈕文字
  if (document.body.classList.contains("dark-mode")) {
    toggleButton.textContent = "切換到亮色模式";
    localStorage.setItem("theme", "dark");
  } else {
    toggleButton.textContent = "切換到暗色模式";
    localStorage.setItem("theme", "light");
  }
});

?? 進(jìn)階優(yōu)化建議

使用 prefers-color-scheme: dark 媒體查詢來(lái)自動(dòng)匹配系統(tǒng)設(shè)置：

@media (prefers-color-scheme: dark) {
  body:not(.dark-mode) {
    background-color: #121212;
    color: #ffffff;
  }
}

使用 data-theme="dark" 而不是 class，更語(yǔ)義化地控制主題。
可以封裝為可復(fù)用組件或 React/Vue 插件。
添加動(dòng)畫過(guò)渡效果提升用戶體驗(yàn)。

完整示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>黑暗模式切換</title>
<style>
	/* 默認(rèn)亮色主題 */
body {
  background-color: #ffffff;
  color: #000000;
  transition: background-color 0.3s, color 0.3s;
}

/* 暗色主題樣式 */
.dark-mode {
  background-color: #121212;
  color: #ffffff;
}
@media (prefers-color-scheme: dark) {
  body:not(.dark-mode) {
    background-color: #121212;
    color: #ffffff;
  }
}
</style>
</head>
<body>
  歡迎來(lái)到我的網(wǎng)站
  <p>這是一個(gè)可以切換黑暗模式的頁(yè)面。</p>
  <button id="toggleThemeBtn">切換到暗色模式</button>

<script>
const toggleButton = document.getElementById("toggleThemeBtn");

// 頁(yè)面加載時(shí)檢查 localStorage 中是否有之前保存的主題
if (localStorage.getItem("theme") === "dark") {
  document.body.classList.add("dark-mode");
  toggleButton.textContent = "切換到亮色模式";
}

// 切換主題函數(shù)
toggleButton.addEventListener("click", () => {
  document.body.classList.toggle("dark-mode");

  // 修改按鈕文字
  if (document.body.classList.contains("dark-mode")) {
    toggleButton.textContent = "切換到亮色模式";
    localStorage.setItem("theme", "dark");
  } else {
    toggleButton.textContent = "切換到暗色模式";
    localStorage.setItem("theme", "light");
  }
});
</script>
</body>
</html>

? 總結(jié)

你現(xiàn)在已經(jīng)掌握了一個(gè)基礎(chǔ)但實(shí)用的黑暗模式切換功能實(shí)現(xiàn)方式：

用 CSS 定義樣式；
用 JS 控制類名切換；
用 localStorage 保存用戶偏好；
用戶體驗(yàn)友好，兼容性好。

到此這篇關(guān)于html使用JavaScript + CSS實(shí)現(xiàn)亮色和暗色切換功能的文章就介紹到這了,更多相關(guān)JavaScript和CSS實(shí)現(xiàn)html明暗切換內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: