search

johannesjo / angular-material-css-vars

Little library to use css variables with @angular/material
https://johannesjo.github.io/angular-material-css-vars/
MIT License
194 stars 32 forks source link

Allow setting theme on a specific element #135

Open jmkeppler opened 1 year ago

jmkeppler commented 1 year ago

Would it be possible to allow passing in an optional html element to the SetPrimaryColor, SetAccentColor, and the SetWarnColor methods so that we can add a theme to a specific element other than the body?

json-derulo commented 1 year ago

What is the use case behind this? From my understanding, an application should have only one set of theme colors. I don't understand why a primary color should be different on different elements, doesn't this miss their purpose?

jmkeppler commented 1 year ago

Material allows this by doing this: https://material.angular.io/guide/theming#scoping-style-customizations

My use case is there are client colors, then there are sections with static "information" colors like green for correctness, etc. I can achieve this by doing it the material way, but I'd like to be able to create generic controls that use the css helpers of this library to get the color for other stylings.

I can create a sample app to demonstrate if needed

json-derulo commented 1 year ago

Thanks for clarification, a demo app is not necessary. I was not aware that scoping themes to a specific element is supported by Angular Material. In theory this can be achieved by overwriting the CSS variables on an element. However, implementing this will not be too easy, there are a few questions which will need to be answered first:

  1. How can this actually be implemented? Should this be solved via SCSS rather than TypeScript, like Angular Material does, or does it even need to be a hybrid solution?
  2. How can an element be passed to the function? (Name of selector? HTMLElement instance? ElementRef instance?)
  3. Should there be a possibility to remove theming from an element?

Additionally it needs to be ensured that the auto contrast logic runs and updates the foreground color as well.

As this is not so trivial to implement, and there doesn't seem to be a strong need in the community (yet), this has a low priority to be implemented. However, if someone would like to implement this feature themselves, go ahead!