テーマと外観
Elftia には豊富な外観カスタマイズオプションが用意されており、自分に合った AI ワークスペースを作れます。このページでは、すべての外観設定を詳しく説明します。
すべての外観設定は 設定 → 外観 ページにあります。
テーマモード
Elftia は 3 つのテーマモードに対応しています。
| モード | 説明 |
|---|---|
| ライトモード | 明るい環境に適した、温かみのある白い背景 |
| ダークモード | 目の疲れを抑える温かみのあるチャコール背景で、夜間の使用に適しています |
| システムに合わせる | OS のライト / ダーク設定に基づいて自動的に切り替わります |
設定方法:
- 設定 → 外観 を開きます。
- テーマモード セクションで、使いたいモードのカードをクリックします。
- 切り替えはすぐに反映され、再起動は不要です。
Elftia のダークモードは純粋な黒ではなく温かみのある色調を使うため、見た目がやわらかく快適です。ライトモードも純白ではなく温かみのあるクリーム色を使い、まぶしさを抑えます。
アクセントカラー
アクセントカラーは、インターフェース全体のボタン、リンク、選択状態などの要素に使われるテーマカラーです。
プリセットパレット
Elftia には、ワンクリックで適用できる厳選されたプリセットカラーが用意されています。
- 各プリセットカラーは、ライトモードとダークモードの両方で十分なコントラストと見た目の品質を確保できるよう調整されています。
- プリセットパレットには、暖色、寒色、ニュートラルな色調が含まれています。
カスタムカラー
プリセットが用途に合わない場合は、アクセントカラーをカスタマイズできます。
- パレットセクションでカスタムカラーのオプションを見つけます。
- 次のいずれかの形式でカラー値を入力します。
- HEX: 例
#FF6B35 - HSL: 例
hsl(20, 100%, 60%)
- HEX: 例
- プレビュー領域に、選択した色の効果がリアルタイムで表示されます。
アクセントカラーを選ぶときは、ライトモードとダークモードの両方で十分なコントラストがあることを確認してください。明るすぎる色はライトモードで目立ちにくく、暗すぎる色はダークモードで同じように目立ちにくくなることがあります。
フォント設定
Elftia では、インターフェースで使われるフォントを上書きできます。
UI フォント（サンセリフ）
インターフェースのテキストに使われるサンセリフフォントです。デフォルトは Inter です。
- フォント 設定セクションで、UI フォントの入力欄を見つけます。
- フォント名を入力します。システムにインストールされているフォントである必要があります。例:
"Noto Sans SC"— Source Han Sans"Microsoft YaHei"— Microsoft YaHei"PingFang SC"— PingFang（macOS）
- 空のままにすると、デフォルトフォントの Inter が使われます。
コードフォント（等幅）
コードブロックとエディタに使われる等幅フォントです。デフォルトは JetBrains Mono です。
- コードフォントの入力欄にフォント名を入力します。例:
"Fira Code"— リガチャ対応のプログラミングフォント"Source Code Pro"— Adobe のプログラミングフォント"Cascadia Code"— Microsoft のプログラミングフォント
- 空のままにすると、デフォルトフォントの JetBrains Mono が使われます。
フォントの変更はインターフェース全体にすぐ適用されます。指定したフォントがシステムにインストールされていない場合、ブラウザはデフォルトフォントにフォールバックします。
壁紙
Elftia では、フロストガラス風の透明効果を備えた背景壁紙をインターフェースに設定できます。壁紙のソースには画像またはグラデーションを使えます。さらに、多層の色や不透明度の調整を組み合わせることで、すっきりしたビジネス向けの見た目から、没入感のある雰囲気重視の見た目まで作れます。
壁紙ソース
壁紙には相互に排他的な 2 つのソースがあります。両方を設定した場合は、グラデーションが優先されます。
| ソース | 設定方法 | 備考 |
|---|---|---|
| 画像壁紙 | 画像を切り替え をクリックしてローカルファイルを選ぶか、入力欄に URL を貼り付けます | アプリデータディレクトリ themes/wallpapers/ に自動的にコピーされます。ライトモードとダークモードでは同じ画像を共有します |
| グラデーション背景 | グラデーション背景 トグルをオンにし、色数（1 色 / 2 色 / 3 色 / 4 色）を選んで、各スロットに色を設定します | 有効にすると、下の画像は一時的に非表示になります。トグルをオフにすると元に戻ります |
対応画像形式: JPG、PNG、WebP、GIF。
リモート画像壁紙
- 壁紙の入力欄に画像 URL を貼り付けます（例:
https://example.com/wallpaper.jpg）。 - 先に 詳細設定 で リモートリソースを許可 を有効にする必要があります。
- リモート画像のドメインが許可リストに入っている必要があります。
リモート画像を有効にすると、画像を読み込むために外部サーバーへリクエストが送信されます。プライバシー保護のため、デフォルトではオフになっています。信頼できるドメインだけを有効にしてください。
フロストガラスブラー
| パラメータ | 範囲 | デフォルト | 説明 |
|---|---|---|---|
| フロストガラスブラー | 0–30 px | 6 | 壁紙の背後に適用されるガウスぼかしです。値が大きいほど壁紙が強くぼけ、インターフェースのテキストが読みやすくなります |
背景オーバーレイ（壁紙の上に重ねる色味レイヤー）
オーバーレイは、壁紙を暗くしたり色味を加えたりして読みやすさを高めます。0.1.11 以降では、オーバーレイカラーはカラーピッカーで制御され、自動明度トグルも含まれます。
| パラメータ | 範囲 | デフォルト | 説明 |
|---|---|---|---|
| オーバーレイ強度 | 0–100 % | 70 | 全体の不透明度です。0 = 壁紙が完全に見える、100 = 完全に覆われる |
| オーバーレイカラー | カラーピッカー | ニュートラルグレー | HEX カラーを選びます。プレビューにすぐ反映されます |
| 自動明度 | トグル | オン | オンの場合、オーバーレイの明度はモードに従います（ライトモードでは白、ダークモードでは黒）。オフの場合、カラーピッカーの明度がそのまま適用されます |
| オーバーレイグラデーション | 任意のトグル + 1–4 色スロット | オフ | 有効にすると、単色オーバーレイの代わりに線形グラデーションが使われます。強度スライダーは引き続き全体の不透明度を制御します |
強度が 0 の状態で初めてオーバーレイカラーをドラッグすると、色の効果をすぐ確認できるように、システムが強度を自動的に 50 % まで上げます。
推奨オーバーレイ設定:
| 壁紙の種類 | フロストガラスブラー | オーバーレイ強度 |
|---|---|---|
| 風景写真 | 6–12 | 60–75 |
| グラデーション / 単色 | 0–4 | 50–65 |
| 情報量の多いパターン | 10–20 | 70–85 |
| 暗い画像 | 4–8 | 55–70 |
要素背景の色味
サイドバー項目、カード、ラベル、タブスイッチャーなどの半透明パネルは、デフォルトではテーマに従います（ライトモードでは温かみのあるクリーム色、ダークモードでは温かみのあるチャコール色）。要素背景の色味 をオンにすると、これらをカスタムカラーで一括して上書きできます。
| パラメータ | デフォルト | 説明 |
|---|---|---|
| 要素背景の色味（トグル） | オフ | オフの場合はテーマのデフォルトカラーが使われます。オンの場合は下の色が適用されます |
| 色味カラー | カラーピッカー | レール / カード / ラベル / タブ / コンテキストメニューを含む、すべての半透明サーフェスに影響します |
| 要素グラデーション | 任意 | 単色とは相互に排他的です。有効にすると 1–4 色のグラデーションが単色の代わりに使われ、各レイヤーはそれぞれの不透明度を保持します |
入力欄や Dialog / Modal など、不透明のままである必要がある要素には影響しません。
メッセージバブルカラー
メッセージバブル（ユーザーバブル / アシスタントバブル）は、デフォルトでは要素背景の色と不透明度を共有します。0.1.11 以降では、新しい独立制御項目が追加されています。
| パラメータ | デフォルト | 説明 |
|---|---|---|
| 独立制御（マスタートグル） | オフ | オフの場合、バブルは要素背景に従います。オンの場合にのみ、下の専用オプションが表示されます |
| ユーザーバブル | サブトグル + カラーピッカー | ユーザーメッセージバブルの色 / グラデーションを個別に設定します |
| アシスタントバブル | サブトグル + カラーピッカー | アシスタントメッセージバブルの色 / グラデーションを個別に設定します |
| バブル不透明度 | 0–100 %（デフォルト 35） | マスタートグルがオンの場合にのみ有効です。値を下げるとバブルがより透明になり、壁紙がよりはっきり見えます |
左右それぞれのバブルでは、「単色」または「グラデーション」を個別に選べます。これらも相互に排他的です。グラデーションを有効にすると、その側の単色は上書きされます。
すべての半透明パネルに同じ色調を使いたい場合は、要素背景の色味 をオンにするだけで、バブルも自動的に追従します。バブルとカードを別の色で区別したい場合にだけ、独立制御 をオンにしてください。
その他の詳細パラメータ
| パラメータ | 範囲 | デフォルト | 目的 |
|---|---|---|---|
| 要素不透明度 | 0–100 % | 0 | 実験的機能です。すべての半透明 UI を不透明に近づけます（壁紙が目立ちすぎる場合に使います） |
| 壁紙透明度 | 0–100 % | 100 | サーフェスの色味の強度係数です。0 = サーフェスが完全に透明（壁紙が最もはっきり見える）、100 = デフォルトのサーフェス色味 |
| コンパクトウィンドウで壁紙を無効化 | トグル | オフ | オンの場合、Mini / Selection などの小さなウィンドウで壁紙が自動的に無効になります |
壁紙を削除する
壁紙入力欄の上にある クリア ボタン（ゴミ箱アイコン）をクリックすると、現在の壁紙画像を削除できます。グラデーション背景は グラデーションを有効化 トグルで別途制御されます。
壁紙透明度の内部ルール
壁紙を設定すると、インターフェースは一連の透明度ルールを自動的に有効にします。
- メインコンテナ: 不透明度 35% のフロストガラス効果
- ボタンとカード: 不透明度 15–20% の半透明効果
- 入力欄: 読みやすさを確保するため不透明のまま
- ポップアップとダイアログ: 不透明のままで、壁紙の影響を受けません
- ドロップダウン / コンテキストメニュー: 不透明度 85% の、読みやすいフロストガラス
これらの値は自動的に処理されるため、手動で設定する必要はありません。上で説明した「要素背景の色味」と「メッセージバブル」オプションは、階層ごとのアルファ値を保ったまま、選択した色調を上に重ねます。
カスタム CSS
上級ユーザー向けに、Elftia にはカスタムスタイルを注入してインターフェースの外観を細かくカスタマイズできる完全な CSS エディタが用意されています。
CSS エディタを使う
- 外観設定 の カスタム CSS セクションを見つけます。
- クリックしてエディタを展開すると、シンタックスハイライト付きの CSS コードエディタが表示されます。
- カスタム CSS コードを書きます。
- コードはリアルタイムでインターフェースに適用されるため、効果をすぐ確認できます。
例: メッセージバブルをカスタマイズする
{/* Change the background color of user message bubbles */}
.chat-bubble[data-role="user"] {
background-color: hsl(var(--primary) / 0.15);
border-radius: 16px;
}
{/* Change the font size of AI replies */}
.chat-bubble[data-role="assistant"] {
font-size: 15px;
line-height: 1.7;
}
例: サイドバー幅をカスタマイズする
{/* Adjust the sidebar width */}
.session-panel {
width: 280px;
}
利用可能な CSS 変数
カスタム CSS では Elftia のテーマ変数を使えます。
| 変数 | 目的 |
|---|---|
--background | ページの背景色 |
--foreground | メインのテキストカラー |
--surface-0 | ベースサーフェスカラー |
--surface-1 | 第 1 階層のサーフェスカラー（カード、コンテナ） |
--surface-2 | 第 2 階層のサーフェスカラー（入力欄、セカンダリコンテナ） |
--surface-3 | 第 3 階層のサーフェスカラー（ポップアップ） |
--primary | テーマのアクセントカラー |
--border | 境界線の色 |
--muted-foreground | セカンダリテキストカラー |
--destructive | エラーや危険な操作に使う色 |
--success | 成功状態に使う色 |
アクションボタン
CSS エディタの上には、次のアクションがあります。
| ボタン | 機能 |
|---|---|
| Copy | 現在の CSS をクリップボードにコピーします |
| Paste | クリップボードから CSS を貼り付けます |
| Undo | 最後に保存した状態に戻します |
| Clear | すべてのカスタム CSS を削除します |
| Insert Compatibility Template | よく使われる互換性 CSS セレクタのテンプレートを挿入します |
カスタム CSS は非常に強力ですが、不適切なスタイルはインターフェースのレイアウト問題を引き起こすことがあります。問題が発生した場合は、CSS エディタの内容をクリアするだけでデフォルトスタイルに戻せます。
テーマ設定ファイル
すべての外観設定をテーマ設定ファイルにまとめて、エクスポートや共有ができます。
テーマをエクスポートする
- 外観設定ページで テーマ設定 セクションを見つけます。
- エクスポート ボタンをクリックします。
- 保存先を選びます。設定は JSON 形式で保存されます。
エクスポートされたファイルには、テーマモード、アクセントカラー、フォント設定、壁紙パラメータ（画像ファイルを除く）、カスタム CSS が含まれます。
テーマをインポートする
- インポート ボタンをクリックします。
- テーマの JSON ファイルを選択します。
- インポート後の効果をプレビューし、確認してから適用します。
作成したテーマ設定ファイルをコミュニティと共有できます。また、他のユーザーが共有したテーマを使って、Elftia をすばやく美しく整えることもできます。
コードエディタの外観
Elftia の内蔵コードエディタ（CodeMirror）には、独自の外観設定があります。
| 設定 | 説明 |
|---|---|
| Editor Theme | コードエディタのカラースキームを選びます |
| Word Wrap | 長いコード行を自動的に折り返すかどうか |
| Line Numbers | 行番号を表示するかどうか |
| Minimap | 右側にミニマップを表示するかどうか |
| Font Size | コードエディタのフォントサイズ |
これらの設定は、外観ページの コードエディタ セクションにあります。
外観のカスタマイズ中に表示の問題が起きた場合は、カスタム CSS をクリアするか、正常に動作することがわかっているテーマ設定をインポートしてみてください。さらに詳しいヘルプについては、よくある問題 を参照してください。