Search code examples
angularscss-mixinsangular-material-7

How to get the current angular theme's color of a specific component (e.g. button hover background)?


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).


Solution

  • 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