One of the top billed features of iOS 13 and MacOS Mojave was a native Dark Mode. Not only do users seem to really love it, but some tests suggest a not-insignificant improvement in battery life on OLED phones when enabled.
Many popular apps like Instagram, Google Apps, and Carrot Weather now support Dark Mode, and some websites are following suit too.
It makes sense. If a user has chosen a dark appearance on their device, it’s reasonable to assume that they expect that experience to be consistent throughout.
I’ve experienced this first-hand, particularly when browsing at night. A page loads and you get that signature white flash accompanied with the signature singing of your optic nerve. Not a great experience!
As a designer, I’m always looking for new ways to add fit and finish to my projects, and stay up-do-date on new technology. It turns out that adding Dark Mode support to an existing website is super-duper easy. Here’s how.
CSS media queries to the rescue
Most browsers now support the prefers-color-scheme media query. And it couldn’t be simpler to implement. If you’ve ever worked with responsive media queries before, you might be familiar with media queries like min-width or max-width:
h1 { font-size: 100px; }
p { font-size: 20px; }@media only screen and (max-width: 760px) {
h1 { font-size: 72px; }
p { font-size: 18px; }
}
If this all looks like spaghetti to you, this is basically just a bit of code that tells the browser to change the appearance of the page depending on the width of the screen. As the screen width changes, the visual style of the page will change. In this case, the h1 (header) and p (paragraph) will be made smaller on smaller screens.
If you want your website to adapt to your user’s preference for Dark Mode (maybe they have it set to turn on at night, maybe they’ve always got it turned on), you can set prefers-color-scheme to dark as a CSS override:
body { background: white; }
h1 { color: black; }
p { color: black; }@media only screen and (prefers-color-scheme: dark) {
body { background: black; }
h1 { color: orangered; }
p { color: white; }
}
Seriously, that’s it. Within those brackets, you can add any overrides you’d like to make. You can change background colors, text colors, and even apply CSS image filters to darken or invert images.
This works on custom-coded websites and Squarespace templates alike. Though if you’re using Squarespace or Wix and don’t have much coding experience, you might need to brush up on how to edit custom CSS first!
Bonus: Get unnecessarily fancy
I tend to have a habit of adding easter eggs to websites that I know no one is ever going to see[1][2]. Let’s make our dark mode sensor a little extra special with transition effects!
body { background: white; }
h1 { color: black; }
p { color: black; }
body, h1, p { transition: background .3s,
color .3s; }@media only screen and (prefers-color-scheme: dark) {
body { background: black; }
h1 { color: orangered; }
p { color: white; }
}
That’s it! Every website is going to be a bit different but, since media queries often just override existing styles, it’s just a process of elimination. Good luck, and thanks in advance for making the web a little bit easier on the eyes 🤩
[1]: https://wells.ee (click the ☰ at the bottom)
[2] : http://brunchmade.github.io/pinwheel.pw/ (click the 🔴, then the 🖥)
🤪
Thanks to Jon Rundle for letting me use his portfolio in the header!
