colorSchemes.scss

@mixin light-color-scheme {
  background: #fff;
  color: #111;
}

@mixin dark-color-scheme {
  background: #111;
  color: #fff;
}

@mixin color-scheme {
  @include light-color-scheme;

  &.inverted-color-scheme {
    @include dark-color-scheme;
  }

  @media (prefers-color-scheme: dark) {
    @include dark-color-scheme;

    &.inverted-color-scheme {
      @include light-color-scheme;
    }
  }
}