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

Question

我想在我用 Angular 7 和材料设计显示的列表上有一个悬停颜色。由于$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;

}

我试图通过hoverand获取颜色focused-button，如 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;
   }
}

为了问题的完整性，这是我在原始问题中引用的答案中的列表副本：

为完整起见，以下是您可以从不同调色板中获取的元素列表： 从“主要”调色板（我上面代码中的 $primary 和 $dark-p）：

• 默认
• 打火机
• 较暗

您还可以获得 $accent 和 $warn 调色板的这三个相同的颜色值。

从“前景”调色板（我上面代码中的 $light-foreground-palette 和 $dark-foreground-palette ）：

• 根据
• 分隔线
• 分隔线
• 残疾
• 禁用按钮
• 禁用文本
• 提示文本
• 次要文本
• 图标
• 图标
• 文本
• 滑出
• 滑块关闭活动

从“背景”调色板（我上面代码中的 $light-background-palette 和 $dark-background-palette ）：

• 状态栏
• 应用栏
• 背景
• 徘徊
• 卡片
• 对话
• 禁用按钮
• 凸起按钮
• 焦点按钮
• 选择按钮
• 选择禁用按钮
• 禁用按钮切换