Dark Mode or Light? How about both.
I've been inspired lately 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 was able to have my test site automatically present 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, and Opera on Windows, MacOS, and iOS13. It does not work on Edge. I have not tested on Android.
You can set 3 different modes - no preference, light, and dark using media queries. The specific query is the 'prefers-color-scheme'. The no preference is used if there is no default color scheme chosen in the system preferences. This 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 layout alone and tweak the colors. With the latter you maintain a consistency with user's who have set their color preferences to shift from light mode to dark at night. My approach with this test was to maintain 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 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.
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 goal of the site. 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
I still have some tweaking to do however I'm excited about the possibilities and will be trying this on my real site soon. I'll also be offering this option to my clients at additional charge. After all it is essential 2 different looks.
Checkout the results at my test site.
I'd love to hear what you've discovered playing around with 'prefers-color-scheme'. Get in touch on your platform of choice.