如何在 Angular Material 的自定义主题中设置背景调色板？

Question

我目前定义了一个自定义主题，完成方式如下：

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

一切正常。我仍然注意到某些组件使用的背景颜色与我在应用程序中使用的背景颜色不同，经过一些研究，尽管以下内容将进一步自定义主题：

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

，显然我在这里定义了新的背景调色板。测试后我发现它不起作用，因为 mat.define-light-theme 似乎在内部删除背景键，而是使用内部键。我对 Sass 或 material 不太熟悉，我还希望能够使用当前版本的 Angular Material 定义背景键，对我的代码引入最少的更改。提前致谢。

Answer 1

我刚刚遇到了同样的问题。据我所见，使用的背景如您所说是内部生成的。我发现覆盖它的唯一方法是在返回的 $my-material-theme map.

中设置值

使用 map set/get 函数非常丑陋，但使用类似这样的东西你可以覆盖背景值，在本例中为“红色”：

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

然后你可以像以前一样使用修改后的$my-material-theme:

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

Answer 2

您可以使用此函数更改背景或前景的任何参数。

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

用法示例：

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

Answer 3

修改@Renat Gubaev 对 material 13 中新 scss 结构的回答：

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

如何在 Angular Material 的自定义主题中设置背景调色板？

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

sass

angular-material

angular-material2

angular