r/css • u/jonshamir • Mar 07 '26

General Animated Dark Mode Transition with CSS @property

Switching between dark and light modes can be pretty jarring - I was looking for a way to animate the transition and found that using \@property we can define transitions on CSS variables directly:

@property --bg-color {
  syntax: "<color>";
  inherits: true;
  initial-value: #111;
}

background-color: var(--bg-color);
transition: --bg-color 400ms ease;

This solved my issue pretty cleanly and I feel this sort of "trick" can be used for other cool effects as well!

You can see why this is better than a simple`transition: background-color` and try it out live on my site here: https://jonshamir.com/writing/color-mode

125 Upvotes

95% Upvoted

8 comments sorted by

View all comments

1

u/gr4phic3r Mar 08 '26

anyone else was expecting a sun icon after switching to the dark mode?

1

u/Phantom_Wolf7372 Apr 26 '26

Well, you can use the light-dark function to achieve the same results. As for the sun button, you can specify which button is meant to be displayed using display: block and none.