gpt4 book ai didi

Angular Material主题 - 如何设置应用程序背景?

转载 作者:太空狗 更新时间:2023-10-29 16:50:54 24 4
gpt4 key购买 nike

我正在使用 angular material2 构建一个 angular2 应用程序。我正在尝试“以正确的方式”设置我的应用程序的背景,但我不知道该怎么做。

我找到了一个可以在我的 <body> 上使用的类元素:mat-app-background我可以添加一个默认颜色(取决于我使用的是浅色还是深色主题)。

我想定义此背景颜色以使用我品牌的颜色,但我不知道该怎么做。

_theming.scss它是这样定义的:

// Mixin that renders all of the core styles that depend on the theme.
@mixin mat-core-theme($theme) {
@include mat-ripple-theme($theme);
@include mat-option-theme($theme);
@include mat-pseudo-checkbox-theme($theme);

// Wrapper element that provides the theme background when the
// user's content isn't inside of a `md-sidenav-container`.
.mat-app-background {
$background: map-get($theme, background);
background-color: mat-color($background, background);
}
...
}

所以我认为以某种方式尝试将背景颜色添加到我的自定义主题是有意义的,但我不明白该怎么做。

关于 Material 2 theming文档只说:

“在 Angular Material 中,主题是通过组合多个调色板创建的。特别是,主题包括:

  • 主要调色板:在所有屏幕和组件中使用最广泛的颜色。
  • 重点调色板:用于 float 操作按钮和交互元素的颜色。
  • 警告调色板:用于传达错误状态的颜色。
  • 前景调色板:文本和图标的颜色。
  • 背景调色板:用于元素背景的颜色。"

如何将我的背景添加到主题中,或以任何其他方式添加?

最佳答案

如果您想以干净的方式更改整个应用的主题背景颜色,您可以使用以下内容覆盖您的主题。

// Set custom background color
$custom-background-color: map_get($mat-blue-grey, 50);

// -or- Can set colour by hex value too
$custom-background-color: #628cc9;

$background: map-get($theme, background);
$background: map_merge($background, (background: $custom-background-color));
$theme: map_merge($theme, (background: $background));

这假设您已经使用 mat-light-thememat-dark-theme 设置了您的 $theme。当然,您可以用 $mat-blue-grey 替换您选择的颜色图。

这是我如何使用它的完整示例。我在名为 theme.scss 的文件中包含以下内容,该文件包含在我的 angular.json“样式”条目中:

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core;

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue.
$primary: mat-palette($mat-red, 600, 400, 900);
$accent: mat-palette($mat-blue-grey, 500, 200, 700);
$background-color: map_get($mat-blue-grey, 50);

// The warn palette is optional (defaults to red).
$warn: mat-palette($mat-blue);

// Create the theme object (a Sass map containing all of the palettes).
$theme: mat-light-theme($primary, $accent, $warn);

// Insert custom background color
$background: map-get($theme, background);
$background: map_merge($background, (background: $background-color));
$theme: map_merge($theme, (background: $background));

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($theme);
@include my-app-theme($theme);

关于Angular Material主题 - 如何设置应用程序背景?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43919927/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com