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();
}
}
}