角度材質 - 全局顏色變量

Question

查看Angular Material文檔，他們建議使用每個組件的-theme文件來管理將任何與主題相關的樣式應用於特定類。

從我的角度來看，這種方法的一些缺點是：

• 相當冗長
• 將風格分成兩個不同的位置
• 所有前端開發人員都需要了解Angular Material顏色的工作原理
• 使更改值更難（例如我們可能一直使用mat-color($primary, 200)作為邊框顏色，現在想要將其更改為mat-color($primary, 300) 。這將在整個過程中重復代碼庫。

給定一致的設計語言，將只使用一部分顏色（例如，主要調色板中的4種顏色，重點調色板中的3種顏色，一些不同的前景/背景顏色等）。

鑒於上述情況，使用主題定義精確顏色的_colors.scss是否更有意義，而不是希望開發人員每次都從主題中提取正確的值？

例如，可能是這樣的：

  $clr-primary-default: mat-color($primary);
  $clr-primary-contrast: mat-color($primary, default-contrast);
  $clr-primary-light: mat-color($primary, lighter);
  $clr-primary-dark: mat-color($primary, darker);

  $clr-accent-default: mat-color($accent);
  $clr-accent-light: mat-color($accent, lighter);
  $clr-accent-dark: mat-color($accent, darker);

  $clr-default-text: mat-color($foreground);
  $clr-secondary-text: mat-color($foreground, secondary-text);

  //etc

然后，我可以簡單地導入colors.scss文件並直接在*.component.scss colors.scss文件中使用變量，而不是為每個需要特定顏色的組件創建單獨的-theme文件。

只是想驗證上述情況是否合理並且我沒有遺漏任何明顯會導致賽道痛苦的事情？

另一個棘手的部分是如何在一個單獨的colors文件中實際定義這些文件，因為文件需要訪問主題數據。

Answer 1

為什么要使用@mixin ？

只是想驗證上述情況是否合理並且我沒有遺漏任何明顯會導致賽道痛苦的事情？

我能想到的唯一一件事就是你錯過了在一個應用程序中使用多個主題的機會。 使用Angular Material文檔中的方法，每個組件都有一個@mixin ，您可以使用不同的$theme變量多次@include 。

示例來自https://medium.com/@tomastrajan/the-complete-guide-to-angular-material-themes-4d165a9d24d1 ：

.default-theme {
  @include angular-material-theme($theme);
  @include custom-component-theme($theme);
}

.light-theme {
  @include angular-material-theme($light-theme);
  @include custom-component-theme($light-theme);
}

如果您將顏色作為scss變量導入到組件中並在那里使用它，那么這將不起作用。

單獨的文件顏色

另一個棘手的部分是如何在一個單獨的顏色文件中實際定義這些文件，因為文件需要訪問主題數據。

這其實是非常簡單的：我有一個單獨的文件src/styles/_variables.scss包含我的自定義顏色SCSS變量， 也是 $theme變量，我在以后使用src/theme.scss 。

@import '~@angular/material/theming';
// Theme configuration
$primary: mat-palette($mat-blue, 800, 500, 900);
$accent:  mat-palette($mat-blue, A200, A100, A400);
$warn: mat-palette($mat-red);

$theme: mat-light-theme($primary, $accent, $warn);

// Custom colors
$custom-colors: (
  custom-color-a: mat-color($mat-green, 700),
  custom-color-b: mat-color($mat-red, 400),
);
$theme: map-merge($theme, (custom-colors: $custom-colors));

要在組件中導入_variables.scss ，我必須將stylePreprocessorOptions添加到angular.json文件中 ：

"styles": [
  "src/styles.scss",
  "src/theme.scss"
],
"stylePreprocessorOptions": {
  "includePaths": [
    "src/styles"
  ]
},

現在我可以在我的組件的所有scss文件中導入我的變量：

@import 'variables';

.custom-class-a {
  background-color: map-get($custom-colors, custom-color-a);
  color: map-get($custom-colors, custom-color-b);
}

為什么我使用sass-map和map-merge ？

正如您所注意到的，我在sass-map $custom-colors收集我的自定義顏色並將它們合並到我的$theme變量中。 這樣我可以通過直接將其導入到我的組件樣式表中來使用我的自定義顏色（如上所述）， 或者我可以在我的組件@mixin使用它們，就像在Angular Material文檔中描述的那樣。

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

@mixin custom-component-theme($theme) {
  $custom-colors: map-get($theme, custom-colors);

  .custom-class-a {
    background-color: map-get($custom-colors, custom-color-a);
    color: map-get($custom-colors, custom-color-b);
  }
}

也許這種組合是你的前端開發者可以使用的方式？

Answer 2

我正在開發一個項目，我使用了Material 2主題，我使用了這種方法，我使用類名並全局添加顏色類。

這就是我做的：

FileName：mytheme-sidemenu.scss：

// 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;
  }
}

這是我的主題文件：mytheme-theme.scss：

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

// Primary theme
@include mat-core();
$mytheme-app-primary: mat-palette($mat-light-blue, 700, 600);
$mytheme-app-accent: mat-palette($mat-pink, 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-blue-grey, 500);
    $mytheme-alt-accent: mat-palette($mat-pink, 500);
    $mytheme-alt-warn: mat-palette($mat-deep-orange);
    $mytheme-alt-theme: mat-light-theme($mytheme-alt-primary, $mytheme-alt-accent, $mytheme-alt-warn);
    @include angular-material-theme($mytheme-alt-theme);
}
// Using the $theme variable from the pre-built theme you can call the theming function
@include mytheme-sidemenu($mytheme-app-theme);

並在app.module.ts更新此：

export class AppModule {
  constructor(
    @Inject(OverlayContainer) private overlayContainer: OverlayContainer
  ) {
    this.overlayContainer
      .getContainerElement()
      .classList.add("mytheme-alt-theme"); // this for double theme add to the root css class
  }
}

Answer 3

我已經在styles.css文件中將主要，重音和警告顏色定義為css自定義變量，如下所示：

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

$my-primary: mat-palette($mat-blue-grey);
$my-accent: mat-palette($mat-amber, A200, A100, A400);
$my-warn: mat-palette($mat-deep-orange);

$my-2-primary: mat-palette($mat-pink, 400, 200, 600);
$my-2-accent: mat-palette($mat-blue, A200, A100, A400);
$my-2-warn: mat-palette($mat-deep-orange, 500, 300, 700);

.dark-theme {
  $my-theme-dark: mat-dark-theme($my-primary, $my-accent, $my-warn);
  @include angular-material-theme($my-theme-dark);
  $primary: mat-color($my-primary);
  $accent: mat-color($my-accent);
  $warn: mat-color($my-warn);
  $fg_palette:map-get($my-theme-dark, foreground);
  $bg_palette:map-get($my-theme-dark, background);
  $fg:map-get($fg_palette, text);
  $bg:map-get($bg_palette, background);

  --primary: #{$primary};
  --accent: #{$accent};
  --warn: #{$warn};
  --fg: #{$fg};
  --bg: #{$bg};
}

.dark-theme-2 {
  $my-2-theme-dark: mat-dark-theme($my-2-primary, $my-2-accent, $my-2-warn);
  @include angular-material-theme($my-2-theme-dark);
  $primary: mat-color($my-2-primary);
  $accent: mat-color($my-2-accent);
  $warn: mat-color($my-2-warn);
  $fg_palette:map-get($my-2-theme-dark, foreground);
  $bg_palette:map-get($my-2-theme-dark, background);
  $fg:map-get($fg_palette, text);
  $bg:map-get($bg_palette, background);

  --primary: #{$primary};
  --accent: #{$accent};
  --warn: #{$warn};
  --fg: #{$fg};
  --bg: #{$bg};
}

並在我的任何組件中使用這些變量，如:(在my-custom-component.scss中 ）

.some-class {
    color: var(--primary)
}

.another-class {
    background-color: var(--bg)
}

.yet-another-class {
    border-color: var(--accent)
}

通過這樣做，我可以更改任何組件中與顏色相關的任何值，因為這些變量是全局的（在styles.css中定義）當我改變主題時，這些顏色也會根據新主題的顏色而改變