less - Bootstrap components with alternate colors

Question

Is there a recommended way to have 2 Bootstrap components with different color sets?

For example, two nav-tabs, one in a dark theme, and another in a light theme.

Preferably something like:

<div class="dark"><ul class="nav nav-tabs"> ... </ul></div>
<header>...</header>
<div class="light"><ul class="nav nav-tabs"> ... </ul></div>

But something like this might be fine:

<ul class="dark-nav dark-nav-tabs"> ... </ul>
<header>...</header>
<ul class="dark-nav light-nav-tabs"> ... </ul>

I would rather include 2 Bootstrap CSS files, one with dark variables.less and one with light colors, but have the styles prefixed in some kind of namespace. Ideally I would want to minimize the risk of accidentally typing or something. Having a around the dark areas would be easier.

Answer 1

In LESS, you can import other .less/.css files wherever you want, also inside rulesets:

#dark {
   @import "style-dark.less";
}

#light {
   @import "style-light.less";
}

Combining this with Bootstrap options that let you customize colors, you should be able to achieve the desired results, simply importing two generated files into appriopriate rulesets.