CODEWITHSUNDEEP
csswebpacksass
tobi.at
tobi.at

Reputation: 1286

Extract CSS difference for theme-aware styles

I have a project where the CSS is generated from Sass via webpack. I do have a few Sass variables which are used for theming: $color-primary, $color-bg, ...

As I want to create a light and dark theme I have to compile it to two CSS files, which isn't really a problem.

The problem is that both app-light.css and app-dark.css have most of their styles in common as they are not theme-aware.

What I want is extract all selectors and properties which are theme-aware and save it into app-dark.css, so it only contains data which is relevant for the theme.

Example diff (app-light.css and app-dark.css side-by-side): enter image description here

I need to find a tool or a way on how to create an app-dark.css which would generate the following for the shown diff:

h1 { color:#fff; }

That's it, because that's the only theme-aware property and selector.

Upvotes: 0

Views: 280

Answers (1)

Cody MacPixelface
Cody MacPixelface

Reputation: 1386

You can make a clean split with the help of global Sass variables and a mixin.

I'm guessing your starting point is two separate files and probably some Sass partials that are imported and compiled in these two files.

First chose your champions in each of the files, like this:

/* In app-light.scss */
$globalTheme: light !global;

/* In app-dark.scss */
$globalTheme: dark !global;

Then create a @mixin that returns the content only if your global variable AND the mixin argument is either light or dark, like this:

/* @mixin onlyInTheme() */
@mixin onlyInTheme($theme: null) {
    @if (global-variable-exists(globalTheme)) {
        @if ($theme == light and $globalTheme == light) {
            @content;
        }
        @if ($device == dark and $globalTheme == dark) {
            @content;
        }
    } @else {
        @warn "Global $appTheme variable does not seem to exist. No mixin for you!";
    }
}

Now you can write separate rules for each theme, and they will only be compiled to the corresponding file. Here's an example:

h1 {
    font-weight: 400; 
    margin: 0 0 3rem;
    line-height: 1.3;

    @include onlyInTheme(light) {
        color: #000;
    }

    @include onlyInTheme(dark) {
        color: #fff;
    }
}

This should give you the diff you want between the two files.

Upvotes: 1

Related Questions