最直接方案是用JavaScript操作document.body.style.backgroundColor；推荐用DOMContentLoaded绑定事件，避免选择器错误或颜色格式问题；预设色切换应使用CSS类而非内联样式，优先修改CSS变量以提升兼容性与维护性。
用 JavaScript 直接改 document.body.style.backgroundColor
这是最直接、兼容性最好、不依赖框架的方案。bootstrap 按钮只是个触发器，真正起作用的是 js 对 dom 的操作。
常见错误现象：点了按钮没反应——大概率是 JS 没绑定事件，或选择器写错（比如用了 .btn-primary 却没加 class）；或者背景色值格式不对（如写成 "blue" 但浏览器不识别，建议用十六进制或 rgb）。
- 确保按钮有唯一标识，比如
id="change-bg-btn"或带明确 class，避免多个按钮误绑 - 在页面加载完成后执行绑定，推荐用
DOMContentLoaded事件，而不是把 script 放在 head 里 - 示例代码：
document.getElementById('change-bg-btn').addEventListener('click', () => { document.body.style.backgroundColor = '#4dabf7'; });
用 Bootstrap 按钮 + 自定义 class 切换预设背景色
如果你只想在几个固定颜色间切换（比如浅灰→深蓝→米白），用 CSS 类控制比硬写颜色值更易维护，也方便复用主题逻辑。
使用场景：后台管理页的「日间/夜间模式」切换、多皮肤主题预览、演示用快速配色测试。
- 先定义好几组背景类，比如
.bg-day、.bg-night、.bg-moon，每个类只含background-color - JS 里用
classList.replace()或classList.toggle()切换，避免手动清空所有类引发副作用 - 注意：不要直接操作
body.className = 'bg-night'，会覆盖掉其他必要 class（如 Bootstrap 的container外层 class）
为什么别用 style="background-color: ..." 写死在 HTML 里
因为静态内联样式无法被 JS 动态覆盖（除非你用 !important，但这会破坏可维护性），而且每次换色都要重写 HTML，完全失去交互意义。
性能影响不大，但开发体验极差：改个颜色要同时动 HTML、JS、甚至可能漏掉某处注释里的旧值。
- 内联 style 的优先级高于外部 CSS，但低于 JS 设置的
element.style.xxx—— 看似能覆盖，实则容易因执行时序出问题 - 如果页面用了 CSS 变量（如
--bg-main），应优先改变量值：document.documentElement.style.setProperty('--bg-main', '#2b303b')，这样子元素自动响应
移动端点击无反馈？检查 user-select 和伪类冲突
某些安卓 WebView 或 iOS Safari 在按钮点击瞬间会短暂闪白或失焦，导致背景色“看起来没变”——其实变了，只是被默认焦点样式盖住了。
容易踩的坑：给按钮加了 outline: none 却忘了移除 :focus 下的背景变化；或用了 -webkit-tap-highlight-color: transparent 后未补全视觉反馈。
- 确保按钮本身没有设置
background-color的 :active/:focus 规则干扰 body 背景（Bootstrap 默认不会，但自定义 CSS 可能有） - 真机调试时，用 Safari 开发者工具远程检查
body元素的 computed styles，确认background-color确实已更新 - 如果要用过渡效果，别对
body加transition（部分浏览器不支持），改用:root变量 + transition 更稳妥
body.style 可能不如改根节点变量来得干净。
