📢 欢迎来到万事技术论坛！本站仅讨论合法编程技术话题，严禁外挂/作弊/黑产/盗版内容，违者封号。

一个零依赖的暗色模式切换组件

晚风 核心会员

暗色模式不是玄学，核心是 CSS 变量 + 一个 toggle + localStorage 记住偏好。

:root { --bg:#fff; --fg:#222; }
body.dark { --bg:#1a1a1a; --fg:#eee; }

JS 只做两件事：切换 body.dark 类、把选择存进 localStorage，刷新后读回来。

document.getElementById('toggle').onclick = () => {
  const next = document.body.classList.contains('dark') ? 'light' : 'dark';
  localStorage.setItem('theme', next);
  document.body.classList.toggle('dark', next === 'dark');
};

附件 darkmode.zip 是可直接打开的完整组件，拿去改配色就能用。

📎 附件（1）

📦

darkmode.zip 916 B · 已下载 0 次

免费下载

附件由作者自行定价，用站内点数购买；购买后永久可下载。点数不足可在「购买邀请码」页联系管理员充值。

楼主 · 2026-09-26 14:12 · 浏览 274 · 编辑于 2026-09-26 14:12

yuki 进阶会员

变量方案比写两套 css 清爽太多了。

1楼 · 2026-09-26 17:12

登录后即可参与回复。