JavaScript实现白天/黑夜模式切换需动态修改CSS类并持久化偏好：HTML设按钮和容器，CSS用自定义变量定义两套主题并添加过渡效果，JS读取localStorage状态、监听点击切换类名及按钮文本，并可选适配系统偏好、作用于body或使用图标。
在 JavaScript 中实现点击按钮切换白天/黑夜模式，核心是动态修改页面的 CSS 类或样式变量，并持久化用户偏好（比如用 localStorage）。下面是一个简洁、实用、可直接运行的方案。
1. HTML 结构：准备按钮和基础容器
只需一个按钮和一个包裹内容的容器（如 <body> 或 <main>），便于统一控制样式：
<button id="themeToggle">切换为黑夜模式</button> <main class="theme-light"> <h1>我的页面</h1> <p>这是正文内容。</p> </main>
2. CSS 定义两套主题样式
用 CSS 自定义属性（CSS 变量）管理颜色，再通过类名（如 .theme-light / .theme-dark）批量切换：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
:root {
--bg-color: #ffffff;
--text-color: #333333;
--border-color: #e0e0e0;
}
.theme-dark {
--bg-color: #121212;
--text-color: #e0e0e0;
--border-color: #333333;
}
main {
background-color: var(--bg-color);
color: var(--text-color);
border: 1px solid var(--border-color);
transition: background-color 0.3s, color 0.3s;
}
注意：transition 让颜色变化更平滑；:root 对应白天模式，.theme-dark 覆盖变量值。
立即学习“Java免费学习笔记（深入）”；
3. JavaScript 控制切换逻辑
监听按钮点击，切换 main（或 body）的类名，并保存当前状态：
const toggleBtn = document.getElementById('themeToggle');
const main = document.querySelector('main');
// 从 localStorage 读取上次保存的主题
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
main.classList.add('theme-dark');
toggleBtn.textContent = '切换为白天模式';
} else {
main.classList.remove('theme-dark');
toggleBtn.textContent = '切换为黑夜模式';
}
toggleBtn.addEventListener('click', () => {
if (main.classList.contains('theme-dark')) {
main.classList.remove('theme-dark');
localStorage.setItem('theme', 'light');
toggleBtn.textContent = '切换为黑夜模式';
} else {
main.classList.add('theme-dark');
localStorage.setItem('theme', 'dark');
toggleBtn.textContent = '切换为白天模式';
}
});
4. 进阶建议（可选）
-
适配系统偏好：首次访问时可用
window.matchMedia('(prefers-color-scheme: dark)')检测系统设置，自动启用暗色模式 -
作用于 body 更通用：若想全站生效，把
main换成document.body，CSS 中用body.theme-dark选择器 -
图标代替文字：用 ☀️ / ? 符号或 SVG 图标提升体验，配合
aria-label保持可访问性
