@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
Screen Shot 201...
Attachments Open full size
  • Matthew P Munger
  • Nov 5 2018
  • Reviewed
Accessibility / Layout & Styles
  • Post comment
  • Peter Nowell commented
    04 Dec 02:18

    I'm an experienced web developer trying Webflow for the first time, and I'm impressed by many things but shocked that there isn't a way for a color variable to support light and dark mode versions. Is that still the case?

    Attachments Open full size
  • Puya Khalili commented
    31 May 20:00

    This is such an important feature, dark mode / light mode support is crucial for most modern websites.

    Attachments Open full size
  • Basti Haus commented
    August 07, 2023 21:07

    Please add this!

    Attachments Open full size
  • 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!).

    Attachments Open full size
  • 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.

    Attachments Open full size
  • Fatheen Nizam commented
    March 08, 2022 02:53

    Please add this! You can do it Webflow!

    Attachments Open full size
  • Aleksandr Pasevin commented
    May 19, 2021 13:12

    Bump. This is becoming an issue...

    Attachments Open full size
  • Oliver Krause commented
    January 23, 2021 17:30

    This would be so awesome to have!

    Attachments Open full size
  • 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.

    Attachments Open full size
  • Can Olcer commented
    November 29, 2020 18:25

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

    Attachments Open full size
  • Gary Colwell commented
    July 05, 2020 00:40

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

    Attachments Open full size
  • Sophie Zhao commented
    June 08, 2020 20:28

    Please prioritize this webflow!! Really need this!

    Attachments Open full size
  • 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.

    Attachments Open full size
  • Damir commented
    March 06, 2020 12:34

    Would be ace to have this! Please prioritise Webflow.

    Attachments Open full size
  • Iskandar Bwefar commented
    September 30, 2019 11:08

    Great! Love to use this on our website.

    Attachments Open full size
  • Lars M. Schreiber commented
    November 09, 2018 06:30

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

    Attachments Open full size
  • +157

Related ideas