获取其他元素的 Angular Material 主题配色方案/调色板

Posted 2023-03-06

技术标签:

【中文标题】获取其他元素的 Angular Material 主题配色方案/调色板【英文标题】：Get Angular Material theme color scheme/palette for other elements 【发布时间】：2018-03-27 09:12:48 【问题描述】：

我正在构建一个应用程序，但我想保持一致的配色方案，可以通过设置进行更改，所以我使用 Angular-Material，但我不确定如何在不直接的元素上获取配色方案提供使用color="primary" 为它们着色的能力，所以我只剩下试图弄清楚如何获得我的 Material 主题使用的颜色/配色方案。我希望它在主题更改时更改，例如，我的导航栏将适应主题更改，因为它设置为

<mat-toolbar color="primary" class="fixed-navbar mat-elevation-z10">

但是来自 Material 的网格元素不采用相同的参数，所以我只能尝试用足够接近的颜色设置它的样式，或者根本不匹配它（并且它不会适应主题变化）为在这里看到：

我希望它的颜色与此处的主题垫相匹配（并在导航栏设置中选择的选项上进行更改）

@import '~@angular/material/theming';

@include mat-core();   
    
$candy-app-primary: mat-palette($mat-red);
$candy-app-accent:  mat-palette($mat-deep-orange, A200, A100, A400);
$candy-app-warn:    mat-palette($mat-red);
$candy-app-theme: mat-dark-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

// 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.
.default 
  @include angular-material-theme($candy-app-theme);

.light 
  $light-primary: mat-palette($mat-blue, 200,300, 900);
  $light-accent:  mat-palette($mat-light-blue, 600, 100, 800);
  $light-warn:    mat-palette($mat-red, 600);
  $light-theme: mat-dark-theme($light-primary, $light-accent, $light-warn);
  @include angular-material-theme($light-theme);

@include angular-material-theme($candy-app-theme);

【问题讨论】：

【参考方案1】：

我找到了一个很棒的解决方法！！！！我很高兴能展示这一点，因为它多年来一直困扰着我如何实现这一点。所以这里是; 首先，将所有 css 文件更改为 scss；

对于现有项目

在控制台运行ng set defaults.styleExt=scss

（ng set 似乎已被贬值，但感谢用户@wlyles get/set have been deprecated in favor of the config command，您可以查看此修复）

将所有现有的.css 文件重命名为.scss 手动将.angular-cli.json中styles的文件扩展名从.css改为.scss 如果您没有使用 WebStorm Refactor 之类的工具进行重命名，请手动将所有 styleUrls 从 .css 更改为 .scss

对于未来的项目

只需为您的新项目使用ng new your-project-name --style=scss

对于所有使用 scss 的新项目，请使用 ng set defaults.styleExt=scss --global

现在您需要在您的应用根目录中拥有一个 theme.scss 文件，如下所示：

现在，您要在 style.scss 文件中添加以下内容（如您所见，我引用了背景颜色，但您可以将其更改为任何元素以根据需要为您的网站设置主题）：

编辑：你不需要把这个自定义的@mixin 元素放在你的styles.scss 中，你可以把它放在你的任何一个*name*.component.scss 中，然后简单地导入并包含它，就像你一样按照给出的例子做！

@import '~@angular/material/theming';

// Define a custom mixin that takes in the current theme
@mixin theme-color-grabber($theme) 
  // Parse the theme and create variables for each color in the pallete
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);
  // Create theme specfic styles
  .primaryColorBG 
    background-color: mat-color($primary);
  
  .accentColorBG 
    background-color: mat-color($accent);
  
  .warnColorBG 
    background-color: mat-color($warn);

现在转到您用于主题化 Material 2 项目的 theme.scss 文件，如果您需要帮助主题化，请查看：Material 2 Github - Theming guide

现在打开你的 theme.scss 并导入你的 style.scss，因为我的 theme.scss 位于 /src/app/theme.scss 文件夹的根目录中，我必须首先走出它来引用我的 /src/styles.scss 全局样式文件，如下所示；

@import '../styles';

然后我们必须在ALL我们的主题中包含我们创建的新自定义@mixin（如果您像我一样有多个，那么它会根据当前选择的主题改变颜色）。

将它包含在实际的 angular-material-theme include 之上，如下所示：

@include theme-color-grabber($theme);
@include angular-material-theme($theme);

如果您有像我这样的主题，请将其添加到相同的位置，如下所示：

.light 
  $light-primary: mat-palette($mat-blue, 200,300, 900);
  $light-accent:  mat-palette($mat-light-blue, 600, 100, 800);
  $light-warn:    mat-palette($mat-red, 600);
  $light-theme: mat-dark-theme($light-primary, $light-accent, $light-warn);
  @include theme-color-grabber($light-theme);
  @include angular-material-theme($light-theme);

你可以看到我在包含上方添加了我的theme-color-grabber，它是否高于或低于实际主题并不重要，因为它获取主题颜色是重点。

我的整个themes.scss 看起来像这样：

@import '~@angular/material/theming';
//We import our custom scss component here
@import '../styles';

@include mat-core();

$theme-primary: mat-palette($mat-red);
$theme-accent:  mat-palette($mat-deep-orange, A200, A100, A400);
$theme-warn:    mat-palette($mat-red);
$theme: mat-dark-theme($theme-primary, $theme-accent, $theme-warn);
//
@include theme-color-grabber($theme);
@include angular-material-theme($theme);
.light 
  $light-primary: mat-palette($mat-blue, 200,300, 900);
  $light-accent:  mat-palette($mat-light-blue, 600, 100, 800);
  $light-warn:    mat-palette($mat-red, 600);
  $light-theme: mat-dark-theme($light-primary, $light-accent, $light-warn);
  @include theme-color-grabber($light-theme);
  @include angular-material-theme($light-theme);

最后，我们现在可以在任何地方调用我们的主题颜色作为背景！例如，我给mat-grid-tile 'primary' 颜色（它不采用 color='' 参数，就像其他元素一样，例如mat-toolbar) 只需将其类设置为适当的类名，如下所示：

编辑：在您的每个组件 scss 文件中，您需要 import '<path-to>/theme.scss' 才能使您的主题应用于该组件。不要在styles.scss 中导入theme.scss，因为这会创建一个导入循环！

<mat-grid-list cols="4" rows="4" rowHeight="100px">
  <mat-grid-tile
    colspan="4"
    rowspan="5"
  class="primaryColorBG">
    <div fxLayout="column" fxLayoutAlign="center center">
      <h1 class="title-font">Callum</h1>
      <h1 class="title-font">Tech</h1>
    </div>
    <p>
      Ambitious and ready to take on the world of Information Technology,<br>
      my love for programming and all things I.T. has not wavered since I first got access<br>
      to my fathers computer at age 9.
    </p>
  </mat-grid-tile>

</mat-grid-list>

最后我们的结果会是这样的！：

红色主题激活

蓝色主题激活

【讨论】：

太棒了，有可能！ :3 是的，我很高兴，它真的把我逼到了墙角，但现在我可以让我所有的东西都工作了；D 我正在用这个创建一个导入循环。所以你很伤心，当你在 style.scss 中导入时，它们的颜色将可以在任何地方使用。但是我必须在styles.scss 中导入我的主题，当我将styles.scss 导入我的主题时，我会得到一个导入循环。那么这怎么可能呢？我所说的任何地方是指生成的每个可视组件的任何单个 scss，您不需要将“Theme.scss”导入 style.scss。感谢这份出色的指南！不过要注意的一件事是 ng set 已被弃用。 This question 应该可以解决所有问题。【参考方案2】：

将应用程序样式规则设置为 SASS：在运行时更新自定义组件主题需要使用@mixin，因此您的应用程序样式规则应该是 SASS（而不是 CSS）。您可以在此处阅读如何使用 SASS 配置 Angular-Cli：https://scotch.io/tutorials/using-sass-with-the-angular-cli

为自定义组件定义@mixin：在每个使用主题颜色的组件中，在其 .scss 文件中创建一个@mixin。为此组件提取所有颜色定义。并将它们移动到@mixin，如下所示：

// --- file: my-component_1.scss ---
@import '~@angular/material/theming'; // we need to add this so we could use Material functions
@mixin set-theme-component-1($theme)

  // Extract whichever individual palettes you need from the theme.
  $primary-palette: map-get($theme, primary);
  $accent-palette:  map-get($theme, accent);
  $warn-palette:    map-get($theme, warn);

  .component-container
  
    background-color: mat-color($primary-palette); // use the mat-color function to extract the color from the palette
    border-color: mat-color($warn-palette);
  


// Style rules that aren't theme/color related (size, font, etc)
.component-container

  width: 100%;
  ...

@mixin

// --- file: app.theme.scss ---
@import '~@angular/material/theming';
@include mat-core(); // include this only once in your code!!!

// each custom component that uses theme colors will be imported here - we need there @mixin
@import './some-path/some-folder/my-component_1'; // no need to specify .scss suffix

@mixin set-theme($theme) // define a new @mixin that will be invoked each time the theme is changed

  @include set-theme-component-1($theme); // invoke the mixin we defined for component_1
  // repeat this for each component that uses theme colors


// define your themes:
.theme-light

  $light-primary: mat-palette($mat-indigo);
  $light-accent:  mat-palette($mat-pink, A200, A100, A400);
  $light-warn:    mat-palette($mat-red);
  $light-theme:   mat-light-theme($light-primary, $light-accent, $light-warn);

  @include angular-material-theme($light-theme);
  @include set-theme($light-theme); // once the theme was set, invoke the mixin


.theme-dark

  $dark-primary:  mat-palette($mat-teal, A400);
  $dark-accent:   mat-palette($mat-grey, 800);
  $dark-warn:     mat-palette($mat-red, 700);
  $dark-theme:    mat-dark-theme($dark-primary, $dark-accent, $dark-warn);

  @include angular-material-theme($dark-theme);
  @include set-theme($dark-theme); // once the theme was set, invoke the mixin

就是这样:-)

它们是您需要执行的几个额外步骤，以便实时主题化工作（它们与自定义组件无关，所以我只会快速抛出它们）。 - 创建一个将保存当前主题的 ThemeService。此服务需要更新 OverlayContainer（Angular 材质使用此容器作为弹出窗口和下拉列表等模式的背景）。 - 将主题类（theme-dark 或任何其他）添加到 DOM 中的根元素之一。 - 将类 mat-app-background 添加到 DOM 中的根元素之一。这将根据主题更改背景颜色和字体颜色。 - 为了更好的软件设计 - 如果您有很多主题，拆分主题文件可能是维护海豚的好主意。

您可以在此处继续阅读： https://material.angular.io/guide/theming

或查看 Github 项目：https://github.com/angular/material2/blob/master/src/lib/core/theming/_theming.scss

【讨论】：

此解决方案有效，但您应该知道，通过在 global styles.scss 中导入组件的 .scss，您可以使所有组件的样式类对应用程序全局可用：如果您这样做可能会非常混乱'对类名不是很小心。【参考方案3】：

我是一个绝对的新手，也许这是一个不合时宜的做法，对这种情况没用，或者是一个消耗资源的解决方案，但是在 myangularthemefile.scss，我创建了这些类：

@import '~@angular/material/theming';
@include mat-core();

...

.matcolorprimary
    color: mat-color($mitjans-primary)


.matcoloraccent 
    color: mat-color($mitjans-accent);


.matcolorwarn 
    color: mat-color($mitjans-warn);

然后我将它们添加到组件模板中我需要的那些 html 元素中。

我想为背景颜色创建相同的结构会很容易......

这是否可以替代在小型项目的每个 shadow dom 组件样式表中包含 sass 工件？

【讨论】：

【参考方案4】：

我个人将它们放在 css4 变量中，这样我就可以像这样使用那些没有导入的变量

background: var(--color-primary)

这里是如何设置 css4 变量

@import '~@angular/material/theming';
// 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. Available color palettes: https://material.io/design/color/
$app-primary: mat-palette($mat-blue);
$app-accent:  mat-palette($mat-orange);
$app-warn:    mat-palette($mat-red);
$app-success: mat-palette($mat-light-green);

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

// 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($app-theme);

$primary: map-get($app-theme, primary);
$accent: map-get($app-theme, accent);

:root 
  --color-primary: #mat-color($app-primary);
  --color-accent: #mat-color($app-accent);
  --color-warn: #mat-color($app-warn);
  --color-success: #mat-color($app-success);

现在颜色可以在 css 文件中使用而无需导入

background: var(--color-primary)

【讨论】：

喜欢这种 CSS4 方法。是否避免在每个组件的所有 scss 文件中包含 mat-core()？ @JosepAlacid 是的太棒了。谢谢。我确认这适用于普通的 .css 文件......因为我需要它。真棒喜欢它..!!【参考方案5】：

更新：

此解决方案的新版本已在此处发布：

https://github.com/mirismaili/angular-material-dynamic-themes

^{如果您只需要所问问题的答案，可能最好参考下面的答案的第一个版本。另外，我建议阅读上述 repo 文档的这一部分：Use material themes for other elements。}

^{但如果你想在下面的视频中看到其他功能，我推荐这种新方法。}

现场演示：

https://stackblitz.com/github/mirismaili/AngularMaterialDynamicThemes

^{谢谢StackBlitz}

存档答案：

stackblitz here

最重要的部分：

在您的styles.scss（或themes.scss，如果有的话）：

@import '~@angular/material/theming';

@include mat-core();

@mixin define-css-classes($theme) 
    @include angular-material-theme($theme);

    $primary: map-get($theme, primary);
    $accent: map-get($theme, accent);
    $warn: map-get($theme, warn);
    $background: map-get($theme, background);
    $foreground: map-get($theme, foreground);

    // CSS THEME-DEPENDENT-STYLES ARE HERE:
    .theme-dependent-colors 
        background: mat-color($primary);
        color: mat-color($accent);
    


/**
* Define your custom themes in this map. 
* The `key` of each member is the name of CSS class for that theme. 
* To better understand the schema of the map, see `@each` loop below and especially pay attention to `map-has-key()` functions.
*/ 
$app-themes: (
        indigo-pink : (primary-base: $mat-indigo, accent-base: $mat-pink),
        deeppurple-amber: (primary-base: $mat-deep-purple, accent-base: $mat-amber),
        pink-bluegrey : (primary-base: $mat-pink, accent-base: $mat-blue-gray, is-dark: true),
        purple-green : (primary-base: $mat-purple, accent-base: $mat-green, is-dark: true),
);

@each $css-class, $theme in $app-themes 
    $primary: if(map-has-key($theme, primary), map-get($theme, primary), mat-palette(map-get($theme, primary-base)));

    $accent: if(map-has-key($theme, accent), map-get($theme, accent), mat-palette(map-get($theme, accent-base)));

    $warn: if(map-has-key($theme, warn), map-get($theme, warn), mat-palette(
            if(map-has-key($theme, warn-base), map-get($theme, warn-base), $mat-red)
    ));

    .#$css-class 
        @include define-css-classes(mat-light-theme($primary, $accent, $warn));
    

    .#$css-class-dark 
        @include define-css-classes(mat-dark-theme($primary, $accent, $warn));
    

    .theme-primary.#$css-class 
        background-color: mat-color($primary);
    

    ...

动态主题更改，在打字稿中使用setTheme()（参见here 和here）：

import Component, HostBinding from '@angular/core';
import OverlayContainer from "@angular/cdk/overlay";

const THEME_DARKNESS_SUFFIX = `-dark`;

export class AppComponent 
    @HostBinding('class') activeThemeCssClass: string;
    isThemeDark = false;
    activeTheme: string;

    setTheme(theme: string, darkness: boolean = null) 
        if (darkness === null)
            darkness = this.isThemeDark;
        else if (this.isThemeDark === darkness) 
            if (this.activeTheme === theme) return;
         else
            this.isThemeDark = darkness;

        this.activeTheme = theme;

        const cssClass = darkness === true ? theme + THEME_DARKNESS_SUFFIX : theme;

        const classList = this.overlayContainer.getContainerElement().classList;
        if (classList.contains(this.activeThemeCssClass))
            classList.replace(this.activeThemeCssClass, cssClass);
        else
            classList.add(cssClass);

        this.activeThemeCssClass = cssClass;
    

    constructor(overlayContainer: OverlayContainer) 
        this.setThemeClass('indigo-pink', false); // Default theme

在stackblitz 中查看其他内容。

CAVEAT：向应用添加 8 个动态材质主题（4 个亮 + 4 个暗）在我的例子中将构建 styles.css 的大小增加了 ~420 kB（与一个静态材质主题相比）。

【讨论】：

这太棒了！我必须再问一次：您真的必须经历所有这些才能在您的自定义 html 标记中使用您的材料主题颜色吗？并且只有一些“特殊”材质组件提供“color=”参数，让您可以将它们的颜色设置为来自主题（主要、重音等）的值？谢谢 @JensMander;您是否阅读过此部分：Use material themes for other elements？如果是但没有找到您的答案，请告诉我。 “再次”的意思是“虽然讨论似乎已经结束，但我想补充一个问题，我相信除了我之外，每个人都可以轻松回答”。 @Mir-Ismaili：感谢您的链接。因此，为了能够使用主题颜色，有必要付出很多麻烦。这对我来说很疯狂和奇怪。如此复杂的框架，然后您必须做 30 年前的事情；-) BTW：问题不在于您必须做的事情太难了。如果事情出乎意料地复杂，那是你认为你做错了。我简直不敢相信。【参考方案6】：

如果您想根据您的主题更改颜色，您可以简单地定义相同的变量，以不同的方式嵌套在定义主题的每个类中。例如，在我的应用程序中，主题是通过将一个类分配给我的应用程序的外部容器来设置的。因此，嵌套在每个“主题类”中，我可以将相同的变量分配为不同的值。所以当分配给整个应用的“主题类”发生变化时，我的变量的值也会随之变化：

.app-light-theme 
  @include angular-material-theme($theme);
  * 
     --my-variable-color: yellow;
    


.app-dark-theme 
  @include angular-material-theme($altTheme);
  * 
    --my-variable-color: purple;

然后在我的应用程序的任何 css 文件中，我可以通过使用 var() 来使用我的变量：

background-color: var(--my-variable-color);

颜色会根据应用设置的主题而改变。

您只需在每个主题中设置--primary --accent 和--warn 变量即可使用主题的主要颜色、强调颜色和警告颜色。

【讨论】：

【参考方案7】：

任何想在 Angular Material 12+ 中实现 mixin 的人

主题.scss：

    @use 'sass:map';
    @use '@angular/material' as mat;

    /// Gets the CSS property and it's computed value for both light and dark themes.
    /// @param String $property The css property to set. ex: background, color, background-color, border-color etc.
    /// @param String $color Theme color. Accepted values are: primary, accent, or warn.
    /// @param String | Number $hue The hue from the palette to use. If this is a value between 0 and 1, it will be treated as opacity. Ex values: 500, 500-contrast, darker, darker-contrast
    /// @returns CssProperty CSS property with it's computed value for the both light and dark themes.
    @mixin get-theme-color-property($property: null, $color: null, $hue: null) 
      // Get the color config from the theme.
      $light-color-config: mat.get-color-config($light-theme);
      // Get the required color palette from the color-config.
      $light-color-palette: map.get($light-color-config, $color);
    
      // Get the color config from the theme.
      $dark-color-config: mat.get-color-config($dark-theme);
      // Get the required color palette from the color-config.
      $dark-color-palette: map.get($dark-color-config, $color);
      @if $hue != null 
        // Finally get the desired color with the specified hue.
        $light-color: mat.get-color-from-palette($light-color-palette, $hue);
    
        // Finally get the desired color with the specified hue.
        $dark-color: mat.get-color-from-palette($dark-color-palette, $hue);
        & 
          #$property: $light-color;
        
    
        .dark-theme & 
          #$property: $dark-color;
        
       @else 
        // Finally get the desired color with the specified hue.
        $light-color: mat.get-color-from-palette($light-color-palette);
    
        // Finally get the desired color with the specified hue.
        $dark-color: mat.get-color-from-palette($dark-color-palette);
        & 
          #$property: $light-color;
        
    
        .dark-theme & 
          #$property: $dark-color;

用法：

@use '/path/to/theme' as theme;
.example 
  padding: 10px 20px;
  @include theme.get-theme-color-property(background, primary);
  @include theme.get-theme-color-property(color, primary, default-contrast); // or 'lighter-contrast' or 'darker-contrast'
  color: #fff;


<mat-toolbar class="example">

【讨论】：

以上是关于获取其他元素的 Angular Material 主题配色方案/调色板的主要内容，如果未能解决你的问题，请参考以下文章

Angular Material 指令在小型/移动显示器上隐藏元素

带有 Angular Material 动态高度标签的可滚动内容元素

Angular Material：“mat-dialog-content”不是已知元素

在 Angular Material CDK 拖放中，如何防止项目随着元素移动而自动重新排列？

Angular Material - mat-select：自定义填充溢出父元素

Angular Material - 图像上的元素叠加（在 md 卡中）