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);
}

然后，我根据存储在locastorage中的布尔值将light-theme类应用于我的根组件，并使用切换来切换亮/暗主题。

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

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

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

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

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

Answer 1

你必须创建自己的mixins：

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

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

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

1 个答案: