Implementing automatic dark mode using Webflow

When I started considering what features to build for this new blog, I knew it had to have automatic dark mode.

No switches, no buttons, no preferences or settings. The website should simply know if the visitor's device is in dark or light mode, and adjust its colour palette to match.

After looking around a bit on the Webflow forums and Google, I found this project by Matthew P. Munger on the Webflow Showcase. He writes:

With Safari Technology Preview 68 and MacOS 10.14, it is now possibly for the browser to recognize if the operating system is configured to dark mode and adjust the css as defined by the @media query. Soon this will become supported by all major browsers and operating systems.

There's lots of reasons why I wanted to design this blog using Webflow, most of them design related, but dark mode isn't yet a supported feature. But using Matthew's code, It was actually really to get it set up. Just needed to write a few lines of CSS to target the body, paragraph, link, and headings and specify the colours I wanted them to change to when the user's device is in dark mode.

However, it would be amazing if Webflow implemented as an officially supported feature.

For a simple blog like this I could get the job done using custom code, but I'd love to be able to implement dark mode for some of my client projects in the future. And I don't think that it would be convenient or worth the extra work, because the more complicated a design is, the worse the experience implementing dark mode gets.

Matthew was gracious enough to request the feature on Webflow's feature request site. If you're a Webflow designer, feel free to vote for it. I did.