@media query support for Color Scheme preference (light/dark mode)

Let's get a "dark mode" query in Webflow to easily let us adjust the CSS for this new and awesome query point.

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. http://css-color-scheme-prefers-dark.webflow.io/

  1. Redesigning your product and website for dark mode
  2. Apple Human Interface Guidelines dark mode
  3. Paul Miller: Using dark mode in CSS with MacOS Mojave
  4. Bug Mozilla to add support for CSS prefers-color-scheme
  5. Can I Use prefers-
  6. Media Queries Level 5 (prefers-color-scheme)
  7. Safari Technology Preview Adds dark mode CSS
  • Matthew P Munger
  • Nov 5 2018
  • Reviewed
  • Jon Cox commented
    21 Aug 11:28am

    Also note that major websites, like twitter.com, support this. It has very much become an indicator of a quality made website (which is what Webflow is all about!).

  • Jon Cox commented
    21 Aug 11:17am

    As well as Dark Mode colours, it would also be very useful to have an option to set a Dark Mode version of images (but have it default to the Light Mode version if none is set).


    Here's the HTML required to achieve this:

    <picture>
    <source srcset="dark-mode.png" media="(prefers-color-scheme: dark)">
    <img src="light-image.png">
    </picture>


    Also if anyone from Webflow is reading this... I appreciate any new feature is a lot of work (with all the UI required etc. etc.), but from a purely CSS/HTML point of view, these changes are utterly trivial.


    If it makes the UI or overall work easier, I'd be very happy for this feature to be entirely opt-in. Or even released as a buggy beta. I just want my site to support Dark Mode :)


    Another reason for it: For websites linked to from mobile apps that support Dark Mode, it is jarring to suddenly have a white screen.

  • Fatheen Nizam commented
    8 Mar 02:53am

    Please add this! You can do it Webflow!

  • Aleksandr Pasevin commented
    19 May, 2021 01:12pm

    Bump. This is becoming an issue...

  • Oliver Krause commented
    23 Jan, 2021 05:30pm

    This would be so awesome to have!

  • Michael Gubik commented
    14 Jan, 2021 11:17am

    Coming from code but loving Webflow so far I gotta say that this is the first major downer I occur. I hope this will be fixed soon.

    With a dark mode toggle somewhere, like right of the canvas settings this could work very similarly to the size breakpoints and shouldn't be too difficult to implement.

  • Can Olcer commented
    29 Nov, 2020 06:25pm

    This would be great to have with more and more users surfing around in dark mode.

  • Gary Colwell commented
    5 Jul, 2020 12:40am

    This would be so next level. Please develop this Webflow!

  • Sophie Zhao commented
    8 Jun, 2020 08:28pm

    Please prioritize this webflow!! Really need this!

  • Erin Keeffe commented
    30 May, 2020 08:17pm

    Would love to see this supported. I'm imagining a toggle at the top of the styles panel that could switch between your light & dark css properties, as as example.

  • Damir commented
    6 Mar, 2020 12:34pm

    Would be ace to have this! Please prioritise Webflow.

  • Iskandar Bwefar commented
    30 Sep, 2019 11:08am

    Great! Love to use this on our website.

  • Lars M. Schreiber commented
    9 Nov, 2018 06:30am

    Yes, that would be great! A biiiig +++++1

  • +124