search

jfhr / ngb-theme-switcher-example

Angular + Bootstrap theme switcher example
Creative Commons Zero v1.0 Universal
8 stars 5 forks source link

Themed component sass #2

Open engilyin opened 2 years ago

engilyin commented 2 years ago

Could you please one or more components to this sample with own sass files where we can use themed colors like:

color: theme-color-level("warn", 3)

color: theme-color("primary")

So that will be applied on theme switch as well.

Thanks

jfhr commented 2 years ago

thanks for the suggestion, I'll look into it over the weekend

jfhr commented 2 years ago

Looks like theme-color and theme-color-level were removed in bootstrap 5, along with some other functions: https://getbootstrap.com/docs/5.0/migration/#sass

However, all bootstrap themes also define some css variables that you can use in a component like so:

something.component.sass

.warning-border:
  border: 1px solid var(--bs-warning)

I've added a PR with a small example: #3

Let me know if that helps you.

engilyin commented 2 years ago

Thank you. Looks like the css var is only way to do that. Although it is not supported by older browsers.