カスタマイズ

カスタム CSS

CSS 変数を上書きして色、スペーシング、個別のサーフェスを再調整する。

purplemux は CSS 変数システムの上に構築されています。ソースを触らずに視覚的なほぼすべてを変更できます — 外観 タブにルールを貼り付けて Apply をクリックすれば、すべての接続済みクライアントに即座に反映されます。

どこに書くか

設定 (⌘,) を開いて 外観 を選びます。Custom CSS というラベルの 1 つの textarea があります。

  1. ルールを書く。
  2. Apply をクリック。CSS は各ページの <style> タグに注入されます。
  3. Reset ですべての上書きをクリア。

CSS はサーバの ~/.purplemux/config.json の customCSS に保存され、接続するすべてのデバイスに適用されます。

サーバ全体、デバイス単位ではない
カスタム CSS はサーバ設定に住み、すべてのブラウザに付いてきます。1 つのデバイスを別のデバイスと違う見た目にしたい場合、現状サポートされていません。

仕組み

purplemux のほとんどの色、サーフェス、アクセントは :root (ライト) と .dark の下に CSS 変数として公開されています。変数を上書きすると、その変数が使われている場所すべて — サイドバー、ダイアログ、チャート、ステータスバッジ — に変更が波及します。

1 つの変数を変えるのは、コンポーネントセレクタを直接上書きするより常にほぼ良い選択です。コンポーネントクラスは安定 API ではなく、変数こそが API です。

最小限の例

ライトモードでサイドバーを少し暖色寄りにし、ダークサーフェスをさらに暗く:

:root {
  --sidebar: oklch(0.96 0.012 80);
}

.dark {
  --background: oklch(0.05 0 0);
}

または他に何も触らずブランドの色だけ変える:

:root {
  --primary: oklch(0.55 0.16 280);
}

.dark {
  --primary: oklch(0.78 0.14 280);
}

変数のグループ

外観パネルは Available Variables 配下に完全なリストを公開しています。主なバケツは:

  • Surface — --background、--card、--popover、--muted、--secondary、--accent、--sidebar
  • Text — --foreground と対応する *-foreground バリアント
  • Interactive — --primary、--primary-foreground、--destructive
  • Border — --border、--input、--ring
  • Palette — --ui-blue、--ui-teal、--ui-coral、--ui-amber、--ui-purple、--ui-pink、--ui-green、--ui-gray、--ui-red
  • Semantic — --positive、--negative、--accent-color、--brand、--focus-indicator、--claude-active

デフォルトの oklch 値とデザイン根拠を含む完全なトークンリストは、リポジトリの docs/STYLE.md を参照してください。それがソース・オブ・トゥルースです。

1 つのモードだけをターゲットにする

ライトには :root、ダークには .dark でラップします。クラスは next-themes によって <html> に設定されます。

:root {
  --muted: oklch(0.95 0.01 287);
}

.dark {
  --muted: oklch(0.18 0 0);
}

片方のモードだけ変えたい場合は、もう片方を触らずに残してください。

ターミナルは?

xterm.js ターミナルは、こちらの CSS 変数では駆動されない独自のキュレートされたパレットを使います。ターミナル タブで切り替えてください。ターミナルテーマ を参照。

次のステップ