GODRICH
#css-animation#button#loader#transition#scroll#dashboard#ui#design-trends

9 CSS Dark Mode Toggle Animations, One Line Each

· Godrich · 9 items · 14 min read

FeedbackSCSSCSS onlyHoverCTA

A css dark mode toggle flips a site's color scheme when it's switched, usually by toggling one class or custom property.

Sun/moon icon swap01 dark-mode-toggle-sun-moon Sliding knob02 dark-mode-toggle-slide-knob Circular reveal via View Transitions03 dark-mode-toggle-circle-expand One-flip light and dark swap04 dark-mode-toggle-light-dark-fn Eclipse mask transition05 dark-mode-toggle-eclipse-mask Flip-card transition06 dark-mode-toggle-flip-card Icon morph transition07 dark-mode-toggle-icon-morph Whole-page color fade08 dark-mode-toggle-color-fade Light/dark/auto 3-state09 dark-mode-toggle-three-state

Auto-plays · click a tile to jump to its section · all nine in one zip

The order runs from the most familiar shape to the least. 01, 02, 06, and 07 are variations on a physical switch — an icon, a knob, a card, a set of rays — the kind of control a reader already expects to find in a header. 03 and 05 spend that familiarity on a bigger reveal, sweeping the whole panel into its new scheme instead of just flipping one small shape. 04 sets the icon aside entirely and shows the one CSS value doing the real work underneath any of the eight others, and 08 and 09 close it out — one page-wide fade, one switch with a third option beyond just light and dark.

01Sun/moon icon swap

What it does

A sun icon rotates and fades out while a moon icon fades in behind it at the same time, the two shapes cross-fading rather than one path morphing into the other.

Sun/moon icon swap
Open in a new tab

01 · Sun/moon icon swap — Measured area 26.961% · moving frames 11/23Original by GODRICH · SCSS and React ship in the zip · See the password

400ms회전 180°크로스페이드

When to use it

It's the toggle shape most readers already recognize from browser chrome and OS settings, which is why it reads instantly in a header or a settings menu.

.toggle__sun {
  background: $stage-yellow;
  transform: rotate(0deg);
  animation: sun $duration $easing infinite;
}
.toggle__moon {
  background: $subject-cream;
  opacity: 0;
  transform: rotate(-90deg);
  animation: moon $duration $easing infinite;
}
@keyframes sun {
  0%   { opacity: 1; transform: rotate(0deg); }
  50%  { opacity: 0; transform: rotate(90deg); }
  100% { opacity: 1; transform: rotate(0deg); }
}

02Sliding knob

What you see

A round knob slides across a pill-shaped track while the track's own background color shifts underneath it, so the switch reads as one continuous move instead of two separate changes happening at once.

Sliding knob
Open in a new tab

02 · Sliding knob — Measured area 26.944% · moving frames 14/23Original by GODRICH · SCSS and React ship in the zip · See the password

28px 트랙느리게 600ms그림자 추가

Where it fits

It suits a settings screen or the right edge of a nav bar — anywhere a toggle switch is already the shape a reader expects.

.knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: $color;
  transform: translateX(0);
  animation: knob-slide $duration $easing infinite;
}
@keyframes knob-slide {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(20px); }
  100% { transform: translateX(0); }
}

03Circular reveal via View Transitions

The motion

A circle grows outward from the toggle and sweeps the whole panel into its new color scheme in one motion, the same silhouette the View Transitions API draws when it clips a snapshot of the old page while the new one grows in behind it.

Circular reveal via View Transitions
Open in a new tab

03 · Circular reveal via View Transitions — Measured area 26.663% · moving frames 19/23Original by GODRICH · SCSS and React ship in the zip · See the password

중앙에서1.2배속사각 확산

Good places for it

It earns its extra weight on a landing hero or an app's first screen, somewhere a single dramatic switch is worth noticing.

.wipe {
  position: absolute;
  top: -60px;
  right: -60px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: $color;
  transform-origin: 78% 22%;
  transform: scale(0);
  animation: wipe-scale $duration $easing infinite;
}
@keyframes wipe-scale {
  0%   { transform: scale(0); }
  50%  { transform: scale(1); }
  100% { transform: scale(0); }
}

04One-flip light and dark swap

What it does

Two swatches swap places to stand in for what a single color-scheme declaration does site-wide: once it's set, the light-dark() function picks the right value for background, text, or a border in one line each, with nothing else to toggle by hand.

One-flip light and dark swap
Open in a new tab

04 · One-flip light and dark swap — Measured area 26.944% · moving frames 14/23Original by GODRICH · SCSS and React ship in the zip · See the password

변수 2개전환 300ms테두리 포함

When to use it

It's built for a component library or a design-system token file, where dozens of colors need to flip together and none of them should need their own media query.

.chip__swatch--light {
  background: $color;
  opacity: 1;
  animation: face-light $duration $easing infinite;
}
.chip__swatch--dark {
  background: $stage-yellow;
  opacity: 0;
  animation: face-dark $duration $easing infinite;
}
@keyframes face-light {
  0%, 15%   { opacity: 1; }
  40%, 60%  { opacity: 0; }
  85%, 100% { opacity: 1; }
}

05Eclipse mask transition

What you see

A dark, moon-shaped disc slides in from the side and settles directly over a sun icon, the two shapes overlapping like an eclipse instead of one simply fading into the other.

Eclipse mask transition
Open in a new tab

05 · Eclipse mask transition — Measured area 26.797% · moving frames 11/23Original by GODRICH · SCSS and React ship in the zip · See the password

500ms그림자 진하게역방향 재생

Where it fits

It's built for a toggle that wants to be noticed — a brand's own dark-mode button, or a corner of a product page introducing the feature for the first time.

.sun {
  position: absolute;
  bottom: 16px;
  left: 18px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: $color;
}
.mask {
  position: absolute;
  bottom: 12px;
  left: 4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: $stage-ink;
  transform: translateX(-60px);
  animation: mask-slide $duration $easing infinite;
}
@keyframes mask-slide {
  0%, 15%   { transform: translateX(-60px); }
  40%, 60%  { transform: translateX(4px); }
  85%, 100% { transform: translateX(-60px); }
}

06Flip-card transition

The motion

The whole toggle is a card with two faces glued back to back inside a perspective wrapper, and rotateY spins it from a sun face to a moon face and back again, the same motion as flipping a coin.

Flip-card transition
Open in a new tab

06 · Flip-card transition — Measured area 22.674% · moving frames 17/23Original by GODRICH · SCSS and React ship in the zip · See the password

600msperspective 800px그림자 따라 이동

Good places for it

It works as a card-style setting switch or inside a profile menu, wherever the control already looks like a small object rather than a flat rectangle.

.card {
  perspective: 900px;
}
.card__inner {
  position: relative;
  transform-style: preserve-3d;
  animation: flip $duration $easing infinite;
}
.card__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}
.card__face--back {
  transform: rotateY(180deg);
}
@keyframes flip {
  0%, 15%   { transform: rotateY(0deg); }
  50%       { transform: rotateY(180deg); }
  85%, 100% { transform: rotateY(360deg); }
}

07Icon morph transition

What it does

Six rays fold flat around a central circle while its color and opacity shift underneath them, so the sun's points retract into what reads as one of the moon's craters instead of two separate icons trading places.

Icon morph transition
Open in a new tab

07 · Icon morph transition — Measured area 0.483% · moving frames 10/23Original by GODRICH · SCSS and React ship in the zip · See the password

SVG path350mseasing 스냅

When to use it

It's built for an icon-only button — a toolbar toggle where a label doesn't fit and the icon has to do all the explaining on its own.

.icon__ray {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 8px;
  border-radius: 2px;
  background: $color;
  transform-origin: 50% 17px;
  animation: ray-fold $duration $easing infinite;
}
@keyframes ray-fold {
  0%, 15%   { opacity: 1; transform: rotate(calc(var(--i) * 60deg)) translateY(-17px) scaleY(1); }
  40%, 60%  { opacity: 0; transform: rotate(calc(var(--i) * 60deg)) translateY(-17px) scaleY(0); }
  85%, 100% { opacity: 1; transform: rotate(calc(var(--i) * 60deg)) translateY(-17px) scaleY(1); }
}

08Whole-page color fade

What you see

Background and text sit as two stacked layers that cross-fade on the same curve, so the page trades one full color scheme for the other instead of any single property being interpolated in place.

Whole-page color fade
Open in a new tab

08 · Whole-page color fade — Measured area 26.961% · moving frames 12/23Original by GODRICH · SCSS and React ship in the zip · See the password

800ms필터 blur 2px즉시 전환

Where it fits

It fits a full document view — a reader, a viewer, or anywhere the whole canvas needs to change at once rather than one button doing it alone.

.panel__face--light {
  background: $subject-cream;
  color: $subject-ink;
  opacity: 1;
  animation: face-light $duration $easing infinite;
}
.panel__face--dark {
  background: $stage-ink;
  color: $subject-cream;
  opacity: 0;
  animation: face-dark $duration $easing infinite;
}
@keyframes face-light {
  0%, 15%   { opacity: 1; }
  40%, 60%  { opacity: 0; }
  85%, 100% { opacity: 1; }
}

09Light/dark/auto 3-state

The motion

A pill-shaped track with three slots moves a single indicator thumb through light, dark, and auto in sequence, translateX doing all the work instead of three buttons standing in for three states.

Light/dark/auto 3-state
Open in a new tab

09 · Light/dark/auto 3-state — Measured area 1.517% · moving frames 8/23Original by GODRICH · SCSS and React ship in the zip · See the password

3단 트랙350ms인디케이터 그림자

Good places for it

It belongs on a detailed settings page or a desktop app's preferences, anywhere a reader expects a third option beyond a plain on/off.

.segmented__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 22px;
  border-radius: $r-pill;
  background: $color;
  transform: translateX(0);
  animation: thumb-move $duration $easing infinite;
}
@keyframes thumb-move {
  0%, 22%  { transform: translateX(0); }
  33%, 55% { transform: translateX(32px); }
  66%, 88% { transform: translateX(64px); }
  100%     { transform: translateX(0); }
}

Where it breaks — the traps

Why the preview loops

All nine flip from light to dark and back to light on their own inside the grid above, on a fixed two-second loop — there's nothing to click up there, only something to watch, because a fixed-size iframe with no real page behind it has no scroll position or click target to react to. The loop stands in for the interaction; the vanilla files in the zip are the ones that actually respond to a press.

Trap two — color-scheme on the root

A second trap catches anyone who only recolors the background and the text and stops there: without setting color-scheme on the root element, native form controls, scrollbars, and even the browser's own UI keep rendering light, so the page looks only half switched no matter how dark the body itself gets. 04's light-dark() approach depends on that same property being declared first — the function reads color-scheme to decide which of its two values to hand back — and its own support trails behind it: Chrome ships light-dark() from version 123, Safari from 17.5, and Firefox from 120, well after color-scheme itself, which every modern browser already understands. Anyone shipping 04 to production should open the zip and read style.css directly, and it unlocks with kjdwbr3q typed in by hand rather than guessed.

Trap three — hard-coded offsets

The third trap is easy to miss on 03 and 05 specifically: both position their moving shape with an absolute top/left/right pulled straight from the demo's fixed panel size, so dropping either one into a wider real card without adjusting those offsets leaves the circle or the mask centered on the wrong spot entirely.

Accessibility

Reduced motion

Every one of the nine respects prefers-reduced-motion, but the fallback isn't the same shape twice. 01, 02, 05, 06, and 09 just stop moving and settle on whichever state they were already in — the sun stays a sun, the knob stays put — since nothing about those five is decorative enough to keep once motion is off. 03's circle never grows and 07's rays never fold; both jump straight to the finished shape instead of playing the reveal. MDN's guide to prefers-reduced-motion covers how widely browsers support the query itself.

@media (prefers-reduced-motion: reduce) {
  .toggle__sun, .toggle__moon, .knob, .wipe, .mask,
  .card__inner, .icon__ray, .segmented__thumb { animation: none !important; }
}

Nine more patterns like these live in the CSS category, and what this site actually ships gets explained on the about page.

FAQ

Do I need JavaScript for a css dark mode toggle?

Not for the motion itself. Every animation in this set runs on CSS transforms and opacity, so a css dark mode switch without javascript is entirely possible for the transition itself — you still need one line of JS (or a form control) to actually flip a class or attribute, since CSS alone can't remember a user's choice between visits.

What's the difference between a dark mode toggle and a dark mode switch?

Nothing structural — "toggle" and "switch" describe the same two-state control, and search engines treat dark theme toggle css and css dark mode switch as the same query. The naming difference usually just tracks which shape the design uses: a switch tends to look like 02's sliding knob, while a toggle covers icon-based versions like 01 and 07 too.

Can I add a css dark mode toggle button to an existing site without a redesign?

Yes, as long as the site's colors already route through custom properties. Any of these nine can sit inside a header as an html css dark mode toggle button on its own, and swapping the two color values it touches is a smaller change than restyling every component by hand.

Enter the archive password

The password is inside this article. You will find it as you read.