@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
  • Basti Haus commented
    August 07, 2023 21:07

    Please add this!

  • Jon Cox commented
    August 21, 2022 11:28

    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
    August 21, 2022 11:17

    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
    March 08, 2022 02:53

    Please add this! You can do it Webflow!

  • Aleksandr Pasevin commented
    May 19, 2021 13:12

    Bump. This is becoming an issue...

  • Oliver Krause commented
    January 23, 2021 17:30

    This would be so awesome to have!

  • Michael Gubik commented
    January 14, 2021 11:17

    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
    November 29, 2020 18:25

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

  • Gary Colwell commented
    July 05, 2020 00:40

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

  • Sophie Zhao commented
    June 08, 2020 20:28

    Please prioritize this webflow!! Really need this!

  • Erin Keeffe commented
    May 30, 2020 20:17

    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
    March 06, 2020 12:34

    Would be ace to have this! Please prioritise Webflow.

  • Iskandar Bwefar commented
    September 30, 2019 11:08

    Great! Love to use this on our website.

  • Lars M. Schreiber commented
    November 09, 2018 06:30

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

  • +145