2

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

1 Answer 1

7

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.