bootstrap 5 的颜色系统基于 css 变量实现运行时动态响应，如 text-primary 编译为 color: var(--bs-primary)，支持深色模式切换、js 动态修改及 devtools 实时预览；v4 则编译为固定值，需重新编译 sass 才能换色。
Bootstrap 4 的颜色系统是编译期静态的，Bootstrap 5 的颜色系统是运行时可变的——这不是“好不好”的问题，而是“能不能动态响应”的分水岭。
为什么 text-primary 在 v5 中能随深色模式切换，v4 中不能
因为 v4 的 text-primary 最终编译为固定值 color: #007bff，写死在 CSS 里；而 v5 的 text-primary 编译为 color: var(--bs-primary)，只要你在 :root 或媒体查询中改了 --bs-primary，所有用到它的类立刻生效。
- v4 中想换主题色，必须重新编译 Sass，改
$primary变量，再生成新 CSS 文件 - v5 中只需一行 JS：
document.documentElement.style.setProperty('--bs-primary', '#6366f1') - 浏览器 DevTools 里直接编辑
--bs-primary值，就能实时预览效果，v4 完全做不到
--bs-body-color 和 --bs-body-bg 必须成对修改
很多人只改了 --bs-body-bg，发现文字突然看不清——不是类没生效，是 .text-body 依赖的 --bs-body-color 还是浅色值，灰字叠深灰背景，对比度崩了。
- 深色模式下必须同步设置：
--bs-body-color: #f8f9fa（亮灰）、--bs-emphasis-color: #ffffff（白）、--bs-border-color: #495057 - 漏掉
--bs-emphasis-color，会导致.fw-bold文字在深色背景下也发灰 - 用
[data-bs-theme="dark"]包裹比@media (prefers-color-scheme: dark)更可靠，避免系统设置与页面状态不一致
bg-primary-subtle 和 bg-primary 不是“淡一点”的关系
它们来自两套独立的颜色生成逻辑：bg-primary 是主题主色本身，bg-primary-subtle 是从 --bs-primary-100 变量取值，和 text-muted 属于同一灰阶体系，专为可访问性对比度设计。
-
bg-primary + text-primary实测对比度常低于 4.5:1，小字号下 WCAG 检测失败 -
bg-primary-subtle + text-primary默认保证 ≥ 8:1，且深色模式下自动切为--bs-primary-900 + text-white - 别用
bg-opacity-10模拟 subtle 效果——它只是降低背景透明度，会透出父容器内容，破坏视觉隔离
自定义颜色时，$theme-color-interval 容易被忽略
你加了 $theme-colors: (navy: #001f3f)，但 text-navy-emphasis 在深色模式下还是黑糊一片？大概率是 $theme-color-interval 没同步调小。
- v5 默认用 20% 步长计算明度偏移，对深蓝、深紫这类低明度色太粗暴，容易算出接近 #000 的值
- 应同时设
$theme-color-interval: 15%，让shade-color($navy, 15%)算出更可用的强调色 - 这个变量只影响 Sass 编译期生成的类（如
text-navy-emphasis），不影响运行时 CSS 变量，所以必须在编译前就配好
真正卡住迁移的，往往不是“怎么写新类名”，而是没意识到 v5 的颜色系统是契约式运行时依赖——你改一个变量，就得确认所有语义相关变量是否同步，否则就是局部生效、全局错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
