I usually architecture theming into the CSS from the beginning, by just following Harry's BEMIT guide.
- I assign a "root" theme class to the body element, like
t--light
- Then, every element with a theme (even if only one theme is planned) will get a
t- (theme) CSS class. For example t-menu__item--active
- To make it work, I prefix the CSS selectors with the root theme class. If I want to add a new theme, all I have to do is copy all theme related CSS classes, change the prefixed CSS theme class and do the actual theming
- Switching the theme is as easy as removing and adding a CSS class in the body tag (either on the server or the client side).
>>> Full example