:root { @include light-theme; @media (prefers-color-scheme: dark) { @include dark-theme; } &[data-theme=light] { @include light-theme; } &[data-theme=dark] { @include dark-theme; } } @mixin light-theme { --background: hsl(0 0% 90%); --text: hsl(0 0% 10%); // ... } @mixin dark-theme { --background: hsl(0 0% 10%); --text: hsl(0 0% 90%); // ... }