HTML5网页如何实现暗黑模式 HTML5网页主题切换的完整教程-html教程-PHP中文网

HTML5网页如何实现暗黑模式 HTML5网页主题切换的完整教程

爱谁谁

发布： 2025-10-20 09:09:02

原创

321人浏览过

答案：通过CSS变量定义主题，JavaScript切换类名并保存至localStorage，结合prefers-color-scheme响应系统偏好，实现暗黑模式。

html5网页如何实现暗黑模式 html5网页主题切换的完整教程

要在HTML5网页中实现暗黑模式主题切换，核心是结合CSS变量、JavaScript控制和用户偏好检测。整个过程不复杂，但需要合理组织代码结构，确保体验流畅。

使用CSS自定义属性定义主题

通过CSS变量可以方便地管理亮色和暗色样式。将颜色统一定义在:root和.dark选择器中，便于后续切换。

示例：
:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  --border-color: #dddddd;
}

.dark {
  --bg-color: #1a1a1a;
  --text-color: #f0f0f0;
  --border-color: #444444;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}

.card {
  border: 1px solid var(--border-color);
}

用JavaScript切换主题类名

通过JavaScript为<body>添加或移除dark类，即可触发主题变化。同时可保存用户选择到localStorage，保证刷新后设置不丢失。

实现逻辑：

获取按钮元素并绑定点击事件
检查当前是否为暗色模式，切换类名
将用户选择存入localStorage
添加平滑过渡效果提升体验

JavaScript代码示例：
const body = document.body;
const toggleBtn = document.getElementById('theme-toggle');

// 检查本地存储中的主题设置
const currentTheme = localStorage.getItem('theme');
if (currentTheme === 'dark') {
  body.classList.add('dark');
}

toggleBtn.addEventListener('click', () => {
  body.classList.toggle('dark');

  // 保存当前状态
  if (body.classList.contains('dark')) {
    localStorage.setItem('theme', 'dark');
  } else {
    localStorage.setItem('theme', 'light');
  }
});

响应系统级暗黑偏好（prefers-color-scheme）

利用CSS媒体查询自动适配用户的操作系统设置，提升初始体验。如果用户未手动选择主题，则默认跟随系统。

Flawless AI

好莱坞2.0，电影制作领域的生成式AI工具

查看详情

立即学习“前端免费学习笔记（深入）”；

CSS写法：
@media (prefers-color-scheme: dark) {
  if (!localStorage.getItem('theme')) {
    body {
      --bg-color: #1a1a1a;
      --text-color: #f0f0f0;
    }
  }
}

JavaScript补充判断：
可在页面加载时读取系统偏好，并仅在用户无自定义设置时应用。 if (!localStorage.getItem('theme')) {
  if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    body.classList.add('dark');
  }
}