@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
    4 Dec, 2024 02:18am

    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, 2024 08:00pm

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

    Attachments Open full size
  • Basti Haus commented
    7 Aug, 2023 09:07pm

    Please add this!

    Attachments Open full size
  • Jon Cox commented
    21 Aug, 2022 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!).

    Attachments Open full size
  • Jon Cox commented
    21 Aug, 2022 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.

    Attachments Open full size
  • Fatheen Nizam commented
    8 Mar, 2022 02:53am

    Please add this! You can do it Webflow!

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

    Bump. This is becoming an issue...

    Attachments Open full size
  • Oliver Krause commented
    23 Jan, 2021 05:30pm

    This would be so awesome to have!

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

    Attachments Open full size
  • Can Olcer commented
    29 Nov, 2020 06:25pm

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

    Attachments Open full size
  • Gary Colwell commented
    5 Jul, 2020 12:40am

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

    Attachments Open full size
  • Sophie Zhao commented
    8 Jun, 2020 08:28pm

    Please prioritize this webflow!! Really need this!

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

    Attachments Open full size
  • Damir commented
    6 Mar, 2020 12:34pm

    Would be ace to have this! Please prioritise Webflow.

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

    Great! Love to use this on our website.

    Attachments Open full size
  • Lars M. Schreiber commented
    9 Nov, 2018 06:30am

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

    Attachments Open full size
  • +157

Related ideas