CODEWITHSUNDEEP
angularangular-material2
Supamiu
Supamiu

Reputation: 8731

Get color from theme palette with multiple themes

I have a simple multiple themes setup, following the 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);
}

Then, I'm applying the light-theme class to my root component, based on a boolean stored in locastorage, with a toggle to switch light/dark theme.

The issue is that I have some components that are using colors they need to get from the current theme.

With only one theme (assuming the only one is the dark one), it can be done using this:

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

But with multiple themes, it's inconsistent as it doesn't change the color with the theme.

How can I get the current background color from the current theme in a multiple themes application?

Upvotes: 1

Views: 662

Answers (1)

Philipp Kief
Philipp Kief

Reputation: 8603

You have to create your own mixins:

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

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

After that you have to insert the current theme as argument to that mixin:

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

In a longer-term perspective it will the best if you create a mixin for all custom themes like

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

Then you can apply the current theme to all custom themes:

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

So now you can be sure, that if you change the theme all other themes will use the related colors for that theme.

Upvotes: 2

Related Questions