Use CSS Variables with Calc and HSL to Implement Dark Mode

Jhey Tompkins: [0:00] We have four colors, a color for the background, and a color for color, and then a dark variant of each. When we tap our page, the colors alternate between the variants. This is made possible with a dark class name that changes the background and color to the dark variant. If we tap the page, we can see the class being toggled.

[0:18] We can remove the rule using the dark class name, and then we can introduce a dark variable with the default value of . If we look our bg variable and bg--dark variable, the difference is in the lightness, which is 80% and 20%.

[0:32] We could refactor this to be one variable using hsl and calc with our new dark variable. We can use calc ((80 - var(--dark) * 60)) * 1%)). We can use dark as a binary value, either 1 or . The difference between 80% and 20% is 60, so times --dark by 60 and subtract that from 80 to get the correct lightness.

[0:59] Remove our deprecated background variables, and if we set dark to 1, our page now uses the darker background variant. If we set it back to , it uses the light variant.

[1:09] Let's do the same for the color variable. Here we have hsl (190, 20%, calc((30 + (var(--dark) * 30)) * 1%)). Remove the deprecated color variables, and if we change dark to 1, we get the light color and the dark background. If we change dark to , we get the light background and the dark color.

[1:33] The page has been updated to toggle that dark variable on tap. We can see the dark variable on the HTML tag change as the page is tapped between 1 and .

[1:44] In review, we can use CSS variables using the hsl color space and calc to implement dark mode where we use a CSS variable as a binary value that can be used for arithmetic to calculate the lightness in our colors. This could also be extended to the hue and the saturation and isn't limited to dark mode. It could also be used for theme switching.