# 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](https://getbootstrap.com/docs/4.6/utilities/colors/) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme). 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.