{
    "title": "Creating a Bootstrap dark CSS colour scheme by inverting the colour values of an existing light colour scheme",
    "slug": "creating-a-bootstrap-dark-css-colour-scheme-by-inverting-the-colour-values-of-an-existing-light-colour-scheme",
    "excerpt": "I recently added a dark mode to my website. This post details how I achieved this by copying the existing light scheme's CSS and inverting the colour values.",
    "body": "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.\n\nWhen 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.\n\nTo 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.\n\nWith 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.\n\nOnce 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:\n```\n<link rel=\"stylesheet\" href=\"bootstrap.css\" media=\"(prefers-color-scheme: light)\" />\n<link rel=\"stylesheet\" href=\"bootstrap-dark.css\" media=\"(prefers-color-scheme: dark)\" />\n```\nThis 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.",
    "tags": [],
    "published_at": "2024-10-14 22:22:17",
    "url": "https://blog.philipnewborough.co.uk/posts/creating-a-bootstrap-dark-css-colour-scheme-by-inverting-the-colour-values-of-an-existing-light-colour-scheme",
    "featured_image": "https://blog.philipnewborough.co.uk/media/og-81b659f2-47c5-4074-8d02-3c87a2d21af3.png"
}