web-dev-qa-db-ja.com

Angular Material2でプライマリパレットのフォント色を変更するには？

公式の Angular Material2 のテーマのドキュメントでは、次のことを明確に述べています。

Angular Materialでは、テーマは複数のパレットを構成することで作成されます。特に、テーマは次のもので構成されます：

  • 主なパレット：すべての画面とコンポーネントで最も広く使用されている色。
  • アクセントパレット：フローティングアクションボタンとインタラクティブな要素に使用される色。
  • 警告パレット：エラー状態を伝えるために使用される色。
  • 前景パレット：テキストとアイコンの色
  • 背景パレット：要素の背景に使用される色。

ただし、すべての例で最初の3つだけを変更します。

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

$candy-app-primary: mat-palette($mat-Indigo);
$candy-app-accent:  mat-palette($mat-pink, A200, A100, A400);
$candy-app-warn:    mat-palette($mat-red);
$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);

@include angular-material-theme($candy-app-theme);

だから私の質問は次のとおりです。プライマリまたはセカンダリパレットのテキストの色を変更するには、前景パレットを変更するにはどうすればよいですか。

一部のWebサイト（ materialpalette.com 、 material.io ）には、簡単に視覚化できるようにカラーパレットが表示されていますが、 Angular Material2。

cssfontsangular-material2textcolor
12
CodeArtist

独自の前景マップを作成してデフォルトのテーマの色を変更し、初期化する前に作成したテーマにマージできます。方法は次のとおりです。

  1. 通常どおりテーマオブジェクトをビルドします。

    _@import '@angular/material/theming.scss';
@include mat-core();

// Choose colors
$my-app-primary: mat-palette($mat-blue-grey);
$my-app-accent:  mat-palette($mat-light-green);
$my-app-warn:    mat-palette($mat-red);

// Build theme object (its practically a map object)
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent, $my-app-warn);
_

  2. _@angular/material/_theming.scss_-> _$mat-light-theme-foreground_関数で定義されているフォアグラウンドマップを返すカスタム関数を使用して、カスタムフォアグラウンドを構築します。
    マップを操作して、必要なフィールドのみを定義し、他のフィールドはデフォルトのままにすることができます。

    _@function my-mat-light-theme-foreground($color) {
    @return (
        base:              $color,
        divider:           $black-12-opacity,
        dividers:          $black-12-opacity,
        disabled:          rgba($color, 0.38),
        disabled-button:   rgba($color, 0.38),
        disabled-text:     rgba($color, 0.38),
        hint-text:         rgba($color, 0.38),
        secondary-text:    rgba($color, 0.54),
        icon:              rgba($color, 0.54),
        icons:             rgba($color, 0.54),
        text:              rgba($color, 0.87),
        slider-off:        rgba($color, 0.26),
        slider-off-active: rgba($color, 0.38),
    );
};

// You can put any color here. I've chosen mat-color($my-app-primary, 700)
$my-foreground: my-mat-light-theme-foreground(mat-color($my-app-primary, 700));
_

  3. 前に作成したテーマを前景マップのみとマージし、カスタムテーマを初期化します。
    注： SCSSのすべてのマップは不変であるため、map-merge()は新しいマップインスタンスを返し、マップをその場で変更しません。したがって、別の変数_$my-app-theme-custom_結果テーマを保持します。

    _$my-app-theme-custom: map-merge($my-app-theme, (foreground: $my-foreground));

// Include your custom theme.
@include angular-material-theme($my-app-theme-custom);
_

注：使用していますAngular Material v2.0.0-beta.8

18
nyxz

ガイドは、 here にあるドキュメントWebサイトで入手できます。

最初に、$primary、$accent、$warnなどのテーマのパレットを定義し（ガイドでは$candy-app-プレフィックスが付いています）、$themeオブジェクトを作成します。

// Create the theme object (a Sass map containing all of the palettes).
$theme: mat-light-theme($primary, $accent, $warn);

すべてのパレットを含むテーマを作成したら、そこから前景パレットを取得できます。

$foreground: map-get($theme, foreground);

$foregroundパレットから、次のようなキーに基づいた値を取得できます。

secondary-text: rgba(black, 0.54),

または

text: rgba(black, 0.87)

secondary-textプロパティを取得するコードは次のとおりです。

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

2.0.0-beta.3から2.0.0-beta.2に切り替えたところ、フォルダー構造が異なって見えます、あなたは正しいです。現在は\node_modules\@angular\material\_theming.scss、_palette.scssfileはなくなっています。ただし、グローバル検索を実行できます： '$ mat-dark-theme-background：（'

_theming.scssには、mat-colorのような、すべての色、マップ、およびすべての関数があります

4
Wladimir

コードは次のとおりです。

// Foreground palette for light themes.
$mat-light-theme-foreground: (
  base:            black,
  divider:         rgba(black, 0.12),
  dividers:        rgba(black, 0.12),
  disabled:        rgba(black, 0.38),
  disabled-button: rgba(black, 0.38),
  disabled-text:   rgba(black, 0.38),
  hint-text:       rgba(black, 0.38),
  secondary-text:  rgba(black, 0.54),
  icon:            rgba(black, 0.54),
  icons:           rgba(black, 0.54),
  text:            rgba(black, 0.87)
);

マップは次の場所にあります：\ node_modules\@angular\material\core\theming\_palette.scss

「セカンダリテキスト」を取得する例：

$foreground: map-get($theme, foreground);

.foreground-color {
  color: mat-color($foreground, secondary-text);
}
1
Wladimir