如何在"角度材质"的自定义主题中设置背景调色板

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那样工作——它似乎在内部删除了背景密钥，而是使用了内部密钥。我对Sass或材料不太熟悉，我希望能够使用当前版本的Angular material来定义背景键，从而对我的代码进行最小的更改。提前谢谢。

Answer 1

我刚刚遇到了同样的问题。正如你所说，从我所看到的，所使用的背景是内在产生的。我找到的覆盖它的唯一方法是在返回的$my材质主题图中设置值。

使用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材料主题

@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对材料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;
}