web-dev-qa-db-ja.com

Angular材料-グローバルカラー変数

Angular Materialドキュメントを見て、特定のクラスへのテーマ関連のスタイルの適用を管理するために、コンポーネントごとに_-theme_ファイルを使用することをお勧めします。

私の観点から、このアプローチのいくつかの欠点は次のとおりです。

  • かなり冗長
  • スタイルを2つの異なる場所に分割します
  • すべてのフロントエンド開発者がAngularマテリアルの色がどのように機能するかを理解する必要があります
  • 値を変更するのが難しくなります（たとえば、境界線の色に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
_

次に、特定の色が必要なコンポーネントごとに個別の_-theme_ファイルを作成する代わりに、_colors.scss_ファイルをインポートして、変数を直接_*.component.scss_ファイルで使用できます。

上記が健全であり、トラックを苦しめることになる明白なものを見逃していないことを検証したいだけですか？

他のトリッキーな部分は、ファイルがテーマデータにアクセスする必要がある場合に、これらを個別のcolorsファイルで効率的に定義する方法です。

cssangularsassangular-material2
8
NRaf

@mixinを使用する理由

上記が健全であり、トラックを苦しめることになる明白なものを見逃していないことを検証したいだけですか？

私が考えることができる唯一のことは、1つのアプリケーションで複数のテーマを使用する機会を逃すことです。 Angular Material documentation からのアプローチを使用すると、各コンポーネントに@mixinがあり、異なる@include変数で複数回$themeを実行できます。

の例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変数としてインポートし、そこで使用する場合、これは機能しません。

色別ファイル

もう1つのトリッキーな部分は、テーマデータにアクセスする必要がある場合に、これらを個別のカラーファイルで実際に効率的に定義する方法です。

これは実際には非常に簡単です：私が使用しているsrc/styles/_variables.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 documentationに記載されている方法。

@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);
  }
}

たぶん、この組み合わせはあなたのフロントエンド開発者が作業できる方法ですか？

6
Friedrich

私はマテリアル2テーマを使用するプロジェクトに取り組んでおり、クラス名を使用してグローバルにカラークラスを追加するこのアプローチを使用しました。

これは私がやったことです：

ファイル名：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
  }
}
1
AlokeT

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

そして、私のようなコンポーネントでこれらの変数を次のように使用しました:( in my-custom-component.scss）

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

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

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

このようにすることで、これらの変数はグローバル（styles.cssで定義）であるため、任意のコンポーネントの色に関連する任意の値を変更できます。テーマを変更すると、これらの色も新しいテーマの色に従って変更されます

1
levent güney