LessCSS を使用して、Web 開発用の再利用可能で動的なテーマ ソリューションを作成するにはどうすればよいでしょうか?

// Default appearance
@navBarHeight: 50px;

.appearanceWhite {
    @navBarHeight: 130px;
}
.appearanceBlack {
    @navBarHeight: 70px;
}

@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)
);

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

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

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