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

问题描述 投票：0回答：4

我目前定义了一个自定义主题，类似于：

$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 或材料不太熟悉，我希望能够使用当前版本的 Angular Material 定义背景键，对我的代码引入最少的更改。预先感谢。

angular sass angular-material angular-material2
4个回答
5
投票

我也遇到了同样的问题。据我所知，所使用的背景是内部生成的，正如您所说。我发现覆盖它的唯一方法是在返回的 $my-material-theme 地图中设置值。

使用地图设置/获取功能非常难看，但是通过类似的方法，您可以覆盖背景值，在本例中为“红色”：

$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);
1
投票

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

@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));
0
投票

修改了@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;
}
0
投票

在 Angular 16 和 Material 16 上，如果您的背景/前景设置如下：

// Background for dark theme.
$custom-dark-theme-background: (
  status-bar: black,
  app-bar:    map.get(mat.$grey-palette, 900),
  background: #28364a,
  hover:      rgba(white, 0.04),
  card:       #415267,
  dialog:     map.get(mat.$grey-palette, 800),
  disabled-button: rgba(white, 0.12),
  raised-button: map.get(mat.$grey-palette, 800),
  focused-button: $light-focused,
  selected-button: map.get(mat.$grey-palette, 900),
  selected-disabled-button: map.get(mat.$grey-palette, 800),
  disabled-button-toggle: black,
  unselected-chip: map.get(mat.$grey-palette, 700),
  disabled-list-option: #28364a,
  tooltip: #616161,
);

// Foreground for dark theme.
$custom-dark-theme-foreground: (
  base:              white,
  divider:           $light-dividers,
  dividers:          $light-dividers,
  disabled:          $light-disabled-text,
  disabled-button:   rgba(white, 0.3),
  disabled-text:     $light-disabled-text,
  elevation:         black,
  hint-text:         $light-disabled-text,
  secondary-text:    $light-secondary-text,
  icon:              white,
  icons:             white,
  text:              white,
  slider-min:        white,
  slider-off:        rgba(white, 0.3),
  slider-off-active: rgba(white, 0.3),
);

定义深色主题：

$custom-dark-theme: mat.define-dark-theme((
    color: (
        primary: $custom-dark-primary,
        accent: $custom-dark-accent,
        warn: $custom-dark-warn
    )
));

在上述代码之后添加 

@debug $custom-dark-theme;
到 scss 文件中是查看上面第一段代码中可以传递哪些颜色选项的好方法。

然后手动设置背景和前景。非 

color
版本似乎是正在积极使用的版本，但我将两者设置为匹配“新”
color
主题定义样式。

$custom-dark-theme: map.set($custom-dark-theme, 'color', 'background', $custom-dark-theme-background);
$custom-dark-theme: map.set($custom-dark-theme, 'background', $custom-dark-theme-background);
$custom-dark-theme: map.set($custom-dark-theme, 'color', 'foreground', $custom-dark-theme-foreground);
$custom-dark-theme: map.set($custom-dark-theme, 'foreground', $custom-dark-theme-foreground);
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.