改--bs-primary等变量需同步定义--bs-primary-rgb等6个变量并调用bootstrap.theme.update()，否则组件变色不一致；data-bs-theme属性与css变量必须联动生效。
直接改 --bs-primary 等变量能触发部分组件变色，但预览会出错——漏掉 --bs-primary-rgb 或没同步 data-bs-theme 就会导致按钮变色而警告框不变、Tooltip 仍用旧背景色。
为什么改了变量预览还是不对
常见现象：点切换按钮后，.btn-primary 变了，但 .alert-primary 没变，或 .tooltip 边框发灰。根本原因不是 JS 没执行，而是 Bootstrap 5 的样式链依赖多个变量协同生效：
-
--bs-primary控制主色，但rgba(var(--bs-primary-rgb), .1)才用于悬停/透明背景，缺--bs-primary-rgb就 fallback 到默认值 -
.tooltip同时依赖--bs-tooltip-bg、--bs-tooltip-color、--bs-tooltip-arrow-color，只改一个无效 - 如果页面已加载
data-bs-theme="dark"，但没调用bootstrap.Theme.getOrCreateInstance().update()，CSS 变量不会重算
必须补全的变量链（每个主题都要定义）
别只写 --bs-primary 和 --bs-body-bg。以下 6 个是最低限度，缺一不可：
-
--bs-primary（主色 HEX） -
--bs-primary-rgb（对应 RGB 字符串，如"20, 201, 151"，不是十六进制转十进制再拼接，要精确匹配） -
--bs-primary-text-emphasis（深色文字，建议用 LCH 对比度 ≥ 4.5 的值） -
--bs-primary-bg-subtle（浅色背景，通常比主色浅 30%） -
--bs-primary-border-subtle（浅边框，比--bs-primary-bg-subtle再浅 15%） -
--bs-body-bg和--bs-body-color（必须成对设，否则文字在深底上不可读）
示例：ocean 主题中，--bs-primary: #20c997 对应的 --bs-primary-rgb 是 "32, 201, 151"，不是 "32, 201, 150"——差 1 都会让 rgba(var(--bs-primary-rgb), .1) 渲染异常。
预览时避免闪屏和重绘抖动
在线预览场景下，用户频繁切换主题，直接操作 document.documentElement.style.setProperty() 会触发全量重绘，输入中的编辑器卡顿明显。更稳的做法是：
- 所有主题定义为纯对象，如
themes.ocean、themes.slate - 用
<style id="theme-styles"></style>注入完整:root { ... }块，每次只替换textContent - 切换前先清空旧内容，再写入新字符串，避免变量残留干扰
- 不要用
cssText = ''覆盖整个 style 元素，会意外删掉其他必要变量 - 给关键容器加
transition: background-color 0.2s, color 0.2s，但避开box-shadow和border动画
内联脚本必须放在 里，读取 localStorage.getItem('preview-theme') 后立即设 class 和变量，不能等 DOMContentLoaded。
data-bs-theme 和 CSS 变量必须联动
Bootstrap 5.3+ 的深色模式不是仅靠变量驱动，data-bs-theme="dark" 属性本身参与选择器匹配。所以预览时：
- 切主题必须同时做两件事：
document.documentElement.setAttribute('data-bs-theme', 'dark')+bootstrap.Theme.getOrCreateInstance().update() - 如果没引入
bootstrap/js/dist/theme.js，bootstrap.Theme会是undefined，需单独加载 - 自定义主题不能只靠
[data-theme="ocean"]这类 class，得确保它作用于:root或html，否则后代元素继承不到 - 第三方组件（如 Bootstrap Icons）不读 CSS 变量，得用 class 覆盖或额外注入样式
最易被忽略的是：变量链完整性和 .update() 调用时机。前者决定“能不能变”，后者决定“什么时候变”——两者缺一，预览就只是半成品。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
