Angular Materialのカスタムテーマを設定する

6635 ワード
Angular2 angularMaterial Angular Angular テキストリンク

環境

angular-cli
$ ng -v
@angular/cli: 1.4.9
node: 8.1.3
os: darwin x64
package.json
...
    "@angular/material": "^2.0.0-beta.12",

元プロジェクトの説明

Angular Material導入済みのプロジェクトを参考に進めます。

app.module.tsでは次のAngular Materialコンポーネントをモジュールをインポート済みなことが前提です。

app.module.ts
import { MatToolbarModule, MatButtonModule } from '@angular/material';

また、style.scss にはプレビルドテーマであるindigo-pinkを設定してあります。

style.scss
@import "~@angular/material/prebuilt-themes/indigo-pink.css";

見た目はこんな感じです↓

テーマを作成・適用する

テーマ用のscssファイルを作成する

今回は、 src/theme/ 以下に my-theme.scss ファイルを作成します。
また、次のようにAngular Materialのベーススタイルをインポート&適用します。
※ プロジェクト全体で使用するcssの拡張子に関わらず、テーマファイルの拡張子は.scssとします

src/theme/orange-theme.scss
@import '~@angular/material/theming';
@include mat-core();

mat-palette を使って、primary、accent、warnそれぞれの色を定義します。
mat-palette に渡す色名の変数は、以下に定義されています。
material2/src/lib/core/theming/_palette.scss

src/theme/orange-theme.scss
// ...
$orange-theme-primary: mat-palette($mat-blue-grey);
$orange-theme-accent:  mat-palette($mat-pink, 500, 900, A100);
$orange-theme-warn:    mat-palette($mat-deep-orange);

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

@include angular-material-theme($orange-theme);

mat-light-theme または、 mat-dark-theme を使って、最終的なテーマを定義した後、angular-material-theme mixinにその変数を渡します。

src/theme/orange-theme.scss
// ...
$orange-theme: mat-light-theme($orange-theme-primary, $orange-theme-accent, $orange-theme-warn);

@include angular-material-theme($orange-theme);

angular-cliの設定

angular-cliが今回作成したscssをコンパイルするように設定します。styles セクションにファイル名を指定します。

angular-cli.json
"styles": [
  "styles.css",
  "theme/my-theme.scss"
],

適用後の確認

次のように、設定したテーマが適用されているかと思います。

参考

https://material.angular.io/guide/theming
https://alligator.io/angular/angular-material-custom-theme/
https://material.io/guidelines/style/color.html