syncfusion-javascript-themes

Syncfusion JavaScript コントロールのテーマ

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

目次

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

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

組み込みテーマ

📄 参照: 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 変数構造
• プライマリ、成功、警告、危険、情報の各色のカスタマイズ
• JavaScript による実行時の色の変更
• テーマごとの変数形式（RGB 値と 16 進数値）

アイコンライブラリ

📄 参照: 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 JavaScript パッケージとテーマパッケージをインストールする

npm install @syncfusion/ej2-buttons @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 を使用する

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

インストール済みのバージョンを確認するには、次のようにします。

npm list @syncfusion/ej2-buttons

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

<link href="https://cdn.syncfusion.com/ej2/{VERSION}/tailwind3.css" rel="stylesheet"/>


<link href="https://cdn.syncfusion.com/ej2/33.1.44/tailwind3.css" rel="stylesheet"/>

注： CSS と JavaScript のバージョンを自動的に同期できるため、npm によるインポート（方法 1）を推奨します。

一般的なパターン

ダークモードをグローバルに適用する

import { CheckBox } from '@syncfusion/ej2-buttons';
import { Button } from '@syncfusion/ej2-buttons';

// Initialize dark mode checkbox
const darkModeCheckBox: CheckBox = new CheckBox({
  label: 'Enable Dark Mode',
  change: (args) => {
    const isChecked: boolean = args.checked ?? false;
    
    if (isChecked) {
      document.body.classList.add('e-dark-mode');
    } else {
      document.body.classList.remove('e-dark-mode');
    }
  }
});
darkModeCheckBox.appendTo('#darkModeCheckbox');

// Initialize sample button
const button: Button = new Button({
  cssClass: 'e-primary',
  content: 'Sample Button'
});
button.appendTo('#sampleButton');

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 */
}

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

<body class="e-bigger">
  <div id="app"></div>
</body>

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

import { Button } from '@syncfusion/ej2-buttons';

const button: Button = new Button({
  cssClass: 'e-bigger',
  content: 'Touch-Friendly Button'
});
button.appendTo('#button');

読み込みを高速化するために最適化済み CSS を使用する

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

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 control package icon styles */
@import "../node_modules/@syncfusion/ej2-icons/styles/tailwind3.css";

HTML でアイコンを使用する：

<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>