真正让--btn-color起作用的前提是样式规则中明确使用var(--btn-color)替代固定值；它通常只控制文字色，背景、边框、悬停等需各自独立变量，且须在对应状态（:hover、:disabled、深色模式）中显式声明或覆盖。
怎样定义 --btn-color 才真正管用
直接在 :root 里写 --btn-color: #007bff 很容易，但这样定义后，.btn:hover 依然用不上它——因为大多数框架（如 Bootstrap）的悬停色是硬编码的，或依赖另一个变量（比如 --btn-hover-bg）。真正让 --btn-color 起作用的前提是：样式规则里明确用 var(--btn-color) 替代了固定值。
常见错误是只改了变量名，没改引用逻辑。比如你定义了 --btn-color，但按钮背景仍写死为 background-color: #007bff，那变量就只是摆设。
- 检查目标框架文档，确认它是否原生支持
--btn-color—— Bootstrap 5+ 用的是--bs-btn-color，Tailwind 则不直接暴露该变量，需通过theme.colors配置 - 若框架不支持，就自己接管：给
.btn显式声明background-color: var(--btn-color)，再在.btn:hover中覆盖该变量或直接重设background-color - 别把
--btn-color当成万能色：它通常只控制文字色；背景色、边框色、悬停色应各自有对应变量（如--btn-bg、--btn-border、--btn-hover-bg），否则一改全乱
为什么 .btn:hover 经常不响应 --btn-color
因为 --btn-color 默认不参与悬停状态的计算——除非你在 :hover 规则里主动重新赋值，或者用 CSS 变量链让它“动起来”。
例如，下面这段代码能让悬停时自动变深：
立即学习“前端免费学习笔记（深入）”；
button {
--btn-color: #007bff;
color: var(--btn-color);
}
button:hover {
--btn-color: #0056b3;
}
但注意：这种写法要求 color 始终绑定 var(--btn-color)，且不能被其他更高优先级规则覆盖。
- 如果按钮同时有
.btn-primary类，而该类内部写了color: #fff，那--btn-color就完全失效 - IE 不支持在伪类中修改自定义属性，所以这种链式响应在旧浏览器里会退化为静态色
- 更稳妥的做法是在
:hover中直接设置color: var(--btn-hover-color, #0056b3)，把悬停色单独抽成变量
如何让 --btn-color 同时适配禁用态和深色模式
禁用态（:disabled）和深色模式（@media (prefers-color-scheme: dark)）都需要独立控制 --btn-color 的值，但它们的生效时机和作用域不同。
- 禁用态建议在按钮自身上设置：
button:disabled { --btn-color: #6c757d; }，而不是靠父容器继承——因为禁用是元素级状态，不是主题级 - 深色模式应在
:root或body.dark中批量重设：@media (prefers-color-scheme: dark) { :root { --btn-color: #bbd1ff; } } - 两者叠加时，
:disabled的变量声明优先级高于媒体查询，所以禁用按钮在深色模式下仍会显示你为禁用态单独指定的颜色 - 避免用
!important强行覆盖，容易导致 JS 动态切换主题时变量无法更新
什么时候不该用 --btn-color 管所有颜色
当按钮需要同时表达「语义」和「状态」时，单个 --btn-color 会力不从心。比如一个危险按钮（.btn-danger）在悬停时既要加深红色，又要在禁用时变灰，还要在深色模式下保持可读性——这时强行共用一个变量，反而增加条件判断和维护成本。
- 推荐按职责拆分：
--btn-primary-color、--btn-danger-color、--btn-disabled-color、--btn-hover-opacity（用于透明度微调） - 组件级变量比全局变量更安全：在
.btn-group容器上设--btn-color，比污染:root更可控 - 如果项目用 Sass/Less，变量更适合用预处理器变量（
$btn-color）生成 CSS 变量，而不是手写一堆--前缀——后者一旦拼错，调试极难发现
:focus-visible 或 :active，用户在键盘操作或点击瞬间就会看到样式跳变。 
