How to add Dark Mode support to your portfolio website

Dark Mode is now standard on iOS and MacOS, and you can make your website support it easily.

Wells Riley
Oct 28 · 4 min read
Example of two portfolio websites toggling between dark and light appearance on MacOS
Example of two portfolio websites toggling between dark and light appearance on MacOS

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!

Transform

Thoughts and ideas from practicing designers, brought to you by Snapdocs Design

Wells Riley

Written by

Design at @snapdocs

Transform

Transform

Thoughts and ideas from practicing designers, brought to you by Snapdocs Design

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade