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
That's pretty much it.
Here is the mixin we use.Read article Our Dark Mode Setup