html使用JavaScript + CSS实现亮色和暗色切换功能

更新时间：2025年07月19日 09:16:16 作者：代码保安

文章介绍了使用JavaScript和CSS实现代理模式切换的方法,包含定义两种主题样式、动态修改class/data-theme属性、通过localStorage保存用户偏好,并提供媒体查询和动画优化等进阶建议,实现兼容性好且用户体验友好的主题切换功能

✅ 实现思路

使用 CSS 定义两种主题样式（亮色和暗色）。
通过 JavaScript 动态切换 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>
  欢迎来到我的网站
  <p>这是一个可以切换黑暗模式的页面。</p>
  <button id="toggleThemeBtn">切换到暗色模式</button>

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

🔹 CSS 部分 (styles.css)

/* 默认亮色主题 */
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");

// 页面加载时检查 localStorage 中是否有之前保存的主题
if (localStorage.getItem("theme") === "dark") {
  document.body.classList.add("dark-mode");
  toggleButton.textContent = "切换到亮色模式";
}

// 切换主题函数
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");
  }
});

🌟 进阶优化建议

使用 prefers-color-scheme: dark 媒体查询来自动匹配系统设置：

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

使用 data-theme="dark" 而不是 class，更语义化地控制主题。
可以封装为可复用组件或 React/Vue 插件。
添加动画过渡效果提升用户体验。

完整示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>黑暗模式切换</title>
<style>
	/* 默认亮色主题 */
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>
  欢迎来到我的网站
  <p>这是一个可以切换黑暗模式的页面。</p>
  <button id="toggleThemeBtn">切换到暗色模式</button>

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

// 页面加载时检查 localStorage 中是否有之前保存的主题
if (localStorage.getItem("theme") === "dark") {
  document.body.classList.add("dark-mode");
  toggleButton.textContent = "切换到亮色模式";
}

// 切换主题函数
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>

✅ 总结

你现在已经掌握了一个基础但实用的黑暗模式切换功能实现方式：

用 CSS 定义样式；
用 JS 控制类名切换；
用 localStorage 保存用户偏好；
用户体验友好，兼容性好。

到此这篇关于html使用JavaScript + CSS实现亮色和暗色切换功能的文章就介绍到这了,更多相关JavaScript和CSS实现html明暗切换内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

微信小程序开发经验总结（推荐）
本篇文章主要介绍了微信小程序开发经验总结（推荐），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-01-01
JS实现动态倒计时功能（天数、时、分、秒）
这篇文章主要介绍了JS实现动态倒计时功能详解（天数、时、分、秒）,需要的朋友可以参考下
2019-12-12
Javascript原型链及instanceof原理详解
这篇文章主要介绍了Javascript原型链及instanceof原理详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-05-05
基于node.js的快速开发透明代理
服务器端js（Server-Side Javascrpt）很早也就有了，JAVA中也有javascript 的script引擎。
2010-12-12
基于javascript实现图片左右切换效果
这篇文章主要为大家介绍了基于javascript实现图片左右切换效果，感兴趣的小伙伴们可以参考一下
2016-01-01
怎样用Javascript实现策略模式
这篇文章主要介绍了JavaScript设计模式之策略模式，想学习设计模式的同学，一定要看一下
2021-04-04
js代码实现多人聊天室
这篇文章主要为大家详细介绍了js代码实现多人聊天室，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-11-11
javascript中定义私有方法说明(private method)
本篇文章主要是对javascript中定义私有方法(private method)进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-01-01
微信小程序多表联合查询的实现详解
小程序设计中，通常会根据业务来做多表的拆分，多表拆分一般是根据业务的特点进行拆分。比如我们在文章关注的业务中，会将文章和关注信息拆分成一对多的表关系。初学者可能对一对一、一对多、多对多的设计概念不是特别清楚
2022-08-08
js/jQuery对象互转(快速操作dom元素)
在操作js或者jquery方面相关的元素时，可能会力不从心，因为在使用方法时可能js的会更好一点又或者jquery的会更好一点，真是无从选择啊,接下来将介绍JS/jQuery对象互转实现,方便你快速操作dom元素，感兴趣的朋友可以了解下啊
2013-02-02