如何获取特定组件的当前 angular 主题颜色（例如按钮悬停背景）？

Question

我想在使用 Angular 7 和 material 设计显示的列表中使用悬停颜色。由于 $primary、$accent 和 $warn 颜色不能很好地满足此目的，我希望在悬停时获得与按钮悬停时相同的颜色。我目前使用的是来自 material design multiple-themes example 的 candy-app-theme 和 dark-theme，所以我没有自己定义这种颜色。

但是，为了定义我的悬停颜色，我需要查询此按钮的悬停颜色。因此：如何查询这个颜色？

@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;

}

我尝试通过 hover 和 focused-button、as listed in this answer by TimTheEnchanter 获取颜色，但是这不起作用（我最终没有任何可见的悬停效果）。

Answer 1

我直接从主题中获取颜色的假设是错误的，我必须先获取调色板。因此，正确的做法是先查询 background 调色板（在我的例子中使用焦点按钮颜色），然后从所述调色板中获取 focused-button 颜色。

问题中的代码必须这样调整：

@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, 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

如何获取特定组件的当前 angular 主题颜色（例如按钮悬停背景）？

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

angular

scss-mixins

angular-material-7