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.