Dark Mode or Light? How about both?

Dark mode color scheme consists of a dark navy background, white logo, photo with an overlay to darken it up, and a floating text box that is a not so dark blue/grey with white text.

As a user experience designer, I use the Jobs-to-be-done Theory to guide my work. This helps to identify the customer's needs and the steps or jobs that the customer does to fulfill their need. The question then becomes; is what I'm designing part of the core functional job, the related job, or emotional job? Or is it a distraction? Or is it something my client really wants?

Giving the customer a switch to choose between dark mode or light mode is nice but is it adding to the burden of the job? Dark mode or light mode is one of those jobs you can get out of the way using some low-code to make the switch automatically. The customer might not notice however it'll add to their satisfaction score of your business.

Where it Began for Me

I was inspired by a Facebook Webflow Group post by Ezra van den Broek and Nelson's YouTube video about allowing the user to switch from light mode to dark mode. With a bit of low coding, I can automatically present my test site in light or dark mode. This is based on the user's system preferences being set to light or dark mode. This post is done using Webflow. I've tested this on, and it works in, Chrome, Firefox, Safari, Edge, and Opera on Windows, macOS, and iOS13. I have not tested on Android.

Started with a Default Scheme

The light mode of my test site. It has a white background, a blue logo, a hero image with a white text box floating above the left side of the image. The image shows a white car driving through the city of Providence, RI.
I started with the Light Mode color scheme.

You can set 3 different values - custom, light, and dark using media queries. The specific query is the 'prefers-color-scheme'. There is not a browser's 'theme' preference. It took me a little while to figure that one out.

There are a couple of ways you can go with this. You can set 2 very different color schemes and layouts based on mode, or you can leave the structure alone and change the colors. With the latter, you maintain consistency with the user's who have set their color preferences to shift from light mode to dark at night. My approach with this test was to retain the layout and tweak the colors.

In Webflow, I created my light scheme as the default. From here I used Jose Ocando's HTML embed trick to style the media queries. I used only the light and dark mode queries. With the default and light being essentially the same, I saw no reason to include the no preference mode. Once the styling was done, I moved it to the Custom Code section of the site settings. From there, I deleted the embed. I should've done my accessibility testing before doing that since it didn't pass color contrast. More on accessibility testing in another post - the linked post was done using WordPress as a platform; I'll do another one using Webflow shortly.

Added the Dark Mode Scheme

Added the dark mode color scheme.

There is a great post by Briandito Priambodo on what to think about when going from one mode to the other. You can make it as easy or complicated as you'd like as long as your user is able to accomplish the 'job-to-be-done'. For my test site, I've made it pretty simple to make sure I'm aware of what happens when going from one mode to the other.

Below is the CSS I used to accomplish this. The classes I named were easy to target. To find the classes I didn't name but needed to target, I used the inspector in Chrome to find them.

Within the <style> tags I put


/* Light mode */
@media (prefers-color-scheme: light) {
    body {
        background-color: #f9fcfe;
        color: #17222c;
    }
    .logo__mikreative {
        filter: invert(8%) sepia(49%) saturate(535%) hue-rotate(166deg) brightness(98%) contrast(90%);
    } 
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    body, .navbar {
        background-color: #141e26;
        color: #f7fafc;
    }
    .nav__link, .nav__dropdown_link, .main__container, h1, h2, h3, h4, h5, p, link {
    		color: #f9fcfe;
    }
    .logo__mikreative {
    		filter: invert(84%) sepia(7%) saturate(56%) hue-rotate(160deg) brightness(108%) contrast(116%);
    }
    .nav__link.w--current, .nav__link:hover {
      	color: #ffca2d;
        border-color: #ffca2d;
    }
    .nav__dropdown_link:hover {
    		color: #ffca2d;
        background-color: #141e26;
    }
    .nav__dropdown_container {
    		background-color: #464f5d;
    }
    .rich-text-block a {
    		color: #f9fcfe;
    }   
}

/* responsive: phone */
@media (max-width: 479px) {
		.column {
    		border-left: 0;
    }
  }

</style>

Tweaking

I was using PNGs for my logos and icons but changed all of those to SVGs so I can use the CSS filter generator to change the logos and icons to whatever color my design calls for.

Client logos section in light mode. Logos are dark navy on a light grey background.
Client logo section of the homepage showing whith logos on a dark blue/grey background.

My hero image was darkish already so the only thing I did there was to add an overlay so I can add some vignetting to it.

The last image on the hompage I changed out completely. The light mode one was fine but I decided a darker color sceen would work better.

In light mode. Bottom full width image of a bascule bridge stuck in the upright position. The image is blue/grey photo on a white background.
In dark mode the image is changed to a night scene of an alley parking lot. The image is on a navy background.

I still have some tweaking to do however I'm excited about the possibilities. I've started to add this to my live site beginning with the blog posts. I'll also be offering this option to my clients at an additional charge. After all, it is essential for 2 different looks.

Check out the results at my test site or on this page.

I'd love to hear what you've discovered playing around with 'prefers-color-scheme'. Get in touch on your platform of choice.

Similar posts

25-minute Micro-SaaS Vetting template on Notion
How To

How to vet your Micro-Saas idea in 25-minutes with a free Notion template

We've all some great ideas for an app or new business that is going to save the world while making us comfortable. I go over my framework for quickly coming to a decision on whether to move forward or not.

Learn about Micro-Saas Vetting.
Empty street in front of an inner city mall
Advice

Is your business part of new habits formed during COVID-19?

During the lockdown, we've been forced to break old habits and develop new ones. Is your business part of these new habits?

Read about new habits.