如何将材质主题颜色用于自定义对象?

我在找 reuse same color scss this post ,我强烈建议您理解如何在整个SCSS文件中重用值,以便使它们更易于维护。

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

然后像这样重复使用:

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

...

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

因此,您可能应该在层次结构中更高层次的SCSS文件(例如app.SCSS,如果这是应用程序范围的变量)中定义这些常量之一,并在组件中使用此变量。请务必阅读阿洛克的答案,以便进行更深入的分析。

始终使用搜索,并确保在询问与代码相关的问题时包含代码(使用诸如 JSFiddle

我想你需要一个.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;
      }
    }
 }

here

答案是:问题其实就是我要找的: 比我想象的要容易得多:

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

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

Angular Material Theming 内置功能?

这样,您只需创建一个自定义调色板,并将其影响为primary/accent/warn 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);
}

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

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