Link to original article with code snippets (recommended): https://gabriellazcano.com/blog/easy-dark-mode-with-css-variables/
For achieving this we are going to use the prefers-color-scheme media feature, which is used to detect if the user has requested to use a light or dark theme, and :root for setting global variables in CSS.
Then in any part of the site we have to use the --bg-color variable with var() like this:
You can check support for prefers-color-scheme in https://caniuse.com/mdn-css_at-rules_media_prefers-color-scheme
I hope you will find this blog post useful and keep it handy for a quick reference. Feel free to send me a DM or to mention me on Twitter if you’ve got any suggestion or fix :)