I want to have a hover color on a list I display with Angular 7 and material design. Since the $primary
, $accent
and $warn
colors don't serve this purpose very well, I want to get the same color for hovering that a button has when hovering. I am currently using the candy-app-theme and the dark-theme from the material design multiple-themes example, so I don't define this color myself.
For defining my hovering color I need to query this button hovering color however. Therefore: How do I query this color?
@mixin options-component-theme($theme) {
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);// Use mat-color to extract individual colors from a palette as necessary.
//i have tried these two:
$hover: map-get($theme, hover);
$focused-button: map-get($theme, focused-button);
$primary-color: mat-color($primary);
$accent-color: mat-color($accent);
.listItemFormat:hover {
background-color: $focused-button;
}
I have tried to get the colors via hover
and focused-button
, as listed in this answer by TimTheEnchanter, however this does not work (I end up without any visible hovering effect at all).
My assumption to get the color directly from the theme was wrong, I had to get the palette first. Thus the correct way to do it would be querying (in my case with the focused-button color) the background
palette first and getting the focused-button
color from said palette.
The code from the question has to be adjusted thus:
@import '~@angular/material/theming';
@mixin options-component-theme($theme) {
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);// Use mat-color to extract individual colors from a palette as necessary.
$background-palette: map-get($theme, background);
$primary-color: mat-color($primary);
$accent-color: mat-color($accent);
$focused-button-color: mat-color($background-palette, focused-button);
.listItemFormat:hover {
background-color: $focused-button-color;
}
}
For completeness of the question, here is a copy of the list in the answer I referenced in my original question:
For completeness, here are the lists of the elements you can get from the different palettes: From the "primary" palette ($primary and $dark-p in my code above):
- default
- lighter
- darker
You can also get these same three color values for the $accent and $warn palettes.
From the "foreground" palette ($light-foreground-palette and $dark-foreground-palette in my code above):
- base
- divider
- dividers
- disabled
- disabled-button
- disabled-text
- hint-text
- secondary-text
- icon
- icons
- text
- slider-off
- slider-off-active
From the "background" palette ($light-background-palette and $dark-background-palette in my code above):
- status-bar
- app-bar
- background
- hover
- card
- dialog
- disabled-button
- raised-button
- focused-button
- selected-button
- selected-disabled-button
- disabled-button-toggle