1

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

Tare
  • 482
  • 1
  • 9
  • 25

1 Answers1

6

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
Tare
  • 482
  • 1
  • 9
  • 25