---
title: "Theme switch animates every color (ui/theme-switch-transitions)"
description: "Without disableTransitionOnChange each transitioned element fades to the new theme separately."
url: http://localhost:4173/rules/ui/theme-switch-transitions
updated: 2026-11-11
---

# Theme switch animates every color

> `ui/theme-switch-transitions` is a vetd rule. It flags: Theme switch animates every color. It runs on every `check`, together with the TypeScript check.

| Fact | Value |
| --- | --- |
| Rule id | `ui/theme-switch-transitions` |
| Severity | warning |
| Group | Interface craft: accessibility, motion and mobile |
| Tags | performance |

## Why it matters

Without disableTransitionOnChange each transitioned element fades to the new theme separately.

## How to fix it

<ThemeProvider disableTransitionOnChange>.

## Credit

Based on work by:

- [Paco Coursey](https://paco.me): Documented that transitioning every element on theme toggle hurts rendering and wrote next-themes, which offers disableTransitionOnChange.

## References

- [Disable transitions on theme toggle](https://paco.me/writing/disable-theme-transitions), Paco Coursey
- [next-themes](https://github.com/pacocoursey/next-themes), GitHub (pacocoursey)

## See it

Demos in the vetd Lab:

- [Snap the theme, don't fade it](http://localhost:4173/lab/paco-coursey/snap-the-theme)

## Related rules

- [`ui/transition-all`](http://localhost:4173/rules/ui/transition-all.md)

## Get this text from vetd

MCP: call `explain` with `{ "diagnosticId": "ui/theme-switch-transitions" }`. CLI: `npx vetd explain ui/theme-switch-transitions`.

---

[All 92 rules](http://localhost:4173/rules.md) · Previous: [`ui/hover-font-weight`](http://localhost:4173/rules/ui/hover-font-weight.md) · Next: [`ui/validate-late`](http://localhost:4173/rules/ui/validate-late.md)