获取从主题调色板颜色与多个主题

Question

我有一个简单的多主题设置，继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)); 

但随着多个主题，这是不一致的，因为它不改变与颜色主题。

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

Answer 1

你必须创建自己的混入：

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

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

之后，你必须插入当前主题作为参数传递给混入：

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

---

在更长远的眼光如果您为所有自定义主题创建混音效果最好，如

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

所以，现在你可以肯定，如果你更换主题的所有其他主题将使用相关的颜色为主题。