CSS Tip

Color switch using color-mix()

Use the new color-mix() function to create a color switch with a compact code

:root {
  --colors: black, white; /* define your colors like an array */
  --i: 0; /* black text / white background */
  
  --_color:    color-mix(in hsl, var(--colors) calc(var(--i)*100%));
  --_bg-color: color-mix(in hsl, calc(var(--i)*100%) var(--colors));
}
@media (prefers-color-scheme: dark) {
  :root {
    --i: 1; /* white text / black background */
  }
}

body {
  color: var(--_color);
  background: var(--_bg-color);
}

See the Pen A color switch using color-mix() by Temani Afif (@t_afif) on CodePen.

More CSS Tips