dark-mode scheme toggle transition flash performance fouc dark/light mode toggle theme scheme switching preventing color transition flash all elements flash/transition during scheme switch dark mode toggle causes janky color animation need instant scheme change without FOUC
Scheme Toggle
Fetch snippet JSON:
curl https://webspire.de/snippets/interactions/scheme-toggle.json Preview
Background
Quick Start
document.body.classList.add("scheme-toggling")Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- Size
- 109 bytes · 5 lines
- Classes
-
.scheme-toggling
dark-mode scheme toggle transition flash performance fouc
Add .scheme-toggling to <body> before changing the color scheme, then remove it after a frame. This kills all CSS transitions, preventing every element from visibly transitioning colors during a dark/light mode switch.
JavaScript usage
function toggleScheme(scheme) {
document.body.classList.add('scheme-toggling');
document.documentElement.setAttribute('data-scheme', scheme);
requestAnimationFrame(() => {
document.body.classList.remove('scheme-toggling');
});
}