主题色切换本质是动态替换CSS自定义属性；需用JS生成完整变量字符串注入<style id="theme-styles">，并补全Bootstrap依赖链变量（如--bs-primary-rgb等），同时通过内联脚本同步读取localStorage避免闪屏。
主题色切换的本质是动态替换 CSS 自定义属性
Bootstrap 5 不再内置 dark 或多主题 JS 控制逻辑，所有主题色都通过 CSS 自定义属性（--bs-primary、--bs-body-bg 等）驱动。切换主题，实际就是用 JS 动态修改 :root 或某个容器上的这些变量值，而非加载新 CSS 文件。
关键点在于：必须确保你的自定义主题变量覆盖 Bootstrap 的默认值，且优先级足够高——推荐在 <head> 中插入一个 <style id="theme-styles"> 标签，后续只更新其内容，避免样式表重载和 FOUC。
用 JS 动态写入 CSS 变量最稳妥
直接操作 document.documentElement.style 虽快，但无法批量设置、易遗漏、不支持嵌套变量（如 --bs-primary-rgb），也不便于复用主题配置。更可控的方式是生成完整的 CSS 字符串并注入 <style> 标签：
- 每个主题定义为一个纯对象，键名严格对应 Bootstrap 5 的变量名（如
"--bs-primary"、"--bs-body-bg"） - 用
Object.entries(theme).map(...).join('; ')拼成声明块，包裹进:root { ... } - 每次切换时，先清空旧
<style id="theme-styles">内容，再写入新字符串
示例片段：
const themes = {
light: {
"--bs-primary": "#0d6efd",
"--bs-body-bg": "#fff"
},
ocean: {
"--bs-primary": "#20c997",
"--bs-body-bg": "#f8fbff"
}
};
function applyTheme(name) {
const styleEl = document.getElementById("theme-styles");
const vars = Object.entries(themes[name])
.map(([k, v]) => `${k}: ${v}`)
.join("; ");
styleEl.textContent = `:root { ${vars} }`;
}
注意 Bootstrap 5 的变量依赖链不能断
Bootstrap 5 很多组件颜色不是直取 --bs-primary，而是基于它计算而来，例如：
-
--bs-primary-rgb用于透明背景（rgba(var(--bs-primary-rgb), .1)） -
--bs-primary-text-emphasis用于深色文字（需手动设为可读对比度的深色） -
--bs-primary-border-subtle用于边框（通常比主色浅 20%）
如果只改 --bs-primary 却忽略配套变量，按钮悬停、表单焦点、卡片边框等地方会出错或失色。务必为每个主题补全整套关联变量，至少包括：--bs-primary-rgb、--bs-primary-text-emphasis、--bs-primary-border-subtle、--bs-primary-bg-subtle。
持久化主题选择要避开 localStorage + 刷新闪屏
用户选完主题存到 localStorage 很自然，但页面加载时若等 JS 执行再注入样式，会先显示默认主题（通常是 light），再跳变成目标主题——这就是“闪屏”。解决方法只有两个：
- 服务端根据请求头或 cookie 渲染初始
<style id="theme-styles">，让 HTML 带着正确主题下发 - 前端在
<head>最顶部加一段内联<script>，同步读取localStorage并立即写入<style>（注意：不能用DOMContentLoaded，太晚）
后者实操更轻量，但必须确保该脚本在所有 CSS link 之前执行，且不依赖外部库。
真正难的是深色模式自动适配与用户手动选择的共存逻辑——比如系统设 dark，但用户上次手动选了 light，该以谁为准？这个判断点一旦漏掉，主题就不可控。
