真正要加过渡的是使用css变量的属性（如color、background-color），而非变量本身；因变量不可动画，需在具体元素上声明transition，统一用hsl()等可插值色彩模型，并通过class切换主题触发缓动。
直接给 --primary 这类 CSS 变量加 transition 没用，主题切换时颜色跳变是必然的——真正要加过渡的，是那些实际用了变量的属性，比如 color 和 background-color。
为什么 transition 写在 :root 里无效
CSS 自定义变量（--text-primary、--bg-surface）本身不是可动画属性。浏览器动画引擎只对原生样式属性做插值计算，var(--x) 是一个计算结果，不是“值本身”。就算你写 transition: --primary 0.3s，解析器会忽略它。
- 变量变更只是触发重计算，不触发重绘动画链
- :root 上声明
transition不会自动传导到子元素的color或background-color - 即使所有元素都继承
color，动画也只发生在「显式声明了 transition 的那个元素」上
必须在使用变量的元素上写 transition
主题色生效靠的是 color: var(--text-primary) 这类声明，所以过渡必须绑定在这条规则所在的选择器里。
- 例如：
.header { color: var(--text-title); transition: color 0.25s ease; } - 按钮、卡片、导航栏等所有可能变色的组件，都要单独加
transition - 不要依赖
*：虽然* { transition: color 0.25s; }看似省事，但特异性低 + 继承链长，容易导致部分文字过渡滞后或不同步 - 更稳的做法是统一加在
html或body上：html { color: var(--text-body); background-color: var(--bg-page); transition: color 0.25s, background-color 0.25s; }
避免颜色格式混用导致跳变
如果深色主题用 hsl(210, 10%, 15%)，浅色主题用 #ffffff，浏览器无法插值，会直接跳变。
- 所有主题色必须统一色彩模型：全部用
rgb()、全部用hsl()或全部用十六进制 - 推荐用
hsl()：明度（lightness）和饱和度（saturation）连续可插值，更适合主题渐变 - 确保 JS 切换主题时，只改 class（如
document.documentElement.classList.toggle('dark')），不直接操作style.colorScheme—— 后者不触发 CSS 变量重算，也不走 transition 链
深色模式系统切换也要缓动？
@media (prefers-color-scheme: dark) 本身不带动画逻辑，但它可以作为变量来源。只要你在媒体查询里设置的变量被用在「已声明 transition 的元素」上，就能缓动。
- 例如：
@media (prefers-color-scheme: dark) { :root { --text-primary: hsl(0, 0%, 90%); } } - 前提是
body或p这类元素写了transition: color 0.25s，否则照样瞬切 - 不需要额外 JS 监听
prefers-color-scheme变化，CSS 媒体查询 + transition 就够了
最容易被忽略的一点：transition 必须写在「变量被使用的那一刻」，而不是变量定义的地方；而绝大多数人第一反应都是去改 :root —— 结果调半天发现没效果，其实是根本没写对位置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
