Angular Material のカスタムテーマの設定方法

テーマを設定することで、アプリケーション全体で統一感のある色調を保ち、直感的にわかりやすいユーザーインターフェースを持つアプリケーションを構築することが容易になります。

Angular Material ではビルトインで提供される、マテリアルデザインのテーマがいくつか用意されています。その他、カスタムで自分の好きな配色でテーマを作成して、それをアプリケーションで使用することができます。

theme.scss を作成

まず、src フォルダ直下に theme.scss を作成します。

ファイル名はなんでも構いませんが (変えた場合は、これ以降ファイル名を読み替えてください)、拡張子は *.scss にしてください。SCSS というのは、SASS のスタイルの一つで、基本的に CSS のスーパーセットとして記述できます。SCSS をコンパイルすると CSS が生成されます。

theme.scssの中身は次のようにします。

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

// Available color palettes: https://material.io/design/color/
$candy-app-primary: mat-palette($mat-orange);
$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);

ここで、プライマリ色として $mat-orange、セカンダリとして $mat-pink、警告色として $mat-red が指定されています。

この色を他の色に変更することで、自分の好きな色のテーマを作成することができます。 使える色 (変数名) は node_modules/@angular/material/_theming.scss で定義されています。

angular.json のスタイルに theme.scss を追加

theme.scssを作成したら、angular.json 内に上記で作成した SCSS スタイルを追加します。

エントリは次の場所です。

{
    "projects": {
        "layout1": {
            "architect": {
                "build": {
                    "options": {
                        "styles": [
                            "src/styles.scss",
                            "src/theme.scss"
                            ...

これで、もう一度ビルドしなおせば、新しいテーマに設定されて起動するはずです。

% ng build
% ng serve

以上、Angular Material でカスタムのテーマを作成して設定する方法を紹介しました。