JavaScript 中怎么实现点击按钮切换页面黑夜与白天模式-js教程-PHP中文网

javascript实现白天/黑夜模式切换需动态修改css类并持久化偏好：html设按钮和容器，css用自定义变量定义两套主题并添加过渡效果，js读取localstorage状态、监听点击切换类名及按钮文本，并可选适配系统偏好、作用于body或使用图标。

javascript 中怎么实现点击按钮切换页面黑夜与白天模式

在 JavaScript 中实现点击按钮切换白天/黑夜模式，核心是动态修改页面的 CSS 类或样式变量，并持久化用户偏好（比如用 localStorage）。下面是一个简洁、实用、可直接运行的方案。

1. HTML 结构：准备按钮和基础容器

只需一个按钮和一个包裹内容的容器（如或 <main></main>），便于统一控制样式：

<button id="themeToggle">切换为黑夜模式</button>
<main class="theme-light"><h1>我的页面</h1>
  <p>这是正文内容。</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill3430" title="Alibabacloud Sdk Client Initialization For Java"><img
														src="https://img.php.cn/upload/skill/000/000/081/178955835420587.jpg" alt="Alibabacloud Sdk Client Initialization For Java" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill3430" title="Alibabacloud Sdk Client Initialization For Java" class="overflowclass">Alibabacloud Sdk Client Initialization For Java</a>
													<p class="overflowclass">在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill3430" title="Alibabacloud Sdk Client Initialization For Java" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
</main>

2. CSS 定义两套主题样式

用 CSS 自定义属性（CSS 变量）管理颜色，再通过类名（如 .theme-light / .theme-dark）批量切换：

: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 覆盖变量值。

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 保持可访问性

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