color属性transition生效需起始/结束值均为可插值颜色（如#333、blue），禁用inherit等不可计算值；优先用class切换而非内联style；伪元素、SVG text需单独设transition；暗色模式需JS监听prefers-color-scheme并切class。
transition对color属性生效的前提条件
直接给 color 加 transition 不一定动——它只在「可计算的、有中间值的颜色」之间切换才平滑。比如从 #333 到 blue 行，但从 inherit 到 red 就卡顿或跳变，因为 inherit 本身不是具体颜色值，浏览器没法插值。
- 确保起始和结束状态都用了明确的颜色表示：十六进制、rgb()、hsl()、命名色（如
red）都行，但别混用currentcolor或transparent作起点（除非终点也是同类型且可推导） - 避免通过 JS 动态改
style.color后立刻读取offsetHeight强制重排——这会打断过渡队列，导致第一次切换无动画 - CSS 自定义属性（
--text-color）本身不触发 transition，必须配合color: var(--text-color)+ 媒体查询或 class 切换才生效
class切换比内联style更可靠
用 JS 改 element.style.color 是“强制覆盖”，浏览器会丢弃原有 transition；而切 class 让 CSS 引擎全程接管，过渡自然得多。
- 写好两套 class：
.theme-light { color: #222; transition: color 0.3s ease; }和.theme-dark { color: #eee; } - JS 里只操作
element.classList.toggle('theme-dark')，别碰style.color - 如果主题依赖 data 属性（如
data-theme="dark"），CSS 里用[data-theme="dark"] .text { color: #eee; }，同样能触发 transition
伪元素和继承颜色的坑
::before/::after 里的文字颜色、或者子元素用 color: inherit，容易“看起来没过渡”——其实是父元素颜色变了，但子元素重绘时机不同步。
- 给伪元素单独加
transition: color 0.3s ease，别指望它靠继承自动带过渡 - 如果父元素 color 过渡了，但子元素用
inherit却没动，试试在子元素上也显式写color: inherit+transition - SVG 内的
<text></text>元素默认不继承父级 color transition，得单独加transition: fill 0.3s ease（因为 SVG 用fill控制文字色）
暗色模式下 color transition 的兼容性细节
系统级暗色模式（@media (prefers-color-scheme: dark)）切换时，CSS 规则重算是同步的，但 transition 不会自动触发——它只响应 class 或属性变化，不响应媒体查询匹配状态变更。
立即学习“前端免费学习笔记（深入）”；
- 不能只靠
@media里写两组 color 就指望过渡，得配合 JS 监听prefers-color-scheme变化，再切 class - Chrome 120+ 支持
color-scheme: light dark声明，但它影响的是表单控件等原生样式，不影响自定义文本 color transition - 如果用户手动切系统主题，页面没监听到，颜色就突变——务必用
window.matchMedia('(prefers-color-scheme: dark)').addEventListener补一手
