獲取從主題調色板顏色與多個主題

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 
} 

所以，現在你可以肯定，如果你更換主題的所有其他主題將使用相關的顏色爲主題。