テーマ設定の変更

テーマエディターでは、6 つのタブページを通じてテーマを詳細にカスタマイズできます。本ガイドでは、各設定ページの機能と操作方法を紹介します。

テーマエディターへの入り方

既存テーマの編集

カスタムテーマページで、テーマカード右上の三点メニュー（⋮）をクリック
「編集」を選択

新しいテーマの作成

「新しいテーマを作成」カードをクリック
基本テンプレートを選択してカスタマイズを開始

テーマエディターインターフェース

テーマエディターには 6 つの主要設定タブページが含まれています：

1. 基本情報 (⚙️)

テーマ名：テーマに分かりやすい名前を付ける
テーマ説明：テーマの特徴や適用シナリオを簡潔に説明
プレビュー機能：テーマ効果をリアルタイムで確認

2. カラースキーム (🎨)

ライトモード設定：ライトテーマの色設定
ダークモード設定：ダークテーマの色設定
メインカラー：主色調、副色調
セマンティックカラー：エラー、警告、情報、成功状態の色
背景色：デフォルト背景、ペーパー背景
テキスト色：メインテキスト、サブテキスト、無効テキスト
アクション色：ホバー、選択、フォーカス状態

3. フォント (📝)

グローバルフォント設定：フォントファミリー、基本サイズ
見出しフォント：H1-H6 各レベル見出しのサイズとスタイル
本文フォント：Body1、Body2 本文フォント設定
ボタンフォント：ボタンテキストスタイル
説明フォント：小フォントスタイル

4. コンポーネントカスタマイズ (🧩)

主要コンポーネント設定カード：

CssBaseline：グローバルスタイル基本設定
List：リストコンテナの基本スタイル
ListItem：リスト項目のスタイルと間隔
ListItemButton：⭐ リストボタンスタイル（サイドパネルタブで使用）
Avatar：アバターコンポーネントのサイズと形状
IconButton：アイコンボタンのスタイル
Icon：アイコンのサイズと色
Menu：メニューの背景と間隔
MenuItem：メニュー項目のスタイル
Dialog：ダイアログの外観
DialogTitle：ダイアログタイトルスタイル
ButtonBase：基本ボタン属性
Button：通常ボタンスタイル

⭐ マーク付きコンポーネントは界面への影響が大きい

5. JSON エディター (📄)

直接編集：JSON 形式で完全なテーマ設定を編集
フォーマット：JSON コードを自動フォーマット
検証：JSON 構文エラーをチェック
上級ユーザー：プログラミング経験のあるユーザーに適している

6. グローバルスタイル (🎨)

カスタム CSS：追加の CSS スタイルを追加
高度なカスタマイズ：デフォルトスタイルを上書き
注意：CSS 知識が必要

保存とプレビュー

リアルタイムプレビュー

編集時にプレビュー効果をリアルタイム表示
変更が即座にインターフェースに反映

保存オプション

保存ボタン：現在の変更を保存
キャンセルボタン：変更を破棄して戻る

重要な注意事項

カスタムテーマ機能にはプレミアム会員権限が必要
編集プロセス中にリアルタイムで効果をプレビュー
保存後、テーマが拡張機能全体に即座に適用

よく使う操作のコツ

まずカラースキームから始める：メインカラートーンを設定
フォントサイズを調整：読書体験を最適化
ListItemButton に注目：サイドパネルタブ表示に影響
プレビュー機能を活用：いつでも実際の効果を確認
コンポーネント説明を活用：各コンポーネントには詳細な役割説明がある

次のステップ

フォントサイズの調整：フォント設定の詳細を理解
リスト間隔の調整：サイドパネル表示効果を最適化
背景の設定：背景スタイルをカスタマイズ