JavaScript 怎么实现页面深色模式和浅色模式的动态切换-js教程-PHP中文网

深色/浅色模式切换核心是操作document.documentelement的data-theme属性并配合css变量。通过localstorage持久化用户选择，fallback至系统偏好prefers-color-scheme，并监听其变化；按钮需支持aria属性实现无障碍。

javascript 怎么实现页面深色模式和浅色模式的动态切换

JavaScript 实现深色/浅色模式切换，核心是操作 document.documentElement 的 class 或 data-theme 属性，并配合 CSS 变量和媒体查询做样式适配。关键不在于 JS 多复杂，而在于结构清晰、状态可持久、响应及时。

1. 基础 HTML 结构与 CSS 变量准备

先在 CSS 中定义两套主题变量，用 :root 和 [data-theme="dark"] 区分：

:root {
  --bg-color: #ffffff;
  --text-color: #333333;
  --border-color: #e0e0e0;
}

[data-theme="dark"] {
  --bg-color: #121212;
  --text-color: #e0e0e0;
  --border-color: #333333;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  border-color: var(--border-color);
}

这样只需切换 data-theme，整个页面样式就自动更新。

2. JavaScript 切换逻辑（含系统偏好与手动控制）

用一个函数统一处理主题设置，支持三种来源：用户手动选择、系统偏好、默认回退：

读取 localStorage 获取上次保存的主题（优先级最高）
若无保存，则监听 prefers-color-scheme 获取系统设置（dark 或 light）
设置 document.documentElement.dataset.theme 并存入 localStorage
为按钮绑定点击事件，调用该函数并传入目标主题

示例代码：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

function setTheme(theme) {
  const root = document.documentElement;
  root.dataset.theme = theme;
  localStorage.setItem('theme', theme);
}

// 初始化
const savedTheme = localStorage.getItem('theme');
const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

if (savedTheme) {
  setTheme(savedTheme);
} else {
  setTheme(systemPrefersDark ? 'dark' : 'light');
}

// 切换按钮示例（假设有一个 id="theme-toggle" 的按钮）
document.getElementById('theme-toggle').addEventListener('click', () => {
  const current = document.documentElement.dataset.theme;
  const next = current === 'dark' ? 'light' : 'dark';
  setTheme(next);
});

3. 响应系统主题变化（可选但推荐）

如果用户系统设置变更（比如夜间自动切深色），网页也应同步更新，避免体验割裂：

const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
mediaQuery.addEventListener('change', (e) => {
  if (!localStorage.getItem('theme')) {
    setTheme(e.matches ? 'dark' : 'light');
  }
});

注意：仅在用户未手动设置时才响应系统变化，否则会覆盖用户选择。

4. 提供 UI 控件与无障碍支持

按钮建议用语义化标签，添加 ARIA 属性说明当前状态：

<button id="theme-toggle" aria-label="切换深色模式" aria-pressed="false">
  ?
</button>

JS 中同步更新 aria-pressed：

const btn = document.getElementById('theme-toggle');
btn.setAttribute('aria-pressed', document.documentElement.dataset.theme === 'dark');

这样屏幕阅读器能准确传达当前模式，也方便后续加图标或文字提示。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南