Angular Material Theme: Default background and/or foreground

36 Views Asked by At

I followed the example for dynamic Theming in Angular Material. In general this works quite fine. My main problem is related to the default background and foreground colors. e.g. the card example from Material shows some sample content. By default the color it is set to white or (a variation of) black. Switching the Theme switches automatically this color. But the color is NOT assigned to a variable.

I have currently configured in my sample.styles.scss

$standardForecolor: black;
$standardBackcolor: white;
.dark-theme {
    @include theme.create-dark-theme();
    $standardForecolor: yellow;
    $standardBackcolor: rgba(black, 0.87);
}

.light-theme {
    @include theme.create-light-theme();
    $standardForecolor: rgba(black, 0.87);
    $standardBackcolor: green;
}
$sample-theme: (
    standard: (
        backColor: $standardBackcolor,
        foreColor: $standardForecolor,

I initially thought by defining a variable $standardForecolor could be easily switched depending on the selected Theme. But this won't work. I tried as well

@include mat.core();

@mixin create-light-theme() {
    @include mat.all-component-colors($light-theme);
    $standardForecolor: rgba(black, 0.87);
    $standardBackcolor: green;
}
@mixin create-dark-theme() {
    @include mat.all-component-colors($dark-theme);
    $standardForecolor: yellow;
    $standardBackcolor: rgba(black, 0.87);
}

But this fails as well :-/ I need to access the information in different `scss` files - and the preferred solution would be using a variable.

0

There are 0 best solutions below