给站点做主题切换时，不少人会想到用 CSS 自定义属性配合 `transition` 做颜色过渡，让浅色和深色模式间的切换不那么生硬。实际写的时候，切换瞬间常常出现半秒的闪烁、过渡卡在中间色、或者某些元素根本不动。尤其是把 `transition` 加在 `:root` 的变量上时，浏览器并不会对自定义属性的值做补间动画——它只对能插值的属性生效，而变量本身在计算值阶段就被替换掉了。更麻烦的是，如果变量被用在 `background-color`、`color` 这些属性里，`transition` 写在元素上又会被变量变化触发一次重绘，产生肉眼可见的跳变。这篇文章从渲染管线解释这个现象，并给出几种真机上不闪烁的切换写法。

## 问题复现

页面结构很简单：

```html
<body>
 <button id="toggle">切换主题</button>
 <div class="card">内容</div>
</body>
```

样式里定义主题变量并给元素加过渡：

```css
:root {
 --bg: #ffffff;
 --text: #1a1a1a;
 transition: background-color 0.3s, color 0.3s;
}

:root[data-theme="dark"] {
 --bg: #1a1a1a;
 --text: #f5f5f5;
}

body {
 background: var(--bg);
 color: var(--text);
}
```

JS 里只改一个属性：

```js
document.getElementById('toggle').addEventListener('click', () => {
 const root = document.documentElement;
 const isDark = root.dataset.theme === 'dark';
 root.dataset.theme = isDark ? '' : 'dark';
});
```

期望 `body` 的背景色平滑变化，实际是点一下直接跳过去，甚至偶尔闪一下白底。原因在于 `transition` 被设置在 `:root` 上，但 `background` 实际作用在 `body`，过渡根本没挂到会变化的属性上；另外变量切换后，浏览器在同一帧内重新计算了 `body` 的背景，中间没有过渡帧。

## 为什么变量本身不能过渡

CSS 自定义属性的值在语法上属于 `<declaration-value>`，默认按离散方式动画。即使两个值看起来颜色一样，也只在 0% 和 100% 两个点之间切换，没有中间插值。可以用 `@property` 显式注册类型来让某个变量可动画：

```css
@property --bg {
 syntax: '<color>';
 inherits: true;
 initial-value: #ffffff;
}
```

注册后 `--bg` 变成了真正的颜色类型，`transition: --bg 0.3s` 才会生效。但 `@property` 的浏览器支持虽然已经不错，在旧一点的内核里仍然缺失，而且继承链上每个用到的变量都要单独注册，维护成本不低。

## 不要对根元素挂过渡

把过渡放在使用颜色的元素上，而不是 `:root`：

```css
body {
 background: var(--bg);
 color: var(--text);
 transition: background-color 0.3s ease, color 0.3s ease;
}
```

这样变量切换时，`body` 的 `background-color` 计算值发生了变化，过渡会被触发。注意 `background` 简写里的 `background-image` 等子属性如果也变化，浏览器不一定按预期做补间，拆开写 `background-color` 更稳。

## 更可控的做法：两套类名配合属性过渡

与其依赖变量插值，不如把浅色和深色的具体颜色写在两个类里，再对使用颜色的属性做过渡。这样兼容性最好，也不会出现中间态颜色计算错误：

```css
body {
 background-color: #ffffff;
 color: #1a1a1a;
 transition: background-color 0.3s ease, color 0.3s ease;
}

body.theme-dark {
 background-color: #1a1a1a;
 color: #f5f5f5;
}
```

复杂组件里颜色多的时候，用 CSS 变量做单一数据源，但过渡仍然挂在具体属性上。变量只负责取值，动画交给属性。

## 避免切换时整页重排

有时闪烁来自布局而不是颜色。比如切换主题时顺带改了 `box-shadow`、`border` 宽度或字体，这些会触发重排，和颜色过渡混在一起看就是闪。把主题切换限制在颜色、背景、阴影这些只触发重绘的属性上，布局相关的尺寸不要跟着主题变。

如果主题切换还要切换图标或图片，记得预加载两套资源，否则图片加载完成前会有一块空白，看起来也像闪烁。

## 处理 Flash of Unstyled Content

首屏在脚本执行前就渲染了默认主题，脚本读到 `localStorage` 后再切到深色，会闪一下浅色。解决办法是在 `<head>` 里同步执行一段脚本，尽早把 `data-theme` 写到 `html` 上：

```html
<script>
 (function () {
 var saved = localStorage.getItem('theme');
 if (saved === 'dark') {
 document.documentElement.dataset.theme = 'dark';
 }
 })();
</script>
```

这段代码放在样式表之前，DOM 还没构建完，但 `documentElement` 已经存在，能避免首屏主题跳变。配合 `prefers-color-scheme` 做系统偏好检测时，同样要在这里读 `matchMedia`，而不是等 DOMContentLoaded。

## 用 View Transitions 做更自然的切换

如果不在旧浏览器上纠结，`document.startViewTransition` 可以提供基于快照的过渡，主题切换时整个页面的颜色变化会更整体：

```js
function switchTheme(next) {
 if (!document.startViewTransition) {
 applyTheme(next);
 return;
 }
 document.startViewTransition(() => applyTheme(next));
}
```

`applyTheme` 里同步修改 `data-theme`，浏览器自动捕捉前后两帧并做交叉淡入。不过要注意它默认对整个文档做快照，页面很大时可能有短暂卡顿，可以用 `view-transition-name` 把过渡范围限定在关键区域。

## 排查时看什么

打开 DevTools 的 Rendering 面板，勾上 Paint flashing，切换主题时看哪些区域在闪。如果闪的区域和颜色变化区域不一致，多半是有元素用了独立层或 `will-change`，过渡被提升到合成层后颜色变化没跟上。Layers 面板能看出哪些元素被单独提升。

另一个常见坑是 `transition` 写在 `*` 选择器上，切换主题时所有元素同时过渡，反而出现部分元素不同步。把过渡范围收窄到真正需要动画的元素，比全局过渡稳定得多。

 推荐查看天气：https://www.0dtq.com/dongxingshi/10tian.html
 推荐查看天气：https://www.0dtq.com/dongxingshi/15tian.html
 推荐查看天气：https://www.0dtq.com/dongxingshi/40tian.html
 推荐查看天气：https://www.0dtq.com/qinzhou/
 推荐查看天气：https://www.0dtq.com/qinzhou/zuotian.html
 推荐查看天气：https://www.0dtq.com/qinzhou/7tian.html
 推荐查看天气：https://www.0dtq.com/qinzhou/10tian.html
 推荐查看天气：https://www.0dtq.com/qinzhou/15tian.html
 推荐查看天气：https://www.0dtq.com/qinzhou/40tian.html
 推荐查看天气：https://www.0dtq.com/qinnan/
 推荐查看天气：https://www.0dtq.com/qinnan/zuotian.html
 推荐查看天气：https://www.0dtq.com/qinnan/7tian.html
 推荐查看天气：https://www.0dtq.com/qinnan/10tian.html
 推荐查看天气：https://www.0dtq.com/qinnan/15tian.html
 推荐查看天气：https://www.0dtq.com/qinnan/40tian.html
 推荐查看天气：https://www.0dtq.com/qinbei/
 推荐查看天气：https://www.0dtq.com/qinbei/zuotian.html
 推荐查看天气：https://www.0dtq.com/qinbei/7tian.html
 推荐查看天气：https://www.0dtq.com/qinbei/10tian.html
 推荐查看天气：https://www.0dtq.com/qinbei/15tian.html
 推荐查看天气：https://www.0dtq.com/qinbei/40tian.html
 推荐查看天气：https://www.0dtq.com/lingshan/
 推荐查看天气：https://www.0dtq.com/lingshan/zuotian.html
 推荐查看天气：https://www.0dtq.com/lingshan/7tian.html
 推荐查看天气：https://www.0dtq.com/lingshan/10tian.html
 推荐查看天气：https://www.0dtq.com/lingshan/15tian.html
 推荐查看天气：https://www.0dtq.com/lingshan/40tian.html
 推荐查看天气：https://www.0dtq.com/pubei/
 推荐查看天气：https://www.0dtq.com/pubei/zuotian.html
 推荐查看天气：https://www.0dtq.com/pubei/7tian.html
 推荐查看天气：https://www.0dtq.com/pubei/10tian.html
 推荐查看天气：https://www.0dtq.com/pubei/15tian.html
 推荐查看天气：https://www.0dtq.com/pubei/40tian.html
 推荐查看天气：https://www.0dtq.com/guigang/
 推荐查看天气：https://www.0dtq.com/guigang/zuotian.html
 推荐查看天气：https://www.0dtq.com/guigang/7tian.html
 推荐查看天气：https://www.0dtq.com/guigang/10tian.html
 推荐查看天气：https://www.0dtq.com/guigang/15tian.html
 推荐查看天气：https://www.0dtq.com/guigang/40tian.html
 推荐查看天气：https://www.0dtq.com/gangbei/
 推荐查看天气：https://www.0dtq.com/gangbei/zuotian.html
 推荐查看天气：https://www.0dtq.com/gangbei/7tian.html
 推荐查看天气：https://www.0dtq.com/gangbei/10tian.html
 推荐查看天气：https://www.0dtq.com/gangbei/15tian.html
 推荐查看天气：https://www.0dtq.com/gangbei/40tian.html
 推荐查看天气：https://www.0dtq.com/gangnan/
 推荐查看天气：https://www.0dtq.com/gangnan/zuotian.html
 推荐查看天气：https://www.0dtq.com/gangnan/7tian.html
 推荐查看天气：https://www.0dtq.com/gangnan/10tian.html
 推荐查看天气：https://www.0dtq.com/gangnan/15tian.html
 推荐查看天气：https://www.0dtq.com/gangnan/40tian.html
 推荐查看天气：https://www.0dtq.com/tantang/
 推荐查看天气：https://www.0dtq.com/tantang/zuotian.html
 推荐查看天气：https://www.0dtq.com/tantang/7tian.html
 推荐查看天气：https://www.0dtq.com/tantang/10tian.html
 推荐查看天气：https://www.0dtq.com/tantang/15tian.html
 推荐查看天气：https://www.0dtq.com/tantang/40tian.html
 推荐查看天气：https://www.0dtq.com/pingnan/
 推荐查看天气：https://www.0dtq.com/pingnan/zuotian.html
 推荐查看天气：https://www.0dtq.com/pingnan/7tian.html
 推荐查看天气：https://www.0dtq.com/pingnan/10tian.html
 推荐查看天气：https://www.0dtq.com/pingnan/15tian.html
 推荐查看天气：https://www.0dtq.com/pingnan/40tian.html
 推荐查看天气：https://www.0dtq.com/guiping/
 推荐查看天气：https://www.0dtq.com/guiping/zuotian.html
 推荐查看天气：https://www.0dtq.com/guiping/7tian.html
 推荐查看天气：https://www.0dtq.com/guiping/10tian.html
 推荐查看天气：https://www.0dtq.com/guiping/15tian.html
 推荐查看天气：https://www.0dtq.com/guiping/40tian.html
 推荐查看天气：https://www.0dtq.com/yulin/
 推荐查看天气：https://www.0dtq.com/yulin/zuotian.html
 推荐查看天气：https://www.0dtq.com/yulin/7tian.html
 推荐查看天气：https://www.0dtq.com/yulin/10tian.html
 推荐查看天气：https://www.0dtq.com/yulin/15tian.html
 推荐查看天气：https://www.0dtq.com/yulin/40tian.html
 推荐查看天气：https://www.0dtq.com/yuzhou/
 推荐查看天气：https://www.0dtq.com/yuzhou/zuotian.html
 推荐查看天气：https://www.0dtq.com/yuzhou/7tian.html
 推荐查看天气：https://www.0dtq.com/yuzhou/10tian.html
 推荐查看天气：https://www.0dtq.com/yuzhou/15tian.html
 推荐查看天气：https://www.0dtq.com/yuzhou/40tian.html
 推荐查看天气：https://www.0dtq.com/rongxian/
 推荐查看天气：https://www.0dtq.com/rongxian/zuotian.html
 推荐查看天气：https://www.0dtq.com/rongxian/7tian.html
 推荐查看天气：https://www.0dtq.com/rongxian/10tian.html
 推荐查看天气：https://www.0dtq.com/rongxian/15tian.html
 推荐查看天气：https://www.0dtq.com/rongxian/40tian.html
 推荐查看天气：https://www.0dtq.com/luchuan/
 推荐查看天气：https://www.0dtq.com/luchuan/zuotian.html
 推荐查看天气：https://www.0dtq.com/luchuan/7tian.html
 推荐查看天气：https://www.0dtq.com/luchuan/10tian.html
 推荐查看天气：https://www.0dtq.com/luchuan/15tian.html
 推荐查看天气：https://www.0dtq.com/luchuan/40tian.html
 推荐查看天气：https://www.0dtq.com/bobai/
 推荐查看天气：https://www.0dtq.com/bobai/zuotian.html
 推荐查看天气：https://www.0dtq.com/bobai/7tian.html
 推荐查看天气：https://www.0dtq.com/bobai/10tian.html
 推荐查看天气：https://www.0dtq.com/bobai/15tian.html
 推荐查看天气：https://www.0dtq.com/bobai/40tian.html
 推荐查看天气：https://www.0dtq.com/xingye/
 推荐查看天气：https://www.0dtq.com/xingye/zuotian.html
 推荐查看天气：https://www.0dtq.com/xingye/7tian.html
 推荐查看天气：https://www.0dtq.com/xingye/10tian.html
 推荐查看天气：https://www.0dtq.com/xingye/15tian.html
 推荐查看天气：https://www.0dtq.com/xingye/40tian.html
 推荐查看天气：https://www.0dtq.com/beiliu/
 推荐查看天气：https://www.0dtq.com/beiliu/zuotian.html
 推荐查看天气：https://www.0dtq.com/beiliu/7tian.html
 推荐查看天气：https://www.0dtq.com/beiliu/10tian.html
 推荐查看天气：https://www.0dtq.com/beiliu/15tian.html
 推荐查看天气：https://www.0dtq.com/beiliu/40tian.html
 推荐查看天气：https://www.0dtq.com/baise/
 推荐查看天气：https://www.0dtq.com/baise/zuotian.html
 推荐查看天气：https://www.0dtq.com/baise/7tian.html
 推荐查看天气：https://www.0dtq.com/baise/10tian.html
 推荐查看天气：https://www.0dtq.com/baise/15tian.html
 推荐查看天气：https://www.0dtq.com/baise/40tian.html
 推荐查看天气：https://www.0dtq.com/youjiang/
 推荐查看天气：https://www.0dtq.com/youjiang/zuotian.html
 推荐查看天气：https://www.0dtq.com/youjiang/7tian.html
 推荐查看天气：https://www.0dtq.com/youjiang/10tian.html
 推荐查看天气：https://www.0dtq.com/youjiang/15tian.html
 推荐查看天气：https://www.0dtq.com/youjiang/40tian.html
 推荐查看天气：https://www.0dtq.com/tianyang/
 推荐查看天气：https://www.0dtq.com/tianyang/zuotian.html
 推荐查看天气：https://www.0dtq.com/tianyang/7tian.html
 推荐查看天气：https://www.0dtq.com/tianyang/10tian.html
 推荐查看天气：https://www.0dtq.com/tianyang/15tian.html
 推荐查看天气：https://www.0dtq.com/tianyang/40tian.html
 推荐查看天气：https://www.0dtq.com/tiandong/
 推荐查看天气：https://www.0dtq.com/tiandong/zuotian.html
 推荐查看天气：https://www.0dtq.com/tiandong/7tian.html
 推荐查看天气：https://www.0dtq.com/tiandong/10tian.html
 推荐查看天气：https://www.0dtq.com/tiandong/15tian.html
 推荐查看天气：https://www.0dtq.com/tiandong/40tian.html
 推荐查看天气：https://www.0dtq.com/pingguo/
 推荐查看天气：https://www.0dtq.com/pingguo/zuotian.html
 推荐查看天气：https://www.0dtq.com/pingguo/7tian.html
 推荐查看天气：https://www.0dtq.com/pingguo/10tian.html
 推荐查看天气：https://www.0dtq.com/pingguo/15tian.html
 推荐查看天气：https://www.0dtq.com/pingguo/40tian.html
 推荐查看天气：https://www.0dtq.com/debao/
 推荐查看天气：https://www.0dtq.com/debao/zuotian.html
 推荐查看天气：https://www.0dtq.com/debao/7tian.html
 推荐查看天气：https://www.0dtq.com/debao/10tian.html
 推荐查看天气：https://www.0dtq.com/debao/15tian.html
 推荐查看天气：https://www.0dtq.com/debao/40tian.html
 推荐查看天气：https://www.0dtq.com/jingxi/
 推荐查看天气：https://www.0dtq.com/jingxi/zuotian.html
 推荐查看天气：https://www.0dtq.com/jingxi/7tian.html
 推荐查看天气：https://www.0dtq.com/jingxi/10tian.html
 推荐查看天气：https://www.0dtq.com/jingxi/15tian.html
 推荐查看天气：https://www.0dtq.com/jingxi/40tian.html
 推荐查看天气：https://www.0dtq.com/napo/
 推荐查看天气：https://www.0dtq.com/napo/zuotian.html
 推荐查看天气：https://www.0dtq.com/napo/7tian.html
 推荐查看天气：https://www.0dtq.com/napo/10tian.html
 推荐查看天气：https://www.0dtq.com/napo/15tian.html
 推荐查看天气：https://www.0dtq.com/napo/40tian.html
 推荐查看天气：https://www.0dtq.com/lingyun/
 推荐查看天气：https://www.0dtq.com/lingyun/zuotian.html
 推荐查看天气：https://www.0dtq.com/lingyun/7tian.html
 推荐查看天气：https://www.0dtq.com/lingyun/10tian.html
 推荐查看天气：https://www.0dtq.com/lingyun/15tian.html
 推荐查看天气：https://www.0dtq.com/lingyun/40tian.html
 推荐查看天气：https://www.0dtq.com/leye/
 推荐查看天气：https://www.0dtq.com/leye/zuotian.html
 推荐查看天气：https://www.0dtq.com/leye/7tian.html
 推荐查看天气：https://www.0dtq.com/leye/10tian.html
 推荐查看天气：https://www.0dtq.com/leye/15tian.html
 推荐查看天气：https://www.0dtq.com/leye/40tian.html
 推荐查看天气：https://www.0dtq.com/tianlin/
 推荐查看天气：https://www.0dtq.com/tianlin/zuotian.html
 推荐查看天气：https://www.0dtq.com/tianlin/7tian.html
 推荐查看天气：https://www.0dtq.com/tianlin/10tian.html
 推荐查看天气：https://www.0dtq.com/tianlin/15tian.html
 推荐查看天气：https://www.0dtq.com/tianlin/40tian.html
 推荐查看天气：https://www.0dtq.com/xilin/
 推荐查看天气：https://www.0dtq.com/xilin/zuotian.html
 推荐查看天气：https://www.0dtq.com/xilin/7tian.html
 推荐查看天气：https://www.0dtq.com/xilin/10tian.html
 推荐查看天气：https://www.0dtq.com/xilin/15tian.html
 推荐查看天气：https://www.0dtq.com/xilin/40tian.html
 推荐查看天气：https://www.0dtq.com/longlin/
 推荐查看天气：https://www.0dtq.com/longlin/zuotian.html
 推荐查看天气：https://www.0dtq.com/longlin/7tian.html
 推荐查看天气：https://www.0dtq.com/longlin/10tian.html
 推荐查看天气：https://www.0dtq.com/longlin/15tian.html
 推荐查看天气：https://www.0dtq.com/longlin/40tian.html
 推荐查看天气：https://www.0dtq.com/hezhou/
 推荐查看天气：https://www.0dtq.com/hezhou/zuotian.html
 推荐查看天气：https://www.0dtq.com/hezhou/7tian.html
 推荐查看天气：https://www.0dtq.com/hezhou/10tian.html
 推荐查看天气：https://www.0dtq.com/hezhou/15tian.html
 推荐查看天气：https://www.0dtq.com/hezhou/40tian.html
 推荐查看天气：https://www.0dtq.com/babu/
 推荐查看天气：https://www.0dtq.com/babu/zuotian.html
 推荐查看天气：https://www.0dtq.com/babu/7tian.html
 推荐查看天气：https://www.0dtq.com/babu/10tian.html
 推荐查看天气：https://www.0dtq.com/babu/15tian.html

给站点做主题切换时，不少人会想到用 CSS 自定义属性配合 transition 做颜色过渡，让浅色和深色模式间的切换不那么生硬。实际写的时候，切换瞬间常常出现半秒的闪烁、过渡卡在中间色、或者某些元素根本不动。尤其是把 transition 加在 :root 的变量上时，浏览器并不会对自定义属性的值做补间动画——它只对能插值的属性生效，而变量本身在计算值阶段就被替换掉了。更麻烦的是，如果变量被用在 background-color、color 这些属性里，transition 写在元素上又会被变量变化触发一次重绘，产生肉眼可见的跳变。这篇文章从渲染管线解释这个现象，并给出几种真机上不闪烁的切换写法。

用 CSS 自定义属性实现主题切换时，为什么你的过渡动画会闪烁？

给站点做主题切换时，不少人会想到用 CSS 自定义属性配合 transition 做颜色过渡，让浅色和深色模式间的切换不那么生硬。实际写的时候，切换瞬间常常出现半秒的闪烁、过渡卡在中间色、或者某些元素根本不动。尤其是把 transition 加在 :root 的变量上时，浏览器并不会对自定义属性的值做补间动画——它只对能插值的属性生效，而变量本身在计算值阶段就被替换掉了。更麻烦的是，如果变量被用在

人工智能

主题切换时CSS变量过渡不生效导致闪烁，根因是自定义属性无法插值动画。文章从渲染管线解析问题，给出过渡挂在元素属性上、@property注册变量、两套类名切换等不闪烁方案，并涵盖首屏防闪、View Transitions应用及DevTools排查技巧。

代码解释

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

用 CSS 自定义属性实现主题切换时，为什么你的过渡动画会闪烁？-腾讯云开发者社区-腾讯云

用 CSS 自定义属性实现主题切换时，为什么你的过渡动画会闪烁？

用 CSS 自定义属性实现主题切换时，为什么你的过渡动画会闪烁？

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐