Visual Studio テーマの色をモダン化する

Visual Studio のテーマは、以前は細かい機能固有の色トークンに依存していました。時間の経過とともに、このアプローチでは何千もの特注値とカスタムカラーが生成され、一貫性とアクセシビリティの保証が困難になります。この問題に対処するために、明確な設計原則を中心にシステムを再構築しました。メンテナンスを容易にするセマンティックトークンの数を減らし、持続可能なアクセシビリティを実現するための予測可能なカラーランプ、Visual Studio、Windows プラットフォーム、その他の Microsoft ツール全体でよりまとまりのあるエクスペリエンスを実現します。

この記事では、Visual Studio 2026 と互換性を持つ以前のテーマの変更点と移行方法について説明します。

変更箇所

Visual Studio 2022 より前の Visual Studio テーマには、約 34 のカテゴリと約 1,806 個のカラートークンが含まれていました。多くの場合、拡張機能がさらに追加されました。この密度によって、いくつかの課題が発生しました。

多くのトークンはほぼ同じで、色合いまたは明るさがわずかに異なり、視覚的な混乱につながります。
個々の機能 (CodeAnalysis、Diagnostics、ManifestDesigner など) によって独自の一意のトークンが作成され、その結果、色の使用が断片化され、一貫性がありません。
カスタムエントリの数が多いため、アクセシビリティの色のコントラストを確認するのは困難でした。
全体的なユーザーエクスペリエンスが一貫性がなく、サーフェスが不一致または同期外に見えるようになりました。

Visual Studio 2022 テーマのカテゴリと色トークンの例を次に示します。

<Theme ...>
...
<Category Name="CodeAnalysis" ...>
   <Color Name="RenameError">...</Color>
   <Color Name="RenameResolvableConflict">...</Color>
</Category>
<Category Name="Diagnostics"...>
...
   <Color Name="AdvancedListItemSelected">
      <Background ... />
      <Foreground ... />
   </Color>
   <Color Name="ButtonBackgroundDisabled">...</Color>
   <Color Name="ButtonBorderDisabled">
      <Background ... />
   </Color>
   <Color Name="ButtonTextDisabled">
      <Background ... />
   </Color>
...
</Category>
...
<!-- many more feature-scoped categories and hundreds of tokens -->
</Theme>

Visual Studio 2026 は、予測可能な名前付けレベルを持ついくつかの意図優先カテゴリにトークンを統合します。すぐに使用できるシェルテーマに含まれるのは、最上位レベルのカテゴリが 4 つだけで、色トークンが 229 個 (約 87% 削減) になりました。

追加の Fluent セマンティックトークンを使用すると、シェル領域をより細かく制御できます。たとえば、 EnvironmentHeader トークンと EnvironmentTab トークンを使用すると、テーマの作成者は、他のシェルクロムのウィンドウヘッダーとタブヘッダーを個別に色分けできます。

Visual Studio 2026 テーマのセマンティックな意図優先トークンの例を次に示します。

<Theme ...>
<Category Name="Shell">
...
   <Color Name="ControlFillSecondary"> ... </Color>
   <Color Name="TextFillPrimary"> ... </Color>
   <Color Name="SolidBackgroundFillBase"> ... </Color>
...
</Category>
</Theme>

より少ないトークンでより優れた UX のロックを解除する理由

意図優先の名前付け: トークン名には、 ロール (ControlFill、TextFill、AccentFill、Stroke、SystemFill など) と階層 (プライマリ、セカンダリ、3 番目) が明確に反映され、使い方が直感的になります。
簡略化されたパレット: 少数の共有トークンセットを更新すると、シェルと拡張機能の両方の一貫性がすぐに向上します。
一貫性の向上: カスタマイズポイントが少ないほど、不一致が少なくなり、少し異なるバリエーションが排除されます。
アクセシビリティの向上: 一元化されたカラーランプとセマンティック状態 (成功、注意、重大、注意) により、コントラストの検証が容易になり、信頼性が高まります。
パフォーマンスと保守性の向上: セマンティックレイヤーは、細かいカラーセッターを置き換え、メンテナンスのオーバーヘッドを削減し、UI の品質を向上させます。

Visual Studioでトークンをカスタマイズする

Visual Studio 2026 (18.7) では、対話型のテーマの色をカスタマイズするための IDE 内のテーマの色オプションページが追加されます。 [ テーマの色の編集] コマンドを使用するか、[ ツール] > [オプション] > [環境] > Visual Experience > テーマの色を開いて、アクティブなテーマの Fluent テーマの色トークンを検索可能なグリッドに表示します。変更はライブ適用されるため、拡張機能のインストール、JSON の編集、Visual Studioの再起動を行わずにトークンを調整できます。

このページでは、テーマ作成者がテーマパッケージで定義するのと同じセマンティックトークン (エディター、ツールウィンドウ、シェルサーフェスのトークンなど) が公開されます。トークンを検索し、個々の値をリセットしながら、移行されたテーマがトークンの変更にどのように応答するかを検証できます。

テーマの色のオーバーライドは、選択したテーマに対して保存され、基本テーマの上にレイヤーとして適用されます。テーマを切り替えると、アクティブなオーバーライドセットが変更されます。これらの動作は、完全なテーマパッケージを作成せずにセマンティックトークンを検証したり、いくつかの値をカスタマイズしたりする場合に便利です。ユーザーがテーマのインストール後にトークン値をオーバーライドした場合、それらのトークンをリセットすると、テーマで指定された値が復元されます。

テーマのオーバーライドを共有するには、テーマ名の JSON ファイルを %LOCALAPPDATA%\Microsoft\VisualStudio\18.0_xxxxxxxx\ColorThemesに配置します。 Visual Studioは、IDE を再起動した後にファイルベースの変更を適用します。

テーマを Visual Studio 2026 に移行する

Visual Studio 2026 と互換性のある以前のテーマを作成するには、既存のトークンを新しいセマンティックトークンの小さなセットとマージします。以前のすべてのトークンを再作成する必要はありません。 Visual Studio 2026 では、最初に新しいトークンが読み取られ、その後、前のトークンにフォールバックされます。その方法を次に示します。

<Theme /> オブジェクトに FallbackId="{Light or Dark theme GUID}" オブジェクトを追加します。

基にするテーマ	FallbackId
淡色	{de3dbbcd-f642-433c-8353-8f1df4370aba}
Dark	{1ded0138-47ce-435e-84ef-9ec1f439b749}

前のテーマトークンの後に、最後の 2 つのカテゴリとして以下のトークンセットを追加します。カテゴリ名と GUID が次のようにコピーされていることを確認します。

ライトテーマ用の最小トークンセットスターター

<Theme Name="MyAwesomeLightTheme" ...>
<!-- existing theme categories here -->
<Category Name="Shell" GUID="{73708ded-2d56-4aad-b8eb-73b20d3f4bff}">
   <Color Name="AccentFillDefault">
      <Background Type="CT_RAW" Source="FF5649B0" />
   </Color>
   <Color Name="AccentFillSecondary">
      <Background Type="CT_RAW" Source="E55649B0" />
   </Color>
   <Color Name="AccentFillTertiary">
      <Background Type="CT_RAW" Source="CC5649B0" />
   </Color>
   <Color Name="SolidBackgroundFillTertiary">
      <Background Type="CT_RAW" Source="FFF9F9F9" />
   </Color>
   <Color Name="SolidBackgroundFillQuaternary">
      <Background Type="CT_RAW" Source="FFFFFFFF" />
   </Color>
   <Color Name="SurfaceBackgroundFillDefault">
      <Background Type="CT_RAW" Source="FFF9F9F9" />
   </Color>
   <Color Name="TextFillSecondary">
      <Background Type="CT_RAW" Source="9E000000" />
   </Color>
</Category>
<Category Name="ShellInternal" GUID="{5af241b7-5627-4d12-bfb1-2b67d11127d7}">
   <Color Name="EnvironmentBackground">
      <Background Type="CT_RAW" Source="FFEEEEEE" />
   </Color>
   <Color Name="EnvironmentBorder">
      <Background Type="CT_RAW" Source="FF5649B0" />
   </Color>
   <Color Name="EnvironmentIndicator">
      <Background Type="CT_RAW" Source="66757575" />
   </Color>
   <Color Name="EnvironmentLogo">
      <Background Type="CT_RAW" Source="FF5649B0" />
   </Color>
   <Color Name="EnvironmentLayeredBackground">
      <Background Type="CT_RAW" Source="80FFFFFF" />
   </Color>
</Category>
</Theme>

ダークベースのテーマ用の最小限のトークンセットスターター

<Theme Name="MyAwesomeDarkTheme" ...>
<!-- existing theme categories here -->
<Category Name="Shell" GUID="{73708ded-2d56-4aad-b8eb-73b20d3f4bff}">
   <Color Name="AccentFillDefault">
      <Background Type="CT_RAW" Source="FF9184EE" />
   </Color>
   <Color Name="AccentFillSecondary">
      <Background Type="CT_RAW" Source="80000000" />
   </Color>
   <Color Name="AccentFillTertiary">
      <Background Type="CT_RAW" Source="CC9184EE" />
   </Color>
   <Color Name="SolidBackgroundFillTertiary">
      <Background Type="CT_RAW" Source="FF282828" />
   </Color>
   <Color Name="SolidBackgroundFillQuaternary">
      <Background Type="CT_RAW" Source="FF2C2C2C" />
   </Color>
   <Color Name="SurfaceBackgroundFillDefault">
      <Background Type="CT_RAW" Source="FF2C2C2C" />
   </Color>
   <Color Name="TextFillSecondary">
      <Background Type="CT_RAW" Source="C8FFFFFF" />
   </Color>
</Category>
<Category Name="ShellInternal" GUID="{5af241b7-5627-4d12-bfb1-2b67d11127d7}">
   <Color Name="EnvironmentBackground">
      <Background Type="CT_RAW" Source="FF1C1C1C" />
   </Color>
   <Color Name="EnvironmentBorder">
      <Background Type="CT_RAW" Source="FF9184EE" />
   </Color>
   <Color Name="EnvironmentIndicator">
      <Background Type="CT_RAW" Source="66757575" />
   </Color>
   <Color Name="EnvironmentLogo">
      <Background Type="CT_RAW" Source="FF9184EE" />
   </Color>
   <Color Name="EnvironmentLayeredBackground">
      <Background Type="CT_RAW" Source="4D3A3A3A" />
   </Color>
</Category>
</Theme>

必要に応じて、前のテーマに合わせて色の値を調整します。

FAQ

これが重大な変更だったのはなぜですか?

テーマの色トークンの構造と名前付け規則の変更に加えて、ほとんどの UI コードは、以前の機能スコープのトークンやインラインスタイルではなく、Fluent Design System のセマンティックスタイルトークンを使用するようにリファクタリングされています。古い色やその他のスタイル設定リソースのほとんどは SDK に残りますが、最新のデザインを反映していないか、最新の UI で一貫して動作しない可能性があります。

以前のトークンを使用し続けることはできますか?

以前のトークンは一部の従来の画面では引き続き解決される場合がありますが、新規またはリファクタリングされた UI パスでは、新しいセマンティックトークンが優先して参照されます。非推奨のトークンに依存している場合は、テーマの不完全なリスクがあります。

クラシックブルーテーマはどこにありますか?

これを、色味の異なる一連のテーマとエディターの外観オプション [エクストラコントラスト] に置き換えました。近いオマージュが必要な場合は、コミュニティの Blue Steel テーマをインストールすることもできます。

トークンの数が少ないほど、カスタマイズが少なくなりますか?

いいえ。セマンティック階層を使用すれば、少さなパレットを調整するだけで、全体の見た目を大きく変えられます。アクセントカラーの色相、背景輝度の段階、システムの塗りを調整することで、それぞれ異なる個性を持つ外観も作れます。

パフォーマンスへの影響

リファクターにより、スタイル参照と冗長リソースが削減され、メモリの局所性が向上し、遅延ブラシの作成が簡略化されます。

エディターの色も変更されていますか?

現在、エディターは構文の色付けのほとんどを保持しています。この変更は、ツールウィンドウ、メニュー、ダイアログなどのシェル UI 共有サーフェスを対象としています。エディターの外観 (エクストラコントラストを含む) を個別に選択できます。

Last updated on 2026-09-02