如何将 Material Theme 颜色用于自定义内容？

Question

我正在尝试使用我的主题中的特定（背景）颜色来制作其他颜色的元素

这样做的设计方法是什么？有没有设计好的方法来做到这一点？

例如， 有没有办法说这个自定义元素应该使用当前主题的 -> 背景 -> 禁用颜色？等等

我很想能够说，例如，这个特定元素应该是当前主题 -> 背景调色板 -> disabled-list-option 的任何颜色。

谢谢！！

Answer 1

为什么不使用Angular Material Theming 内置函数？

这样，您只需要创建一个自定义调色板并将其影响到主要/重音/警告color（或使用预定义主题）和一点 scss（自定义基色）

然后在使用角材料组件时通过选择好的颜色自动完成其余的工作：

<button mat-raised-button color="primary">Primary</button>
<button mat-raised-button color="accent">Accent</button>
<button mat-raised-button color="warn">Warn</button>

如果需要，您还可以在您的组件中轻松使用这些调色板：

button {
    background-color: mat-color($accent);
}

Answer 2

我认为您需要一个 .scss 文件，您可以在其中放置所有自定义颜色变量并将它们用于通用 CSSclass 以应用于您的所有应用程序。

那么你需要做这些事情。

1. 使用包含当前材质主题/动态主题 scss 的 theme.scss 文件

---

@import '~@angular/material/theming';
@import './mytheme-sidemenu.scss';

// Primary theme
@include mat-core();
$mytheme-app-primary: mat-palette($mat-deep-purple, 700, 600);
$mytheme-app-accent: mat-palette($mat-red, A200, 900, A100);
$mytheme-app-warn: mat-palette($mat-deep-orange);
$mytheme-app-theme: mat-light-theme($mytheme-app-primary, $mytheme-app-accent, $mytheme-app-warn);
@include angular-material-theme($mytheme-app-theme);
// Secondary Theme
.mytheme-alt-theme {
    $mytheme-alt-primary: mat-palette($mat-teal, 500);
    $mytheme-alt-accent: mat-palette($mat-orange, 500);
    $mytheme-alt-warn: mat-palette($mat-red);
    $mytheme-alt-theme: mat-light-theme($mytheme-alt-primary, $mytheme-alt-accent, $mytheme-alt-warn);
    @include angular-material-theme($mytheme-alt-theme);
}

.mytheme-another-alt-theme{
   $mytheme-another-alt-primary: mat-palette($mat-blue, 500);
    $mytheme-another-alt-accent: mat-palette($mat-yellow, 500);
    $mytheme-another-alt-warn: mat-palette($mat-green);
    $mytheme-another-alt-theme: mat-light-theme($mytheme-another-alt-primary, $mytheme-another-alt-accent, $mytheme-another-alt-warn);
    @include angular-material-theme($mytheme-another-alt-theme);
}
// Using the $theme variable from the pre-built theme you can call the theming function
@include mytheme-sidemenu($mytheme-app-theme);

1. 使用单独的 scss 文件来保存您的自定义 css 类

---

// Import all the tools needed to customize the theme and extract parts of it
@import "~@angular/material/theming";
// Define a mixin that accepts a theme and outputs the color styles for the component.
@mixin mytheme-sidemenu($theme) {
  // Extract whichever individual palettes you need from the theme.
  $primary: map-get($theme, primary);
  $accent: map-get(
    $theme,
    accent
  ); // Use mat-color to extract individual colors from a palette as necessary.

  .col-primary {
    color: mat-color($primary, 500) !important;
  }
  .col-accent {
    color: mat-color($accent, 300) !important;
  }
}

1. 现在您可以在应用程序上使用您的自定义 css 类，并且不要忘记将 scss 文件链接放在您的 angular.json/angular-cli.json 中

---

You can also use this classes too:
.col-primary {
    & .hue {
      &-50 {
        color: mat-color($primary, 50) !important;
      }
      &-100 {
        color: mat-color($primary, 100) !important;
      }
      .
      .
      .
     &-800 {
        color: mat-color($primary, 800) !important;
      }
    }
 }

另外，你可以看到这段代码的运行示例here

Answer 3

我搜索了reuse same color scss 并遇到了this post，我强烈建议您这样做，以便您了解在整个 SCSS 文件中重用值，以使它们更易于维护。

总结起来，你可以通过定义这样的东西来定义 SCSS 变量：

$important-color: rgb(1, 2, 3);

然后像这样重用它：

class-1 {
    background-color: $important-color;
}

...

class-2 > span {
    color: $important-color;
}

因此，您可能应该做的是在层次结构中较高的 SCSS 文件中定义这些常量之一（例如 app.scss，如果这是一个应用程序范围的变量）并在您的成分。请务必阅读 Aloke 的回答，以便进行更深入的分析。

始终使用搜索，并确保在询问与代码相关的问题时包含您的代码（使用JSFiddle 等网站让事情变得更容易）。

Answer 4

这个问题的答案：问题实际上是我一直在寻找的： 这比我想象的要容易得多：

.mat-option {
  color : mat-color($foreground, text);
}

Angular Material - change color of clicked mat-list-option