How to thematize in lesscss

It all depends on how many styles and variables differ between themes, for example a (very) basic staring point could be something like:

@themes:
    blue   rgb( 41, 128, 185),
    marine rgb( 22, 160, 133),
    green  rgb( 39, 174,  96),
    orange rgb(211,  84,   0),
    red    rgb(192,  57,  43),
    purple rgb(142,  68, 173);

// usage:

#navBar {
    .themed(background-color);
}

// implementation:

@import "for";

.themed(@property) {
    .for(@themes); .-each(@theme) {
        @name:  extract(@theme, 1);
        @color: extract(@theme, 2);

        .theme-@{name} & {
            @{property}: @color;
        }
    }
}

Then with things like Pattern Matching, Ruleset Arguments, etc. etc. you can get to automated generation of whatever complex appearance/theming hierarchy…

For instance almost the same simple example but with more customizable approach:

// usage:

#navBar {
    .themed({
        color:            @fore-color;
        background-color: @back-color;
    });
}

// themes:

.theme(@name: green) {
    @fore-color: green;
    @back-color: spin(@fore-color, 180);
    .apply();
}

.theme(@name: blue) {
    @fore-color: blue;
    @back-color: (#fff - @fore-color);
    .apply();
}

.theme(@name: black-and-white) {
    @fore-color: black;
    @back-color: white;
    .apply();
}

// etc.

// implementation:

.themed(@style) { 
    .theme(); .apply() {
        .theme-@{name} & {
            @style();
        }
    }
}

Leave a Comment