syncfusion-react-themes

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

Syncfusion React コンポーネントは、モダンでカスタマイズ可能なテーマを備えた、包括的なテーマサポートを提供します。このスキルでは、テーマの適用、外観のカスタマイズ、ダークモードの実装、CSS 変数の使用、アイコンの管理、カスタムテーマの作成を通じて、一貫性のあるプロフェッショナルな React アプリケーションを構築する方法を説明します。

目次

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

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

組み込みテーマ

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

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

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

📄 参照： references/migration-styles.md

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

ダークモードの実装

📄 参照： 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

• styled-components との統合
• すべてのコンポーネントでのフォントのカスタマイズ
• カスタムテーマ作成用の Theme Studio

クイックスタート

テーマをインストールして適用する

ステップ 1：Syncfusion React パッケージとテーマパッケージをインストールする

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

ステップ 2：テーマ CSS をインポートする

オプション 1：npm テーマパッケージからインポートする（推奨）

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

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

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

インストール済みのバージョンを確認するには：

npm list @syncfusion/ej2-react-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"/>

注： npm からのインポート（オプション 1）をおすすめします。CSS と JavaScript のバージョンが自動的に同期されます。

一般的なパターン

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

import React, { useState } from 'react';
import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

function App() {
  const [isDarkMode, setIsDarkMode] = useState(false);

  const handleDarkModeToggle = (event) => {
    const checked = event.checked ?? false;
    setIsDarkMode(checked);
    
    if (checked) {
      document.body.classList.add('e-dark-mode');
    } else {
      document.body.classList.remove('e-dark-mode');
    }
  };

  return (
    <div>
      <CheckBoxComponent 
        label="Enable Dark Mode" 
        checked={isDarkMode} 
        change={handleDarkModeToggle}
      />
      <ButtonComponent cssClass="e-primary">Sample Button</ButtonComponent>
    </div>
  );
}

export default App;

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

Fluent 2 テーマの場合：

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

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

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

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

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

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

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

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

/* src/App.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/App.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 className="e-icons e-cut"></span>
<span className="e-icons e-medium e-copy"></span>
<span className="e-icons e-large e-paste"></span>