: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%);
  // ...
}