/safari-theme-css

A test using prefers-color-scheme for Safari Preview

Primary LanguageHTML

Adding Dark Mode to your website with a few lines of CSS

The article explaining how this works can be found here: Read "Automatic Dark Mode for your website" by Seth Corker on Benevolent Bytes

Testing prefers-color-scheme, a feature that is now supported on most modern browsers including Chrome and Firefox.

This example uses @media (prefers-color-scheme: dark) { ... } to modify the look of the webpage. You could also use @media (prefers-color-scheme: light) { ... } to target light mode specifically.

Take a look at the Demo You should be able to try this out on any modern browser

If you'd like to learn more about some cool things you can do with CSS, take a look at "The Wonders of Dangerous CSS" on Benevolent Bytes. You'll learn about some CSS features you can use right now to enhance your website without touching JavaScript.