コンポーネントのスタイル
コンポーネントのスタイル（Component Style） は、ボタン、入力欄、タブ、メニュー、パネルの外観を設定する機能です。このページでは 7 種類のスタイルと調整項目、テーマや他の外観設定との関係を説明します。
テーマとコンポーネントのスタイル
テーマ（Theme） は明暗、背景、アクセント色を指定し、コンポーネントのスタイルは塗り、輪郭線、影、選択状態を指定します。どのスタイルも現在のテーマに従います。テーマを システムに合わせる（Follow System） にすると、使用中の明暗テーマに応じてスタイルも更新されます。
Windows、macOS、Linux で利用できます。切り替えても画面の配置、操作項目、保存済みのカスタム配色は保持されます。
スタイルを変更
- Ctrl+Shift+P（macOS は ⌘+,）で 設定（Settings） を開きます。
- 外観（Appearance） を選び、配色（Colors） の コンポーネントのスタイル を探します。
- 現在のスタイル名をクリックし、一覧から選びます。
変更はすべてのウィンドウに即座に反映され、再起動後も保持されます。既定は フラット（Flat） です。項目の下には選択中のスタイルの説明が表示され、調整項目がある場合はスライダーも表示されます。
7 種類のスタイル
以下の画像は同じ All filters パネルを使用しています。入力欄、ボタン、選択項目、輪郭線、影を比較できます。
フラット
フラット（Flat） は、コントロールに立体感や影を付けず、単色の面で表示します。tessoa の既定のスタイルです。
ニューモーフィズム
ニューモーフィズム（Neumorphic） は、背景、ボタン、コンテナーに近い色を使います。ボタンやカードは少し浮き上がり、入力欄、有効なスイッチ、現在のタブ、選択中の区分はくぼんで見えます。押したボタンも沈みます。ファイル一覧、サイドバー、メニューの行は平面の強調表示を保ちます。
テーマ背景の明度と色の強さを調整するため、カスタム配色の元の色と画面上の背景が異なる場合があります。鮮やかな背景は穏やかになります。設定の下の 色調の濃さ（Tint Strength） と 明度の追従（Follow Theme Lightness） で調整できます。
ガラス
ガラス（Glass） は、タブバー、アドレスバー、サイドバー、フッター、ポップアップメニューをすりガラス風にし、細いハイライトと柔らかい影を加えます。ファイル一覧、プレビュー、詳細パネル（Details panel）、ダイアログ、設定カードは不透明な背景を保ちます。
現在のタブや選択中の区分は、明るく浮き上がったブロックになります。すりガラスの表示で、背後のデスクトップや他のプログラムが見えるわけではありません。システム設定との関係はシステムの透明効果設定を参照してください。
ワイヤーフレーム
ワイヤーフレーム（Wireframe） は、直角の角、細い輪郭線、単一の背景色を使うターミナル風の表示です。コントロールには影を付けません。現在のタブ、選択中の区分、有効なスイッチは色を反転します。文字色で面を塗り、文字やアイコンを背景色にします。ファイル一覧、サイドバー、メニューの行は平面の強調表示を保ちます。
常に直角のため、角の丸み（Corner Roundness） はこのスタイルでは表示されません。フォントは引き続き外観のフォント設定に従います。
ネイティブ
ネイティブ（Native） は、Windows 11 風の小さな角丸、細い輪郭線、控えめな塗りを使います。ボタンは少し浮き上がり、現在のタブや有効なコントロールは明るいブロックになります。入力欄はフォーカス時に下線が強調されます。
すべてのプラットフォームで利用できます。ウィンドウの素材（Window Material） に対応する Windows 環境では、Mica や アクリル（Acrylic） も使えます。
トーナル
トーナル（Tonal） は、Material 3 風の配色を使います。背景にアクセント色を薄く混ぜ、現在のタブや有効なコントロールは淡い色のピル形にします。主操作のボタンはアクセント色で塗りつぶします。メニューは柔らかい影、ダイアログは大きめの角丸になります。
設定の下の 色味の強さ（Surface Tint） は、背景に混ぜるアクセント色の量を指定します。0% ではテーマ本来の背景色になります。コントロールの形や選択状態はトーナルのままです。
ブルータリズム
ブルータリズム（Brutalist） は、太い輪郭線と、ぼかさないはっきりした影を使います。現在のタブ、選択中の区分、有効なコントロールはアクセント色のブロックになり、ウィンドウの外枠にもアクセント色を加えます。ボタンを押すと面が影へ近づき、沈んで見えます。
内容領域、メニュー、ダイアログはテーマ本来の背景色を保ちます。ファイル一覧、サイドバー、メニューの行は平面の強調表示を保ちます。角の丸みは外観で調整できます。
調整項目
対応するスタイルを選択した場合だけ、コンポーネントのスタイル の下にスライダーが表示されます。変更はすべてのウィンドウに即座に反映されます。
| 設定項目 | スタイル | 既定値と範囲 | 効果 |
|---|---|---|---|
| 色調の濃さ | ニューモーフィズム | 既定 100%、0%～150% | 背景に残すテーマの色相の量を指定します。小さいほど無彩色の灰色に近づきます。 |
| 明度の追従 | ニューモーフィズム | 既定 0%、0%～100% | 元のテーマの背景明度へ近づける度合いです。大きいほど元のテーマに近づきますが、ボタンや入力欄の立体感は弱くなります。 |
| 色味の強さ | トーナル | 既定 5%、0%～15% | 背景に混ぜるアクセント色の量です。0% では元のテーマ色を使います。 |
値はテーマ間で共有され、スタイル変更や再起動後も保持されます。既定値に戻す（Reset to Defaults） は、フォントや行間などの外観設定とともに、3 項目すべてをリセットします。
他の外観設定
次の設定は、それを使うスタイルのときだけ表示されます。別のスタイルへ切り替えると一時的に隠れますが、値は保持されます。対応するスタイルに戻すと、再び適用されます。
| 設定項目 | スタイル | 効果と条件 |
|---|---|---|
| ウィンドウの素材 / コンテンツ領域を透ける（Translucent Content Area） | フラット、ワイヤーフレーム、ネイティブ | ウィンドウ素材に対応する Windows 環境でだけ表示します。コンテンツ領域を透けるには、素材が なし（None） 以外である必要もあります。 |
| タブの枠線（Tab Outline） / タブ枠線の太さ（Tab Outline Width） | フラット、ワイヤーフレーム、ブルータリズム | 非アクティブなタブの輪郭線の不透明度と幅を調整します。 |
| 角の丸み | フラット、ニューモーフィズム、ガラス、ネイティブ、トーナル、ブルータリズム | 画面の角の丸さを調整します。ワイヤーフレームは常に直角です。 |
ウィンドウの素材 には Windows 11 22H2 以降と、ウィンドウの透明効果に対応したグラフィック環境が必要です。macOS と Linux では利用できません。ニューモーフィズム、ガラス、トーナル、ブルータリズムは独自の不透明な面を使い、これらに切り替えると Mica やアクリルの効果を一時停止します。
システムの透明効果設定
ガラスは、Windows と macOS の透明効果設定に従います。
| プラットフォーム | 条件と効果 |
|---|---|
| Windows | 透明効果 をオフにすると、ガラスを不透明な面で表示します。ウィンドウ素材にも、この設定をオンにする必要があります。 |
| macOS | システム設定 → アクセシビリティ → ディスプレイ → 透明度を下げる をオンにすると、ガラスを不透明な面で表示します。 |
| Linux | デスクトップ環境の透明効果設定は読み取らず、すりガラス風の表示を使います。 |
システムの設定を変えた後は、次にテーマや設定を変更するか、再起動すると反映されます。ガラスとウィンドウ素材は別の効果であり、ガラスを選んでも Mica やアクリルは有効になりません。
テーマと配色 · ウィンドウ素材 · 表示モード · v0.28.0 更新履歴