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

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;

}

我尝试通过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;
   }
}

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

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

• 默认
• 打火机
• 较暗

您还可以为 $accent 和 $warn 调色板。

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

• 基础
• 分频器
• 分频器
• 已禁用
• 禁用按钮
• 禁用文本
• 提示文本
• 辅助文本
• 图标
• 图标
• 文字
• 滑块关闭
• 滑块关闭活动

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

• 状态栏
• 应用栏
• 背景
• 悬停
• 卡片
• 对话框
• 禁用按钮
• 凸起按钮
• 焦点按钮
• 选中按钮
• 选定的禁用按钮
• 禁用按钮切换