Dark Mode but really this time

OK, today let's try to make a page that actually turns dark if you have some sort of dark mode set in your OS or browser. I've seen some blog posts around the internet about this, but let's actually try and see what we can up with by going to the source. Namely, MDN's page about dark mode, aka the prefers-color-scheme media feature. There's not much to it -- @media (prefers-color-scheme: light) selects elements in a browser with a light color theme enabled, and @media (prefers-color-scheme: dark) selects elements in a browser with a dark theme enabled. Let's try it out!

The first pass at the code:

    @media (prefers-color-scheme: dark) {
      body {
        background-color: black;
        color: #e0e0e0;
      }
    }
    @media (prefers-color-scheme: light) {
      body {
        color: black;
      }
    }

The result:

One thing you might notice here is that the link color was basically invisible in dark mode. We could go setting colors for every common HTML element, like link text, buttons, dropdowns, etc. However, there's actually an easy way to get some sane defaults for all of these: the color-scheme CSS property. Unlike the media query feature, this CSS property simply tells the browser that we intend an element to be styled with a light or dark theme. If we apply this style, the browser will apply some default styles to all elements on the page for light and dark modes:

:root {
    color-scheme: light dark;
}
    

A smattering of html elements, before adding the above CSS:

And after:

This gives you a nice way to fall back to some basic browser defaults for dark (or light) mode, while still giving you the ability to set specific styles for elements you want to style yourself. You can also accomplish the same thing with a meta tag at the HTML level if you want it to load in before any CSS loads:

<meta name="color-scheme" content="light dark">
  

Unfortunately, since Safari is the new IE, Safari doesn't seem to change anything when you set this property! Well, you can't have everything in life, especially on the web. I suppose this is some motivation to set your own styles for everything if you're going to go down this route, but at least most users will see a reasonable default if you set the color-scheme property in :root or meta.