How to set background palette in custom theme of Angular Material?

user_2123288 0
Viewed 829

I currently define a custom theme finishing with something like:

$my-material-theme: mat.define-light-theme((
    color: (
      primary: $my-material-primary,
      accent: $my-material-accent,
      warn: $my-material-warn,
    ),
    typography: $my-material-font
));


@include mat.all-component-themes($my-material-theme);

All works properly. Still I noticed that some components were using a background-color different from what I used on the application and after some research, though that the following would further customise the theme:

$my-material-theme: mat.define-light-theme((
    color: (
      primary: $my-material-primary,
      accent: $my-material-accent,
      warn: $my-material-warn,
      background: $my-material-background
    ),
    typography: $my-material-font
));


@include mat.all-component-themes($my-material-theme);

, where obviously I defined the new background palette. After testing I see that it doesn't work as mat.define-light-theme seems to be dropping the background key internally and instead using an internal one. I'm not that familiar with Sass or material, and I would like be able to also define the background key introducing the least change on my code, using current version of Angular Material. Thanks in advance.

angular-material2 angular-material angular sass
3 Answers

I just had the same problem. From what I saw the background used is generated internaly as you said. The only way I found to override it, is to set the value in the returned $my-material-theme map.

Using the map set/get functions is pretty ugly, but with something like this you can override the background value, in this example to "red" :

$backgroundColor: red;
$color: map.get($my-material-theme, "color");
$colorBackground: map.get($color, "background");
$colorBackground: map.set($colorBackground, "background", 
$backgroundColor);
$color: map.set($color, "background", $colorBackground);
$my-material-theme: map.set($my-material-theme, "color", $color);

Then you can use the modified $my-material-theme the same way you did:

@include mat.all-component-themes($my-material-theme);
user_14376120

You could use this functions to change any params of background or foreground.

@function theme-background-change($theme, $name, $value) {
    $modified-theme: $theme;
    $theme-color: map-get($theme, color);
    $color-background-palette: map-get($theme-color, background);
    @if $color-background-palette {
        $color-background-palette: map-merge($color-background-palette, ($name: $value));
    }
    @if $color-background-palette {
        $modified-theme: map-merge($modified-theme, (color: (background: $color-background-palette)));
    }
    $background-palette: map-get($theme, background);
    @if $background-palette {
        $background-palette: map-merge($background-palette,($name: $value));
    }
    @if $background-palette {
        $modified-theme: map-merge($modified-theme,(background: $background-palette));
    }
    @return $modified-theme;
}

@function theme-foreground-change($theme, $name, $value) {
    $modified-theme: $theme;
    $theme-color: map-get($theme, color);
    $color-foreground-palette: map-get($theme-color, foreground);
    @if $color-foreground-palette {
        $color-foreground-palette: map-merge($color-foreground-palette, ($name: $value));
    }
    @if $color-foreground-palette {
        $modified-theme: map-merge($modified-theme, (color: (foreground: $color-foreground-palette)));
    }
    $foreground-palette: map-get($theme, foreground);
    @if $foreground-palette {
        $foreground-palette: map-merge($foreground-palette,($name: $value));
    } 
    @if $foreground-palette {
        $modified-theme: map-merge($modified-theme,(foreground: $foreground-palette));
    }
    @return $modified-theme;
}

Example usage:

$dark-primary: mat-palette($mat-light-blue, 300, 100, 500);
$dark-accent: mat-palette($mat-yellow, 400, 300, 600);
$dark-warn: mat-palette($mat-red, 400);

$dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);

$dark-theme: theme-background-change($dark-theme, 'body', #101010);
$dark-theme: theme-background-change($dark-theme, 'card', #101010);
$dark-theme: theme-background-change($dark-theme, 'hover', rgba(white, 0.06));
user_180172210

Modified @Renat Gubaev answer to new scss structure in material 13:

@use 'sass:map';

@function theme-background-change($theme, $name, $value) {
    $modified-theme: $theme;
    $theme-color: map.get($theme, color);
    $color-background-palette: map.get($theme-color, background);
    @if $color-background-palette {
        $color-background-palette: map.merge(
            $color-background-palette,
            (
                $name: $value,
            )
        );
    }
    @if $color-background-palette {
        $modified-theme: map.merge(
            $modified-theme,
            (
                color:
                    map.merge(
                        $theme-color,
                        (
                            background: $color-background-palette,
                        )
                    ),
            )
        );
    }

    $background-palette: map.get($theme, background);
    @if $background-palette {
        $background-palette: map.merge(
            $background-palette,
            (
                $name: $value,
            )
        );
    }
    @if $background-palette {
        $modified-theme: map.merge(
            $modified-theme,
            (
                background: $background-palette,
            )
        );
    }
    @return $modified-theme;
}
user_74320400
Related