因为 bootstrap 5.3+ 主题变量定义在 :root，data-bs-theme 仅作用于 标签，无法被 body 或子容器继承；局部主题需用 data-theme-zone 自定义属性配合 css 作用域隔离变量。
为什么不能只改 body 或某个容器的 data-bs-theme
Bootstrap 5.3+ 的主题变量（如 --bs-body-bg、--bs-btn-bg）全部定义在 :root，而 :root 对应的是 document.documentElement（即 标签）。你给 body 或某个 <div> 加 <code>data-bs-theme="dark"，CSS 选择器 [data-bs-theme="dark"] 根本匹配不到——它只作用于 :root 下的规则，不会向下继承或穿透到子元素。结果就是按钮、卡片、表单控件全无响应。
局部主题切换的唯一可行路径：用 CSS 作用域 + 自定义属性隔离
所谓“局部”，不是靠 Bootstrap 原生机制实现的，而是绕过 data-bs-theme 全局控制，手动为特定区域创建独立变量作用域。核心是两步：
- 给目标容器加一个自定义属性，比如
data-theme-zone="card-dark" - 在 CSS 中用
[data-theme-zone="card-dark"]选择器重新声明变量，且只影响该容器及其后代
示例：
:root {
--bs-card-bg: #fff;
--bs-card-color: #212529;
}
[data-theme-zone="card-dark"] {
--bs-card-bg: #212529;
--bs-card-color: #f8f9fa;
}
.card {
background-color: var(--bs-card-bg);
color: var(--bs-card-color);
}
这样，只有带 data-theme-zone="card-dark" 的 <div class="card"> 才会变暗，其他组件完全不受影响。
<h3>和全局 <code>data-bs-theme 共存时要注意什么
如果页面已启用 Bootstrap 原生暗色模式（document.documentElement.setAttribute('data-bs-theme', 'dark')），你的局部变量必须覆盖其优先级，否则会被冲掉。关键点：
- 自定义 CSS 文件必须放在
bootstrap.min.css之后引入 - 不要写死颜色值，比如
.card { background: #212529; }—— 这会直接覆盖var(--bs-card-bg)，导致局部主题失效 - 若同时用了 Sass 编译，确保你的局部变量声明在 Bootstrap 变量之后、组件样式之前（即按
@import "variables"; @import "your-local-theme"; @import "bootstrap/scss/card";顺序）
浏览器开发者工具里检查目标元素的计算样式，确认 background-color 确实取自你定义的 --bs-card-bg，而不是 Bootstrap 默认值或硬编码值。
JavaScript 控制局部主题切换的最小实现
不需要引入 bootstrap.Theme，也不需要调用 .update() —— 因为你没动 :root，只是切换容器属性。只需：
- 给容器设置/移除
data-theme-zone属性 - 确保对应 CSS 规则已加载（静态写好，不运行时注入）
- 必要时手动触发重绘（极少数情况，如 Safari 中动画卡顿）：
element.style.transform = 'translateZ(0)'
示例按钮逻辑：
const zone = document.querySelector('.my-special-card');
const btn = document.getElementById('toggle-card-theme');
btn.addEventListener('click', () => {
if (zone.hasAttribute('data-theme-zone')) {
zone.removeAttribute('data-theme-zone');
} else {
zone.setAttribute('data-theme-zone', 'card-dark');
}
});
真正容易被忽略的是：局部主题无法自动适配系统偏好（prefers-color-scheme），也不能被 Bootstrap 的 Theme 实例感知。它纯粹是 CSS 作用域技巧，适用于明确要隔离样式的模块（如嵌入式仪表盘卡片、第三方内容区），别指望它和全局主题联动。
