syncfusion-blazor-themes

Syncfusion Blazor のテーマ

Theme Studio、SCSS のオーバーライド、本番環境向けのベストプラクティスを使用して、Syncfusion Blazor コンポーネントのテーマを適用およびカスタマイズするための完全ガイドです。

使用する場面

次のような場合にこのスキルを使用してください。

• 組み込みの Syncfusion テーマ（Material 3、Bootstrap 5、Fluent、Tailwind など）を適用する
• Theme Studio を使用してテーマの色をインタラクティブにカスタマイズする
• 使用するコンポーネントのみを含む、フィルター済みの最小限の CSS バンドルを生成する
• Sass の @use と CSS カスタムプロパティでテーマ変数をオーバーライドする
• 軽量テーマバリアントを使用してバンドルサイズを削減する
• 保存したテーマ設定（settings.json）をインポートして再利用する

次の場合は使用しないでください。

• Blazor プロジェクトの初期セットアップ → syncfusion-blazor-common を使用してください
• スクリプトの読み込みと CRG バンドル → syncfusion-blazor-common を使用してください
• スタイルシートの CSP 設定 → syncfusion-blazor-security を使用してください

クイックリファレンス

• Theme Studio の完全ガイド：theme-appearance.md を参照してください

利用可能なテーマの概要

テーマ	説明
Material 3	Google Material Design 3（推奨されるデフォルト）
Bootstrap 5	Bootstrap 5 デザインシステム
Fluent / Fluent 2	Microsoft Fluent デザインシステム
Tailwind CSS	Tailwind CSS デザイントークン
Bootstrap 4	Bootstrap 4 デザインシステム
Material	従来の Material Design
High Contrast	WCAG に準拠したアクセシブルなテーマ

軽量バリアント（例：fluent2-lite.css）は Web フォントを除外します。オフライン環境や帯域幅に制約のある環境に最適です。

クイックセットアップ：テーマの追加

Blazor Web App（.NET 8+）

~/Components/App.razor の <head> に追加します。

<link href="_content/Syncfusion.Blazor.Themes/material3.css" rel="stylesheet" />

Blazor WebAssembly スタンドアロン

wwwroot/index.html の <head> に追加します。

<link href="_content/Syncfusion.Blazor.Themes/material3.css" rel="stylesheet" />

⚠️ 重要：スタイルの競合を避けるため、Syncfusion のベーステーマは一度に 1 つだけ 参照してください。

Theme Studio のワークフロー

1. Blazor Theme Studio を開きます
2. ベーステーマを選択し、ライブプレビューで色をカスタマイズします
3. アプリで使用するコンポーネントのみを含めるようにフィルターします（CSS サイズが小さくなります）
4. パッケージをダウンロードします。.css、.scss、settings.json が含まれています
5. CSS を ~/wwwroot/styles/ にコピーし、ホストページで参照します
6. 今後の更新に備えて、settings.json をバージョン管理に保存します

SCSS 変数のオーバーライド例

/* Custom.scss */
:root {
  --color-primary-override: 54, 34, 89;
}

@use 'material3.scss' with (
  $primary: var(#{--color-primary-override})
);