bg-gradient-primary在深色模式下“没变”是因渐变色基于$primary变量（如#0d6efd→#86b7fe），在深色背景上对比度低、文字不可读；bootstrap 5渐变类不响应prefers-color-scheme，须用@media手动重写background-image，并注意颜色适配、层级遮挡与wcag对比度标准。
为什么 bg-gradient-primary 在深色模式下看起来“没变”
不是渐变失效，而是 bg-gradient-primary 生成的渐变始终基于 $primary 变量（如 #0d6efd → #86b7fe），这些颜色在深色背景上对比度极低，文字常不可读。Bootstrap 5 的渐变类本身不感知 prefers-color-scheme，也不会自动切换为暗色系渐变。
必须用 @media (prefers-color-scheme: dark) 单独重写渐变值
不能依赖工具类，必须手动覆盖 background-image。关键点：
- 深色模式下的渐变色需手动指定，推荐用 Bootstrap 暗色变量（如
$primary-dark）或自定义深灰/靛蓝组合 - 务必用
background-image，不是background—— 后者会清掉background-color回退逻辑 - 断点 + 深色模式需嵌套写，例如只在
md及以上且深色模式时启用暗色渐变：@media (min-width: 768px) and (prefers-color-scheme: dark) { .hero-section { background-image: linear-gradient(135deg, #1a1d22, #3a405a); } } - 移动端 Safari 对
prefers-color-scheme切换有延迟，建议加兜底：body[data-bs-theme="dark"] .hero-section再写一遍相同规则
class 顺序和 !important 的真实作用场景
当同时使用 bg-gradient-md（自定义类）和 bg-dark（Bootstrap 工具类）时：
- 必须写成
class="bg-gradient-md bg-dark"—— 自定义类在前，保底色在后，小屏才回退到bg-dark的纯色 -
!important在深色模式覆盖中几乎必加：因为bg-gradient-primary类自身带!important，你的媒体查询规则若没同等权重会被忽略 - 别给
background-color加!important，它只是 fallback；真正要强覆盖的是background-image
子元素遮挡渐变时容易被忽略的透明度处理
卡片、按钮等组件默认带白色背景（bg-white），会完全盖住容器的渐变。这不是渐变没生效，而是视觉被遮挡：
- 把子元素的背景设为半透：
background-color: rgba(255, 255, 255, 0.9)，留出 10% 透出空间 - 避免用
bg-transparent—— 它会让子元素彻底透明，文字可能因对比度不足而不可读 - 深色模式下，
rgba(255, 255, 255, 0.9)要同步改为rgba(15, 23, 42, 0.9)，否则在暗背景下仍显突兀
color、border-color 和子元素 background-color 的适配。
