如何将材质主题颜色用于自定义内容？

Question

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

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

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

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

谢谢！！

Answer 1

我搜索了重复使用相同颜色的scss并且遇到了这篇文章 ，我强烈推荐这样你可以理解整个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 2

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

然后你需要做这件事。

1. 使用theme.scss文件，其中包含当前材质主题/动态主题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);

2. 使用单独的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;
  }
}

3. 现在，您可以在应用程序上使用自定义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;
      }
    }
 }

此外，您可以在此处查看此代码的运行示例

Answer 3

对此的回答：问题实际上是我在寻找的东西：它比我想象的容易得多：

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

角度材质 - 更改单击的mat-list-option的颜色

Answer 4

为什么不使用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 5

如果主题中包含一致的颜色变量名称，则可以使用这些变量。

但是使用javascript你可以获得元素的颜色并将其存储在变量中并在其他地方使用它。

document.getElementById("element").style.backgroundColor