How I added a dark theme to my website!

Using Detect Dark mode

Changing the color scheme of a website is basically a requirement these days, and I decided to add a nice and simple version for my new, lightweight blog.
A few weeks ago, I discovered a new media query while browsing the web, and I knew I had to try it out!

I ended up using the media query of prefers-color-scheme to get the user's preferred color scheme, instead of using a toggle switch for now.

I will eventually end up with a nice toggle or switch somewhere, but I really wanted to just play around with this media query I found out about!

It ended up being far simpler, and acts almost as a "native" application for the user, being that it ties into the browser's preferred color scheme.

The media query is relatively straight forward, and I implemented it like this.

@media (prefers-color-scheme: dark) {
  :root {
    --black: #ffffff;
    --white: #232c33;
    --off-white: #111111;
    --blue-hl: var(--pewter);
    --blue: #3a6a92;
  }
}

And in my case, right before this media query I am using the following to set my normal colors for my site:

:root {
  --blue: #172a3a;
  --blue-hl: #3a6a92;
  --black: #232c33;
  --pewter: #76949f;
  --white: #ffffff;
  --off-white: #fdfdfd;
}

All in all, it took me about 15 minutes to setup, just tweaking the colors when the switch to darkmode happened, and I had my website ready to go!