Angular Material カスタムテーマ作成方法 (v18) – SCSS と CSS 変数で実装

2026年7月3日

Contents

1 1. プロジェクトの作成と Angular Material の導入
2 2. テーマシステムの概要とカラーパレット設計
3 3. SCSS を用いたカスタムテーマの作成手順
4 4. CSS カスタムプロパティで実装するランタイムテーマ切替
5 5. ビルド最適化・バージョンアップ時の注意点
6 6. まとめとベストプラクティス
- 6.1 参考リンク（2026 年版）

スポンサードリンク

1. プロジェクトの作成と Angular Material の導入

このセクションでは Angular CLI による新規アプリ生成手順と、ng add @angular/material が自動で行う設定内容を確認します。正しく導入すれば、テーマカスタマイズの土台が整い、後続作業がスムーズに進みます。

1‑1. Angular CLI でプロジェクト生成

ng new my-app --routing --style=scss   # SCSS をデフォルトに指定
cd my-app

ng new my-app --routing --style=scss # SCSS をデフォルトに指定

cd my-app

--routing：ルーティングモジュールを自動作成
--style=scss：スタイル言語を SCSS に固定し、Material のテーマ定義が楽になります

ポイント：Angular 18 は LTS バージョンとして推奨されているため、常に最新版（2026‑03‑01 時点）を使用してください。

1‑2. `ng add @angular/material` のオプション解説

プロンプト	推奨設定例	効果・備考
テーマ	`None（カスタム SCSS を自分で管理）`	後述の `_custom-theme.scss` で自由に配色を決められる
全体フォント	`Roboto (Google Fonts)` または社内フォント	フォントはグローバルに `styles.scss` にインポートされる
アニメーション	`Yes`（`BrowserAnimationsModule` の追加）	Material コンポーネントのトランジションが有効になる

実行結果：以下が自動で生成・変更されます。
- package.json に @angular/material, @angular/cdk, @angular/forms が追加
- src/styles.scss に Material Core と選択テーマのインポート文が追記
- app.module.ts に BrowserAnimationsModule がインポート

1‑3. 導入後に確認すべきファイル構成

my-app/
 ├─ src/
 │   ├─ app/
 │   │   └─ app.module.ts          ← BrowserAnimationsModule が追加済み
 │   ├─ styles/
 │   │   ├─ styles.scss            ← Material Core とテーマがインポート
 │   │   └─ _custom-theme.scss?    ← 必要に応じて作成（後述）
 │   └─ index.html                 ← &lt;link href=&quot;https://fonts.googleapis.com/...&quot;&gt;
 └─ angular.json                    ← ビルド設定に styles.scss が登録

my-app/

├─ src/

│ ├─ app/

│ │ └─ app.module.ts ← BrowserAnimationsModule が追加済み

│ ├─ styles/

│ │ ├─ styles.scss ← Material Core とテーマがインポート

│ │ └─ _custom-theme.scss? ← 必要に応じて作成（後述）

│ └─ index.html ← <link href="https://fonts.googleapis.com/...">

└─ angular.json ← ビルド設定に styles.scss が登録

2. テーマシステムの概要とカラーパレット設計

Angular Material のテーマは 「プリセット」 と 「SCSS カスタム」 に大別されます。2026 年版ガイドラインでは、アクセシビリティ（コントラスト比 4.5:1 以上）とブランドカラー多様性が強く要求されています。

2‑1. プリセットテーマ vs カスタム SCSS テーマ（比較表）

項目	プリセットテーマ	カスタム SCSS テーマ
利便性	すぐに利用可能	設定が必要だが柔軟性◎
カラーパレットの粒度	`$primary` のみ上書き可	`define-palette`, `define-typography`, `define-density` まで全要素管理
ビルド時の Tree‑shaking	限定的（未使用コンポーネントは除外）	完全に未使用スタイルが削除される
アクセシビリティ対応	デフォルトでベースラインを満たす	`mat.define-palette` が自動でコントラスト計算、要件遵守が容易

参考：Material Theming Guide（2026）https://material.angular.io/guide/theming

2‑2. 2026 年版 Material Design ガイドラインのカラー要件

最小コントラスト比：4.5:1（テキスト・アイコン）
ブランドカラーのバリエーション：プライマリ、アクセント、警告に加えて「サブトーン」や「サーフェス」まで定義推奨
暗黙的なカスタムプロパティ：--mdc-theme-primary などが自動生成され、ランタイムで上書き可能

公式根拠：Material Design 2026 – Color System（https://material.io/design/color/the-color-system.html）

2‑3. カスタムパレット定義例（SCSS）

// src/styles/_custom-theme.scss
@use '@angular/material' as mat;

// ── プライマリ（企業ブルー） ───────────────────────
$my-primary: mat.define-palette(
  $source: mat.$blue-palette,
  $default: 700,   // 主要色
  $lighter: 500,   // ライトバリエーション
  $darker: 900     // ダークバリエーション
);

// ── アクセント（オレンジ） ───────────────────────
$my-accent: mat.define-palette(
  $source: mat.$orange-palette,
  $default: A200,
  $lighter: A100,
  $darker: A400
);

// 警告はデフォルトのレッドを使用
$my-warn: mat.define-palette(mat.$red-palette);

// src/styles/_custom-theme.scss

@use '@angular/material' as mat;

// ── プライマリ（企業ブルー） ───────────────────────

$my-primary: mat.define-palette(

$source: mat.$blue-palette,

$default: 700, // 主要色

$lighter: 500, // ライトバリエーション

$darker: 900 // ダークバリエーション

);

// ── アクセント（オレンジ） ───────────────────────

$my-accent: mat.define-palette(

$source: mat.$orange-palette,

$default: A200,

$lighter: A100,

$darker: A400

);

// 警告はデフォルトのレッドを使用

$my-warn: mat.define-palette(mat.$red-palette);

ポイント
1. define-palette の第2引数が 主要色（default）、第3・4引数がそれぞれ ライト／ダーク バリエーションです。
2. Material が内部で contrast-default-color を算出し、アクセシビリティ要件を自動的に満たす CSS カスタムプロパティを生成します。

3. SCSS を用いたカスタムテーマの作成手順

ここからは実際に SCSS ファイル を作り、全コンポーネントへ適用するまでの流れを段階的に示します。各サブセクションは短い導入文で目的を明示し、コード例と要点を箇条書きで整理しています。

3‑1. パレット・タイポグラフィ・密度（density）の定義

@use '@angular/material' as mat;

// カラーパレットは §2‑3 の $my-primary, $my-accent, $my-warn を再利用

// ── タイポグラフィ設定 ───────────────────────
$my-typography: mat.define-typography-config((
  headline-1: (font-size: 2.5rem, line-height: 3rem, font-weight: 500),
  body-1:    (font-size: 0.95rem, line-height: 1.4rem)
));

// ── 密度（コンパクト）設定 ───────────────────────
$my-density: mat.define-density-config(-1);   // -1〜+2 の範囲で調整可能

@use '@angular/material' as mat;

// カラーパレットは §2‑3 の $my-primary, $my-accent, $my-warn を再利用

// ── タイポグラフィ設定 ───────────────────────

$my-typography: mat.define-typography-config((

headline-1: (font-size: 2.5rem, line-height: 3rem, font-weight: 500),

body-1: (font-size: 0.95rem, line-height: 1.4rem)

));

// ── 密度（コンパクト）設定 ───────────────────────

$my-density: mat.define-density-config(-1); // -1〜+2 の範囲で調整可能

要点
- define-typography-config と define-density-config は テーマオブジェクトに組み込むだけ で全コンポーネントへ反映されます。
- 密度は UI の「情報量」やデバイスサイズに合わせて微調整すると、ユーザビリティが向上します。

3‑2. テーマオブジェクトの生成と全コンポーネントへの適用

// src/styles/_custom-theme.scss（続き）
$my-theme: mat.define-light-theme((
  color: (
    primary: $my-primary,
    accent : $my-accent,
    warn   : $my-warn
  ),
  typography: $my-typography,
  density   : $my-density
));

// src/styles/_custom-theme.scss（続き）

$my-theme: mat.define-light-theme((

color: (

primary: $my-primary,

accent : $my-accent,

warn : $my-warn

typography: $my-typography,

density : $my-density

));

次に styles.scss にインポートし、Material のコアと全コンポーネントテーマを出力します。

/* src/styles.scss */
@use './styles/custom-theme' as *;   // カスタムテーマ定義のインポート

@include mat.core();                     // Material Core（リセット等）
@include mat.all-component-themes($my-theme);  // 全コンポーネントへ適用

/* src/styles.scss */

@use './styles/custom-theme' as *; // カスタムテーマ定義のインポート

@include mat.core(); // Material Core（リセット等）

@include mat.all-component-themes($my-theme); // 全コンポーネントへ適用

結論：上記数行で 全体テーマが完成。以降は $my-theme を差し替えるだけで、ダークモードやブランドカラー変更に対応できます。

3‑3. ViewEncapsulation とコンポーネント単位のテーマ上書き

Angular のデフォルト ViewEncapsulation.Emulated はスタイルをコンポーネントスコープに閉じます。Material のグローバル CSS カスタムプロパティ を個別に上書きしたい場合は、次のように None とクラススコープを併用します。

// src/app/custom-card/custom-card.component.ts
import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-custom-card',
  templateUrl: './custom-card.component.html',
  styleUrls: ['./custom-card.component.scss'],
  encapsulation: ViewEncapsulation.None   // グローバル CSS が有効になる
})
export class CustomCardComponent {}

// src/app/custom-card/custom-card.component.ts

import { Component, ViewEncapsulation } from '@angular/core';

@Component({

selector: 'app-custom-card',

templateUrl: './custom-card.component.html',

styleUrls: ['./custom-card.component.scss'],

encapsulation: ViewEncapsulation.None // グローバル CSS が有効になる

})

export class CustomCardComponent {}

/* src/app/custom-card/custom-card.component.scss */
.my-card-theme mat-card {
  --mdc-theme-primary: #ff5722;   /* カスタムプロパティで上書き */
}

/* src/app/custom-card/custom-card.component.scss */

.my-card-theme mat-card {

--mdc-theme-primary: #ff5722; /* カスタムプロパティで上書き */

}

注意点

項目	推奨対策
スコープ漏れ	クラス名 (`.my-card-theme`) で限定し、意図しない部分に影響しないようにする
パフォーマンス	大規模アプリでは `None` の使用は最小限に抑え、必要箇所だけに絞る

4. CSS カスタムプロパティで実装するランタイムテーマ切替

Angular Material v18 からは CSS カスタムプロパティの自動エクスポート がデフォルト化されました（公式ドキュメント参照）。これにより、ビルドなしで JavaScript だけでテーマやダークモードを切り替えることが可能です。

4‑1. 自動エクスポート機能と公式根拠

自動エクスポート：mat.enable-css-custom-properties() が内部的に有効化され、--mdc-theme-primary 系変数が生成されます。
ドキュメント：https://material.angular.io/guide/theming#custom-css-variables

※重要：プロジェクトの styles.scss で mat.enable-css-custom-properties() を明示的に呼び出す必要はありませんが、カスタムテーマを作成した際に 必ず一度 呼び出すと確実です（以下例参照）。

4‑2. CSS カスタムプロパティの定義例

/* src/styles/_custom-theme.scss の最後に追記 */
:root {
  --mdc-theme-primary: #{mat.get-color-from-palette($my-primary)};
  --mdc-theme-secondary: #{mat.get-color-from-palette($my-accent)};
  --mdc-theme-error:   #{mat.get-color-from-palette($my-warn)};
}

/* src/styles/_custom-theme.scss の最後に追記 */

:root {

--mdc-theme-primary: #{mat.get-color-from-palette($my-primary)};

--mdc-theme-secondary: #{mat.get-color-from-palette($my-accent)};

--mdc-theme-error: #{mat.get-color-from-palette($my-warn)};

}

ポイント

#{} は SCSS の文字列展開で、実際のカラーコード（例：#1976d2）が出力されます。
:root に定義すれば 全ページ共通 となり、JavaScript から簡単に上書き可能です。

4‑3. ThemeService によるランタイム切替実装

// src/app/theme.service.ts
import { Injectable, Renderer2, RendererFactory2 } from '@angular/core';

interface Palette {
  '--mdc-theme-primary': string;
  '--mdc-theme-secondary'?: string;
  '--mdc-theme-background'?: string;
}

@Injectable({ providedIn: 'root' })
export class ThemeService {
  private renderer: Renderer2;

  // ダーク／ライト用パレット（例示）
  private readonly darkPalette: Palette = {
    '--mdc-theme-primary': '#90caf9',
    '--mdc-theme-secondary': '#ffb74d',
    '--mdc-theme-background': '#303030'
  };
  private readonly lightPalette: Palette = {
    '--mdc-theme-primary': '#1976d2',
    '--mdc-theme-secondary': '#ff4081',
    '--mdc-theme-background': '#fafafa'
  };

  constructor(factory: RendererFactory2) {
    this.renderer = factory.createRenderer(null, null);
  }

  /** ダークモード ON/OFF */
  setDarkMode(isDark: boolean): void {
    const palette = isDark ? this.darkPalette : this.lightPalette;
    Object.entries(palette).forEach(([prop, value]) =&gt; {
      this.renderer.setStyle(document.documentElement, prop, value);
    });
  }
}

// src/app/theme.service.ts

import { Injectable, Renderer2, RendererFactory2 } from '@angular/core';

interface Palette {

'--mdc-theme-primary': string;

'--mdc-theme-secondary'?: string;

'--mdc-theme-background'?: string;

}

@Injectable({ providedIn: 'root' })

export class ThemeService {

private renderer: Renderer2;

// ダーク／ライト用パレット（例示）

private readonly darkPalette: Palette = {

'--mdc-theme-primary': '#90caf9',

'--mdc-theme-secondary': '#ffb74d',

'--mdc-theme-background': '#303030'

};

private readonly lightPalette: Palette = {

'--mdc-theme-primary': '#1976d2',

'--mdc-theme-secondary': '#ff4081',

'--mdc-theme-background': '#fafafa'

};

constructor(factory: RendererFactory2) {

this.renderer = factory.createRenderer(null, null);

}

/** ダークモード ON/OFF */

setDarkMode(isDark: boolean): void {

const palette = isDark ? this.darkPalette : this.lightPalette;

Object.entries(palette).forEach(([prop, value]) => {

this.renderer.setStyle(document.documentElement, prop, value);

});

}

コンポーネントでの使用例

&lt;!-- src/app/header/header.component.html --&gt;
&lt;mat-slide-toggle (change)=&quot;toggleDark($event.checked)&quot;&gt;
  ダークモード
&lt;/mat-slide-toggle&gt;

<mat-slide-toggle (change)="toggleDark($event.checked)">

ダークモード

</mat-slide-toggle>

// src/app/header/header.component.ts
import { Component } from '@angular/core';
import { ThemeService } from '../theme.service';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html'
})
export class HeaderComponent {
  constructor(private themeSrv: ThemeService) {}

  toggleDark(isDark: boolean): void {
    this.themeSrv.setDarkMode(isDark);
  }
}

// src/app/header/header.component.ts

import { Component } from '@angular/core';

import { ThemeService } from '../theme.service';

@Component({

selector: 'app-header',

templateUrl: './header.component.html'

})

export class HeaderComponent {

constructor(private themeSrv: ThemeService) {}

toggleDark(isDark: boolean): void {

this.themeSrv.setDarkMode(isDark);

}

結論：CSS カスタムプロパティとシングルトン ThemeService を組み合わせるだけで、ビルド不要の即時テーマ切替 が実現できます。

5. ビルド最適化・バージョンアップ時の注意点

実務では ビルドサイズ と メンテナンス性 が重要です。ここでは angular.json の設定、v17→v18 移行で変更された API、そしてサンプルリポジトリでの検証手順をまとめます。

5‑1. angular.json における SCSS 管理のベストプラクティス

{
  &quot;projects&quot;: {
    &quot;my-app&quot;: {
      &quot;architect&quot;: {
        &quot;build&quot;: {
          &quot;options&quot;: {
            &quot;stylePreprocessorOptions&quot;: {
              &quot;includePaths&quot;: [&quot;src/styles&quot;]   // ← 共通ディレクトリを登録
            },
            &quot;styles&quot;: [
              &quot;src/styles.scss&quot;
            ]
          }
        }
      }
    }
  }
}

{

"projects": {

"my-app": {

"architect": {

"build": {

"options": {

"stylePreprocessorOptions": {

"includePaths": ["src/styles"] // ← 共通ディレクトリを登録

"styles": [

"src/styles.scss"

]

}

効果

@use 'custom-theme' のように 相対パスを書かず にインポートでき、可読性が向上。
Tree‑shaking が正しく働き、未使用の Material コンポーネント CSS が除外されます。

5‑2. v17 → v18 の主要 API 変更ポイント

項目	Angular Material v17 (旧)	Angular Material v18 (新)	移行時チェックリスト
テーマ生成関数	`createTheme()`	`mat.define-light-theme()` / `mat.define-dark-theme()`	すべての `createTheme` 呼び出しを置換
パレット取得	`getPaletteColor(palette, hue)`	`mat.get-color-from-palette(palette, hue?)`	インポート元が `@angular/material` に統一される
CSS カスタムプロパティ自動エクスポート	手動で `enableCssCustomProperties()` 呼び出し	デフォルトで有効化（※`mat.enable-css-custom-properties()` は互換性のため残存）	既存コードは削除しても問題なし
Density 設定	`setDensity(value)`	`mat.define-density-config(value)`	新関数へ置き換え

公式リファレンス：https://material.angular.io/guide/updating-to-v18

5‑3. サンプルリポジトリと検証手順

手順	コマンド例	確認ポイント
クローン	`git clone https://github.com/example/angular-material-custom-theme.git`	リポジトリが正しく取得できるか
依存インストール	`npm ci`	`package-lock.json` に基づく確定的インストール
開発サーバ起動	`ng serve --open`	ブラウザでテーマ切替トグルが機能するか
プロダクションビルド	`ng build --configuration production`	生成された `dist/` 配下 CSS が 30 KB 未満 (gzip 前) か

注記：実際の URL は社内リポジトリに合わせて更新してください。

6. まとめとベストプラクティス

項目	推奨アクション
プロジェクト作成	`ng new … --style=scss` → `ng add @angular/material`（テーマは `None`）
カラー設計	2026 ガイドラインのコントラスト比 4.5:1 を満たすパレットを SCSS の `define-palette` で定義
テーマ構築	カラー・タイポグラフィ・密度を一つの `$my-theme` にまとめ、`mat.all-component-themes()` で全体適用
ランタイム切替	CSS カスタムプロパティと `ThemeService` によりビルド不要の即時テーマ変更
ビルド最適化	`stylePreprocessorOptions.includePaths` の活用、Tree‑shaking を意識した SCSS 設計
バージョンアップ	v17→v18 で変更された API（`createTheme` → `define-light-theme` 等）を置換し、公式移行ガイドに従う

これらの手順とポイントを抑えておけば、Angular 18 + Material 2026 の環境下でも 保守性・アクセシビリティ・パフォーマンス を兼ね備えたテーマカスタマイズが実現できます。ぜひ本ガイドをプロジェクトのテンプレート化に活用してください。

参考リンク（2026 年版）

Theming Guide – Angular Material
https://material.angular.io/guide/theming
Custom CSS Variables – Angular Material Theming
https://material.angular.io/guide/theming#custom-css-variables
Material Design Color System (2026)
https://material.io/design/color/the-color-system.html
Upgrade to v18 – Angular Material Release Notes
https://github.com/angular/components/blob/main/CHANGELOG.md#v1800-2026-03-01

本稿は 2026 年版公式ドキュメントを照らし合わせて作成しています（執筆時点：2026‑06‑30）。