What is the best way to organize styles on less to support different interface colors?

Question

css

There is a task to organize support for various color solutions for the interface. All styles on less are grouped into components. Those. the markup is always the same, only the colors of the elements differ.
I see two ways:
1. For each element, define a personal variable with a color based on the context of the element (for example, @loginFormBg, @SerachButtonTextColor) and then simply specify the desired colors for these variables for each theme.
But there is a clear disadvantage in the form of a huge number of variables, which will often contain the same color values.
2. Put the theme identifier in the name of the variable, and inside each class, actually do an if, which, depending on the theme identifier, will use the desired value.

.sidebar {
    width: 220px;
    margin: 10px 0;
    & when (@theme = default) {background: @black;}
    & when (@theme = fireCat) {background: @fc_red;}
}

3. I do not consider the third option in the form of an extension of existing classes in a separate theme file, because
firstly, I will get a bunch of duplication in class names and, as a result, an increase in the size of css,
and secondly, I will break the code structure.
Are there any other nice solutions?

Answer 1

But what if you use one key theme color, and set all other colors relative to it?

Answer 2

3

.blah{}

body.theme1{
   .blah{}

}

Answer 3

Try changing your approach by using different methodologies, such as BEM from Yandex.