Dark Mode

To see this page in dark mode automatically, do the following.

How can I use dark mode on my site?

Testing this out is easy. Copy/paste the code below into custom code "inside head tag".

Styling

Now it is possibly to style any classes and css once that @media query has been called. Until 🤞Webflow supports that query in the designer, it will be necessary to manually code the css adjustments.

Future

Right now this is only supported in the Safari Tech Preview, but it is expected to gain support across systems and browsers.

References

  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