Conceptually, dark/light mode on a website is driven by the buttons on the UI: whichever mode user picks, a data-theme
attribute with that value gets set on <html>
tag. We also persist that to browser's local storage.
Automatic mode setting "listens" to system's setting via @media (prefers-color-scheme: dark)
. Manual dark/light modes' CSS "listens" to <html>
tag attribute's value by :root[data-theme='dark']
.
That's pretty much it.
Here is the mixin we use.
Read article Our Dark Mode Setup