Bmob后端云实战|网页夜间使用刺眼？原生CSS变量实现一键明暗主题切换，持久保存用户偏好本文分享利用 CSS 变量 +

很多网页小工具都会忽略一个用户痛点：夜间使用时，白色背景屏幕强光刺眼，长时间阅读容易视觉疲劳。

成熟产品都会提供明暗两套主题，但是很多个人Demo、小型网页项目，上手不知道怎么低成本实现深色模式。本文基于我正在开发的Bmob备忘录项目，用原生CSS变量 + JS实现主题切换，不需要任何前端框架，代码轻量化，还能通过localStorage记住用户的主题选择，刷新页面不丢失配置。

技术亮点： ✅ 原生CSS变量实现双主题，代码简洁 ✅ 一键切换亮色/暗色，带平滑过渡动画 ✅ 本地持久存储主题偏好，刷新自动恢复 ✅ 搭配Bmob后端云，笔记数据不受主题切换影响

实现原理

核心思路：

在:root定义CSS变量，分别定义light、dark两套主题色值
通过JS修改html根标签的data-theme属性，切换主题
使用localStorage保存用户选择，下次打开页面自动读取主题

完整代码片段

/* 定义两套主题色变量 */
:root[data-theme="light"] {
  --bg-color: #ffffff;
  --text-color: #222222;
}
:root[data-theme="dark"] {
  --bg-color: #121212;
  --text-color: #eeeeee;
}

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

// 主题切换逻辑，持久化保存用户选择
const themeToggleBtn = document.getElementById('theme-toggle');
const rootDom = document.documentElement;

// 读取本地存储的主题
const savedTheme = localStorage.getItem('memoTheme');
if(savedTheme) {
  rootDom.setAttribute('data-theme', savedTheme);
}

themeToggleBtn.addEventListener('click', ()=>{
  const currentTheme = rootDom.getAttribute('data-theme');
  const targetTheme = currentTheme === 'dark' ? 'light' : 'dark';
  rootDom.setAttribute('data-theme', targetTheme);
  localStorage.setItem('memoTheme', targetTheme);
})

效果演示

点击切换按钮，页面平滑在亮色、暗色界面切换。主题选择会保存在浏览器本地，关闭页面再次打开，自动加载上一次的主题。项目笔记数据存储在Bmob后端云，切换主题不会修改、丢失任何笔记内容，只改变前端界面样式。

踩坑小结

颜色尽量使用CSS变量统一管理，不要写死多处硬编码色值，后期维护成本更低；
增加0.3s过渡动画，避免切换主题时页面闪烁生硬；
一定要做本地存储，提升用户体验，否则每次打开都要重新切换。

总结

深色模式早已不是锦上添花的功能，而是Web项目提升用户体验的刚需。这套方案足够轻量，没有框架依赖，可以直接复用在你的网页Demo、个人小工具中。如果你也在用Bmob后端云开发Web应用，可以直接把这段代码集成进去。