Skip to main content

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.