syncfusion-angular-themes

Syncfusion Angular コンポーネントのテーマ

Syncfusion Angular コンポーネントは、最新のカスタマイズ可能なテーマによる包括的なテーマ設定をサポートしています。このスキルでは、テーマの適用、外観のカスタマイズ、ダークモードの実装、CSS 変数の使用、アイコンの管理、そして一貫性のあるプロフェッショナルな Angular アプリケーション向けのカスタムテーマの作成について説明します。

目次

• ドキュメントとナビゲーションガイド
• クイックスタート
• 一般的なパターン

ドキュメントとナビゲーションガイド

組み込みテーマ

📄 参照： references/built-in-themes.md

• 10 種類以上のテーマを利用できます
• npm パッケージ、CDN、または個々のコンポーネントスタイルを使用したテーマの適用
• バンドルサイズを削減するために最適化された（lite）CSS ファイル

ダークモードの実装

📄 参照： references/dark-mode.md

• e-dark-mode クラスを使用したグローバルなダークモード
• コンポーネントごとのダークモード
• チェックボックスや切り替えボタンを使用した実行時のテーマ切り替え

CSS 変数のカスタマイズ

📄 参照： references/css-variables.md

• 各テーマ（Material 3、Fluent 2、Bootstrap 5.3、Tailwind 3.4）の CSS 変数構造
• プライマリ、成功、警告、危険、情報の各色のカスタマイズ
• TypeScript による実行時の色の変更
• テーマ固有の変数形式（RGB 値と hex 値）

アイコンライブラリ

📄 参照： references/icons.md

• アイコンライブラリのセットアップ（npm または CDN）
• e-icons クラスを使用したアイコンの利用
• アイコンのサイズ（小、中、大）
• アイコンの色と外観のカスタマイズ
• テーマごとに利用可能なアイコンセット

サイズモード

📄 参照： references/advanced-theming.md

• 標準とタッチ（大きめ）のサイズモード
• グローバルまたはコンポーネントごとのサイズモードの有効化
• 実行時のサイズモード切り替え

高度な機能

📄 参照： references/advanced-theming.md

• コンポーネントスタイルの統合
• カスタムテーマ作成のための Theme Studio

コンポーネントパッケージからテーマパッケージへのスタイルの移行

📄 参照： references/migration-styles.md

• コンポーネントパッケージからテーマパッケージへの移行
• SCSS と CSS リファレンスのテーマパッケージへの移行
• index ファイルによる依存関係の自動追加

クイックスタート

テーマのインストールと適用

手順 1：Syncfusion Angular パッケージとテーマパッケージをインストールする

npm install @syncfusion/ej2-angular-buttons@latest @syncfusion/ej2-tailwind3-theme@latest --save

手順 2：テーマ CSS をインポートする

オプション 1：npm からインポートする（推奨）

/* src/styles.css */
@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/button/index.css";

オプション 2：CDN を使用する

インストールされているバージョンを確認するには：

npm list @syncfusion/ej2-angular-buttons

次に、一致する CDN バージョンを使用します：

"styles": [
  "https://cdn.syncfusion.com/ej2/33.1.44/tailwind3.css"
]

⚠️ 重要： スタイルとレンダリングの問題を避けるため、CDN のバージョンはインストール済みの npm パッケージのバージョンと必ず一致させてください。

注： CSS と JavaScript のバージョンが自動的に同期されるため、npm インポート（オプション 1）の使用を推奨します。

一般的なパターン

パターン 1：ダークモードをグローバルに適用する

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

@Component({
  selector: 'app-root',
  template: `
    <div>
      <ejs-checkbox 
        label="Enable Dark Mode" 
        [checked]="isDarkMode" 
        (change)="handleDarkModeToggle($event)">
      </ejs-checkbox>
      <ejs-button cssClass="e-primary">Sample Button</ejs-button>
    </div>
  `
})
export class AppComponent {
  isDarkMode = false;

  handleDarkModeToggle(event: any): void {
    this.isDarkMode = event.checked ?? false;
    
    if (this.isDarkMode) {
      document.body.classList.add('e-dark-mode');
    } else {
      document.body.classList.remove('e-dark-mode');
    }
  }
}

パターン 2：CSS 変数でプライマリカラーをカスタマイズする

Fluent 2 テーマの場合：

/* src/styles.css */
:root {
  --color-sf-primary: #ff6b35;  /* Custom orange */
}

Material 3 テーマの場合（RGB 値を使用）：

/* src/styles.css */
:root {
  --color-sf-primary: 255, 107, 53;  /* RGB: Custom orange */
}

パターン 3：タッチモードをグローバルに有効にする

<body class="e-bigger">
  <app-root></app-root>
</body>

または、コンポーネントごとに設定します：

<ejs-button cssClass="e-bigger">Touch-Friendly Button</ejs-button>

パターン 4：読み込みを高速化するために最適化された CSS を使用する

/* src/styles.css - Lite version without bigger mode styles */
@import "@syncfusion/ej2-tailwind3-theme/styles/tailwind3-lite.css";

パターン 5：Syncfusion ライブラリのアイコンを使用する

アイコンパッケージをインストールする：

アイコンパッケージまたはテーマパッケージのいずれかをインストールできます：

npm install @syncfusion/ej2-icons@latest

/* or */

npm install @syncfusion/ej2-tailwind3-theme@latest

アイコンスタイルをインポートする：

/* src/styles.css */
/* Syncfusion theme package icon styles */
@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/icons/tailwind3.css";

/* or */

/* Syncfusion components package icon styles */
@import "../node_modules/@syncfusion/ej2-icons/styles/tailwind3.css";

コンポーネントでアイコンを使用する：

<span class="e-icons e-cut"></span>
<span class="e-icons e-medium e-copy"></span>
<span class="e-icons e-large e-paste"></span>