Creating a Bootstrap dark CSS colour scheme by inverting the colour values of an existing light colour scheme

I have recently added a dark colour scheme to my website. I should have included a dark colour scheme when I rebuilt my website last year, but for whatever reason, I didn't. This meant I had to create the dark scheme as a kind of afterthought, which in hindsight was not super clever, but it is what it is.

When I rebuilt my website, I opted to use the Bootstrap CSS framework. I went with Bootstrap as I already use it for a number of other projects and I'm familiar with it, so I was able to rebuild my website's front-end relatively quickly. The issue with the version of Bootstrap I opted for is that it doesn't support light/dark modes out-of-the-box.

To achieve a dark colour scheme I copied my website's light scheme Sass directory and started inverting the values for colour/grayscale variables. For example, $black = #000; became $black = #FFF; and $white = #FFF; became $white = #000;. By doing this I was able to leave the CSS class names untouched in my website's HTML code, which is is fairly important as I use Bootstrap's colour utility classes for setting background and foreground colours.

With the inverted colour values, it didn't take too long to achieve a fairly nice looking (highly subjective) dark mode colour scheme, however, I did hit a problem; there are areas on my website where I use the classes bg-dark and text-light to feature a dark background with light text and I wanted these areas to look the same in both the light and dark schemes, but with the inverted colour values, it obviously didn't work. To combat this shortcoming, I created a couple more colour variables, $darkdark and $lightlight. These variables have the same values for both light and dark schemes. Once the variables were created, I edited the HTML to use the classes bg-darkdark and text-lightlight where required. It's not particularly pretty, but it works.

Once the new dark colour scheme was created and the resulting CSS file was compiled, I had to adjust my website to serve the dark scheme if the user's browser offered the prefers-color-scheme: dark CSS media query. I achieved this with the following link elements:

<link rel="stylesheet" href="bootstrap.css" media="(prefers-color-scheme: light)" />
<link rel="stylesheet" href="bootstrap-dark.css" media="(prefers-color-scheme: dark)" />

This post serves as a reminder to myself about how I did this. I mean, naming a variable $black and giving it a hex value for white is a bit like one of those tricky mind puzzles and I figured I may need to remind myself of this at some point in the future.