I'm developing an Angular component which is to be reusable. It's a lib. It uses Material design. It is to be theme-able via Angular Material theming. It's assumed that the consumer application will define the theme for this component. So far so good.
My problem is: how can I highlight things via coloring while respecting the theme?
Points to note:
- outer application will define the Material theme so I can not rely on custom colors defined in the theme for my internal use
- theme may be light or dark thus I can not simply wire in colors in my component's css because it will look awful
- example use case: I want to highlight the selected node of a mat-tree control by altering it's background-color
I can try to use other ways to highlight such as drawing a border (as can be seen in one of the mat-table examples) or bolding the font but I find these inferior to highlighting via background color.