Prevent duplication of CSS custom properties when using prefers-color-scheme

Question

I handle theming on my web app using around 60 custom properties. Currently I have 2 themes: light and dark (original I know).

Because the dark theme can be set using the user's preference (via a class) as well as being based on their OS preference using: @media (prefers-color-scheme: dark) I end up duplicating the dark theme properties. This isn't a massive issue in terms of maintenance as I use SCSS to generate the themes. But it does duplicate it in the output, which is 60 lines I could probably get rid of.

For your viewing pleassure I have removed a few of the properties:

:root,
.theme--light {
  --theme-style-1: #fff;
  --theme-style-2: rgba(0, 0, 0, 0.05);
}    
@media (prefers-color-scheme: dark) {
    :root {
        --theme-style-1: #444; // duplicated
        --theme-style-2: rgba(255, 255, 255, 0.1); // duplicated
    }
}    
.theme--dark {
    --theme-style-1: #444; // duplicated
    --theme-style-2: rgba(255, 255, 255, 0.1); // duplicated
}

My question then, is there a way to prevent the duplication?

This is the SCSS that generates the themes which works perfectly apart from the duplication:

:root,
.theme--light{
    @each $varName, $value in $themeBase__map {
        --#{$varName}: $value;
    }
}    
@media (prefers-color-scheme: dark) {
    :root {
    @each $varName, $value in $themeDark__map {
        --#{$varName}: $value;
    }
    }
}    
.theme--dark {
    @each $varName, $value in $themeDark__map {
        --#{$varName}: $value;
    }
}

But I have tried using @extend .theme__dark in the media query like this:

@media (prefers-color-scheme: dark) {
    :root {
        @extend .theme--dark;
    }
}

Which yields this lovely error (which is kind of obvious):

Appreciate any ideas you might have.

Answer 1

You can't be inside a media query and @extend something that's outside of a media query. It certainly would be nice if it would simply take a copy of it instead of trying to compose the selectors. But it doesn't, so you can't.

Solution:- Use a mixin

If you're going to be reusing a block of code inside and outside a media query, and still want to extend it, then write both a @mixin and an @extend class:

@mixin foo {
    // Put something here...
}

%foo {
    @include foo;
}

// usage
.foo {
    @extend %foo;
}

@media (min-width: 1024px) {
    .bar {
        @include foo;
    }
}

In case someone doesn't know what the % selector is, its just a placeholder selector, ie, it won't get compiled to CSS yet you will be able to reuse the code.