从具有多个主题的主题调色板中获取颜色答案

【问题标题】：Get color from theme palette with multiple themes从具有多个主题的主题调色板中获取颜色
【发布时间】：2017-09-19 17:51:47
【问题描述】：

我有一个简单的多主题设置，遵循material.angular.io guide:

@include mat-core();
$dark-primary: mat-palette($mat-orange, 800);
$dark-accent: mat-palette($mat-light-blue, 600, 100, 800);
$dark-warn: mat-palette($mat-red, 600);
$dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
@include angular-material-theme($dark-theme);


$light-primary: mat-palette($mat-teal);
$light-accent: mat-palette($mat-deep-orange);
$light-warn: mat-palette($mat-red);
$light-theme: mat-light-theme($light-primary, $light-accent, $light-warn);

// Light theme class
.light-theme {
    @include angular-material-theme($light-theme);
}

然后，我将 light-theme 类应用到我的根组件，基于存储在 locastorage 中的布尔值，并带有切换亮/暗主题的开关。

问题是我有一些组件正在使用它们需要从当前主题中获取的颜色。

只有一个主题（假设只有一个是深色的），可以使用以下方法完成：

background: mat-color(map-get($dark-theme, accent));

但是对于多个主题，它是不一致的，因为它不会随主题改变颜色。

如何在多主题应用程序中从当前主题获取当前背景颜色？

【问题讨论】：

标签： angular angular-material2

【解决方案1】：

你必须创建自己的 mixin：

@mixin button-theme($theme) {    
    $accent: map-get($theme, accent);

    .mat-button {
        color: mat-color($accent);
    }
}

之后，您必须将当前主题作为参数插入到该 mixin：

.light-theme {
    @include angular-material-theme($light-theme);
    @include button-theme($light-theme);            // <- added this line
}

从长远来看，最好为所有自定义主题创建一个 mixin，例如

@mixin custom-themes($theme) {
    @include button-theme($theme);  
    @include navigation-theme($theme);
    // ...
}

然后您可以将当前主题应用到所有自定义主题：

.light-theme {
    @include angular-material-theme($light-theme);
    @include custom-themes($light-theme);            // <- see this line
}

所以现在您可以确定，如果您更改主题，所有其他主题都将使用该主题的相关颜色。

【讨论】：