I also cleaned up a few other adjacent areas. I removed any opacity that was paired with colours, and baked the lightness into the colours themselves. I removed any alpha values ( rgba ), too. That made it easier for me to trust them again, since some of the half-transparent colours could become backgrounds atop other elements with other background colours, and it was impossible to predict their interaction.

Before .home {

color: #0a244d;

}

.home__version {

opacity: 0.7;

} After html {

--text-color-normal: #0a244d;

--text-color-light: #8cabd9;

}

.home {

color: var(--text-color);

}

.home__version {

color: var(--text-color-light);

}

The only opacity I kept was for disabled UI elements — its presence was well-defined, and made things simpler.

Lastly, I also created a variable for shadows used on popovers, as I needed the shadows to be more prominent in the dark theme.

Expressing colours

Then, I took variables one tiny step further. I didn’t want to assume that the colours would always come from the Design world and the job of Engineering would only be to plug them in. There was a practical reason, too: playing with colours live by editing the file seemed like the best way to optimize the palette.

And so, in order to make everyone’s life easier (starting with my own), I moved to describing all the colours as HSL:

Before html {

--text-color-normal: #0a244d;

--text-color-light: #8cabd9;

} After html[data-theme='dark'] {

--text-color-normal: hsl(210, 10%, 62%);

--text-color-light: hsl(210, 15%, 35%);

--text-color-richer: hsl(210, 50%, 72%);

--text-color-highlight: hsl(25, 70%, 45%);

}

I find HSL the most satisfying way to navigate the world of colours, the three components having clearer responsibilities than the opaque and arbitrary dials of RGB (where brightness is a complicated formula rather than just a number, and saturation is buried very deeply).

But there was another benefit: I could add secondary variables for main hues of the colour theme.

html[data-theme='dark'] {

--hue: 210; /* Blue */

--accent-hue: 25; /* Orange */ --text-color-normal: hsl(var(--hue), 10%, 62%);

--text-color-highlight: hsl(var(--accent-hue), 70%, 45%);

}

I wanted to make it easy for the person coming after me to understand the relationships between colours. Even without the hue variables, HSL would make it easier; all the colours starting with hsl(210 would be immediately recognizable as a family. But making 210 another tightened the screws a little bit. It was my way of saying “feel free to experiment with colours, but the act of adding another hue should be an intentional one.”

Plus, changing the hue value was another way to test the integrity of the theme. Any colour not changing would mean a colour accidentally left behind: