如何將材質主題顏色用於自定義內容？

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