应使用语义化CSS类名和自定义属性（如--color-success）管理状态色，配合prefers-color-scheme媒体查询实现深色模式自动适配，避免内联样式与颜色硬编码，确保状态传达一致、可维护且符合无障碍标准。
success / warning / error 这类状态色在 CSS 中怎么定义
直接用语义化类名比写 color: #28a745 更可持续。CSS 里没有内置的「成功色」概念，全靠你自己约定和维护，但可以借助自定义属性（--color-success）把语义和值解耦。
-
--color-success推荐用#28a745（Bootstrap 默认绿），不是因为它是“标准”，而是它在浅底色上对比度 ≥ 4.5，满足 WCAG AA -
--color-warning别用纯黄#ffc107，文字叠加时可读性差；加一点橙调如#fd7e14更稳 -
--color-error避免#dc3545在深色模式下直接失效——得配color-scheme: light dark或媒体查询兜底
怎么让状态色自动适配深色模式
硬写两套 color 值容易漏改。用 @media (prefers-color-scheme: dark) 包裹变量重定义更可靠，且支持渐进增强。
:root {
--color-success: #28a745;
--color-warning: #fd7e14;
--color-error: #dc3545;
}
@media (prefers-color-scheme: dark) {
:root {
--color-success: #43d469;
--color-warning: #ffbb33;
--color-error: #f85a5a;
}
}
注意：不要只改文字色，图标、边框、背景也得同步换，否则状态传达断裂。比如 .status-badge.error 的 border-color 和 background-color 必须引用同一变量。
为什么别在 HTML 里写 style="color: #28a745"
内联样式锁死颜色值，后续想统一调亮 10% 或切到深色主题，就得全局搜索替换，极易出错。更麻烦的是，它会覆盖 CSS 变量和媒体查询逻辑，让深色模式失效。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
<span style="color: #28a745">成功</span> - 正确写法：
<span class="text-success">成功</span>，再通过.text-success { color: var(--color-success); }控制 - 如果组件库强制你传色值（比如 Ant Design 的
status属性），优先用其预设字符串（"success"），而非手填 hex
按钮禁用态 + 状态色的组合陷阱
禁用按钮（disabled）默认变灰，但如果你同时加了 .btn-error，视觉上「红色+灰色」会产生冲突——用户可能误判这是“红色的禁用态”，而不是“禁用的错误按钮”。
- 方案一：禁用时统一走
opacity: 0.5+filter: grayscale(50%)，保留原始色相但降饱和，语义不丢失 - 方案二：为禁用态单独定义变量，如
--color-error-disabled: #a8323e，避免混用正常态色值 - 测试点：用浏览器 DevTools 切换
:disabled状态，看是否仍能清晰分辨「状态」和「可用性」两个维度
状态色不是装饰，是信息通道。一旦和禁用、加载、聚焦等其他状态叠加，语义就容易打架——这时候变量命名和类职责划分比颜色本身更重要。
