syncfusion-vue-themes

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

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

目次

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

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

組み込みテーマ

📄 参照: 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 値と hex 値）

アイコンライブラリ

📄 参照: references/icons.md

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

サイズモード

📄 参照: references/advanced-theming.md

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

高度な機能

📄 参照: references/advanced-theming.md

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

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

📄 参照: references/migration-styles.md

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

クイックスタート

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

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

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

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

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

/* src/App.vue - <style> section */
@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/button/index.css";

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

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

インストール済みのバージョンを確認するには、次のコマンドを実行します。

npm list @syncfusion/ej2-vue-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：ダークモードをグローバルに適用する

<template>
  <div>
    <ejs-checkbox 
      label="Enable Dark Mode" 
      :checked="isDarkMode" 
      @change="handleDarkModeToggle"
    />
    <ejs-button cssClass="e-primary">Sample Button</ejs-button>
  </div>
</template>

<script>
import { CheckBoxComponent } from '@syncfusion/ej2-vue-buttons';
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';

export default {
  components: {
    'ejs-checkbox': CheckBoxComponent,
    'ejs-button': ButtonComponent
  },
  data() {
    return {
      isDarkMode: false
    };
  },
  methods: {
    handleDarkModeToggle(event) {
      this.isDarkMode = event.checked ?? false;
      
      if (this.isDarkMode) {
        document.body.classList.add('e-dark-mode');
      } else {
        document.body.classList.remove('e-dark-mode');
      }
    }
  }
};
</script>

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

Fluent 2 テーマの場合：

<style>
:root {
  --color-sf-primary: #ff6b35;  /* Custom orange */
}
</style>

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

<style>
:root {
  --color-sf-primary: 255, 107, 53;  /* RGB: Custom orange */
}
</style>

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

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

または、コンポーネント単位で設定します。

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

パターン 4：読み込みを高速化する最適化済み CSS を使用する

```vue
<style>
/* Lite version without bigger mode styles */
@import "@syncfusion/ej2-tailwind3-theme/styles/tailwind3-lite.css";
</style>

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

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

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

npm install @syncfusion/ej2-icons@latest

/* or */

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

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

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

/* or */

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

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

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