次の方法で共有

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% 削減) になりました。

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 2026 に移行する

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

  1. FallbackId="{Light or Dark theme GUID}" オブジェクト<Theme />オブジェクトを追加します。
基にするテーマ FallbackId
淡色 {de3dbbcd-f642-433c-8353-8f1df4370aba}
Dark {1ded0138-47ce-435e-84ef-9ec1f439b749}
  1. 前のテーマ トークンの後に、最後の 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>
  1. 必要に応じて、前のテーマに合わせて色の値を調整します。

FAQ

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

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

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

以前のトークンは、一部の以前のサーフェスに対してはまだ解決される可能性がありますが、新しい UI パスやリファクタリングされた UI パスでは、新しいセマンティック トークンが最初に読み取られます。 非推奨のトークンに依存している場合は、テーマの不完全なリスクがあります。

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

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

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

No---semantic レベルを使用すると、小さなパレットを調整することで、広範な視覚的シフトを作成できます。 アクセントの色合い、背景の輝度レベル、システムによる塗りつぶしを使用して、個性的な特徴を作り出すことができます。

パフォーマンスへの影響

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

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

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

  • Last updated on