maychan111/ng-multi-bootstrap-themes

How to switch compiled .css

Closed this issue · 6 comments

tihomirmagdic commented

I'm using Angular CLI and webpack to compile .css of each Angular component. How to switch each compiled component's .css with active theme?

maychan111 commented

What I do is to define variables (say $primary-color) in a scss file in the style directory for each theme e.g. here, and the Angular component uses that variable in the css/scss file.

cwgorman commented

What I do is to define variables (say $primary-color) in a scss file in the style directory for each theme e.g. here, and the Angular component uses that variable in the css/scss file.

But wouldn't you need to specify which theme to import (ala this), effectively making it not able to be changed at runtime?

maychan111 commented

I am not completely sure I understand your question. Perhaps this will help:

So in this repo, for example, I define two themes: dark and light. Two CSS files are generated: dark.css and light.css when you run ng build --prod

index.html has both stylesheets listed:

  <link href='assets/dark.css' rel='stylesheet' title="Dark" disabled/>
  <link href='assets/light.css' rel='stylesheet' title="Light" />

In this example, there is a button that the user can push, which calls the switchStyle() function in style-switcher.js.

The switchStyle() function removes disabled attribute from one stylesheet and add disabled to another one. So essentially both CSS files are "imported" all the time but only one is enabled at any one time, hence the "runtime change".

As far as styles that go with Angular component: If the styles can be themed, then they are classes defined in the "global" style directory (therefore compiled to dark.css or light.css) instead of with the component.

cwgorman commented

So essentially you don't refer to variables (eg $body-color) in your component, only in the global stylesheets?

And you can no longer rely on Angular's view encapsulation?

maychan111 commented

Correct - I don't reference theme related variables (like $body-color) inside the component CSS.

To maximize view encapsulation use, I only put theme related variables in the global style sheet and have CSS classes that use them. The Angular component itself uses/composes those classes (much like I would with Bootstrap's classes), but the Angular components also define CSS classes that are not theme related.

cwgorman commented

Ah I see. Thank you!