all your color variables are belong to us
The perfect use of css-variables: a consistent color array. But the consistency is not part of the variables, though; it‘s in the usage. In maintaining a rigorous order and avoid any non-variable color definition, we can color-scheme in no time and provide a dark-mode palette by changing 15 values in one spot. It‘s also a lot safer than search&replace white for example. Once you see a stray color definition outside the :root variables like white or rgba(240,60,128,.75) we‘re in jungle mode again.
Some of the colors are identical?! Yes, at least here they are. The color definitions (variables) are intended to be somewhat semantic, and the colors‘ names describe the function or place, not the color. Like page background, navigation (here both white), boxes and footer (same grey here), an overall text-color (which is similar to 50% black) and the lighter version that is close to 30% black. It‘s up to you if you use all of these or just do away with all transparent colors and throw out hilite and notify because accent is enough. You‘re actually very much encouraged to edit _base.scss and change all the color variables…
Just in case you are wondering: these are colors (ok, whites) for dark backgrounds, not dark-mode. In dark mode, this is white with greys in it.
All colors have a twin version inside the @media screen and (prefers-color-scheme: dark) definition in _base.scss where the whites, greys and blacks are pretty much inverted versions and some "real" colors are darker versions of the bright ones.
This is a rather functionalistc approach, and there sure can be situations where just a "darkened version" turns out to be something so different that it won‘t fit the original design.
Also, the same images appear in a black/dark environment which may or may not work. Here picture srcset comes in handy, where you can add dimmed or nightime versions of your images with media="(prefers-color-scheme: dark)" – I decided to go with mid-grey black and white photos to avoid the issue here.
It‘s up to you to decide if this is still prototype/wireframe or small site territory.
Where applicable @supports (color: color(display-p3 1 1 1)) display-p3 definitions are in place as an option for modern displays, where these colors really pop. Of course that is only useful for really saturated colors, everything inside the sRGB gamut (including everything greyscale) wouldn‘t be any different.
Disclaimer: Everything here is free to use, but no responsibility is taken for any outcome. Questions & Suggestions: ak at alexkoch dot net (you‘re not a robot, I know). And I don‘t use cookies. Version history