Bootstrap 6 主题色 token：.theme-* 与 fg-* 怎么配合

6.0 在 bg-* / text-* 之外新增了一组主题 token 类：先声明 .theme-primary，再用 .theme-bg、.theme-contrast、.theme-border 取角色。本文说明搭配方式、深色模式和自定义入口。

一句话结论

5.3 里想做一个主色按钮，要同时写背景色、文字色、悬浮/按下状态；6.0 把这些收进了一组 token：先声明哪种颜色（.theme-primary），再声明用在哪个部位（.theme-bg、.theme-contrast、.theme-border）。

两步写法

<div class="theme-primary theme-bg theme-contrast p-4 rounded-4">
  主色底 + 高对比文字
</div>

<div class="theme-primary theme-subtle p-4 rounded-4">
  主色的淡色底，适合放提示区
</div>

• .theme-primary / .theme-success / .theme-danger / .theme-warning / .theme-info / .theme-accent / .theme-secondary / .theme-inverse：选定一组颜色 token
• .theme-bg：实色背景；.theme-subtle：淡色背景；.theme-muted：更弱的次级背景
• .theme-fg：常规前景文字；.theme-contrast：与该背景形成高对比的文字
• .theme-border：取同一主题色的边框色
• .theme-reset：清掉当前 token，恢复默认配色

组件也吃这套 token，例如 btn-solid theme-primary、alert theme-success——换主题色只改一个类名，不用同时改背景、文字、边框、焦点环。

深色模式

data-bs-theme="dark" 放在 <html>、<body> 或任意容器上，整棵子树的 token 会切到深色取值；局部区域也可以单独切换：

<section data-bs-theme="dark">
  <div class="theme-primary theme-bg theme-contrast p-4">这一段是深色主色卡片</div>
</section>

和 5.3 的关系

bg-*、text-*、border-* 这些类在 6.0 里仍然可用，新增的是 token 层：fg-*（前景）以及 theme-*（按角色取色）。也就是说：

• 只要一个背景色：bg-primary 仍然可以
• 要背景 + 文字 + 边框成套、还要跟随深色模式：用 .theme-* 组合

自定义

改 CSS 变量最快，不用重新编译：每个主题色都有一组 --bs-<颜色>-base、-bg、-fg、-border、-contrast、-focus-ring 之类的变量，覆盖 -base 就能连带换掉整组。需要新增一个主题色时，改 Sass 的 $theme-colors 映射再重新编译。

常见坑

• 只写 .theme-primary 不会有任何视觉效果，必须再加一个角色类（.theme-bg / .theme-fg / .theme-border）。
• .theme-contrast 是「与当前底色对比」的文字色，放在没有底色的元素上会得到默认前景色。
• 深色模式不要自己写 @media (prefers-color-scheme)，用 data-bs-theme 才能和组件内建样式保持一致。