テーマの色トークンをVisual Studioする

Visual Studioでは、セマンティック カラー トークンを使用して、すべての UI サーフェスの外観を定義します。 これらのトークンは、Visual Studio 2026 で導入された Fluent デザイン システムの一部です。 各コントロールとサーフェスは、特定の 16 進色を参照する代わりに、名前付きトークンを参照します。 テーマはこれらのトークンの値を提供し、それに応じて IDE 全体が更新されます。

このリファレンスでは、使用可能なすべてのテーマの色トークン、その使用目的、およびライト、ダーク、ハイ コントラストテーマの既定値を一覧表示します。 このリファレンスは、カスタム テーマを作成する場合、または設定で個々のトークンをオーバーライドする場合、または テーマの色 エディターを使用する場合に使用します。

Visual Studioでテーマの色をカスタマイズする

Visual Studio 2026 (18.7) には、Fluent テーマの色トークンをカスタマイズするための製品内のテーマの色ページが含まれています。 [ テーマの色の編集] コマンドを使用するか、[ ツール] > [オプション] > [環境] > [Visual Experience] > テーマの色を開きます。 ページには、検索可能なグリッド内のアクティブなテーマのトークンが一覧表示されます。

トークンを選択し、色を選択して変更をすぐに適用します。 他のカスタマイズを削除することなく、個々のトークンをリセットできます。 オーバーライドはテーマごとに個別に保存され、選択したテーマの上に重ねて保存されるため、テーマを切り替えると、そのテーマに保存されたオーバーライドにも切り替わります。 使用可能なトークンに応じて、エディターの色、ツール ウィンドウ、シェル クロム、タブ ヘッダー、ウィンドウ ヘッダー、ホバーの色などの相互作用の状態をカスタマイズできます。

より広範なエンドユーザーの外観設定については、「Visual Studioでフォント、色、テーマを変更する」を参照してください。

テーマのオーバーライドの共有

トークンのオーバーライドを共有するには、JSON ファイルを %LOCALAPPDATA%\Microsoft\VisualStudio\18.0_xxxxxxxx\ColorThemesに配置します。 ファイル名は、オーバーライドするテーマと一致する必要があります。 たとえば、 dark.json はダーク テーマをオーバーライドします。 Visual Studio再起動して、一致するテーマにファイルベースのオーバーライドを適用します。

テーマ トークンのしくみ

各トークンは、色の値にマップされるセマンティック名です。 トークンは、次の 2 つのカテゴリに分類されます。

  • Shell (ShellColors) — Windows 11 Fluent デザイン システムから派生した一般的なコントロールとサーフェスのトークン。 これらのカバー ボタン、テキスト ボックス、背景、罫線、ステータス インジケーターなど。 これらのトークンは、一般的な UI スタイル設定に使用します。
  • シェル内部 (ShellInternalColors) — メイン ウィンドウ、タイトル バー、ステータス バー、ツール ウィンドウ ヘッダーなどの IDE クロム サーフェスのトークン。 これらはテーマのオーバーライド用に公開されますが、拡張コントロールのスタイル設定を目的としたものではありません。

色の値の形式

色は #AARRGGBB 形式 (アルファ、赤、緑、青) で指定されます。 たとえば、 #B2FFFFFF は不透明度が約 70% 白です。

ハイ コントラスト値は、システム カラー インデックス (たとえば、 00000008 = WindowText) です。 Visual Studioは、実行時にユーザーの現在のハイ コントラスト配色に対してこれらを解決します。

オーバーライドの動作

テーマ指定のトークン値は、選択したテーマの基本値です。 ユーザーがテーマの色エディターでトークンを変更すると、Visual Studio選択したテーマの上にオーバーライド レイヤーとしてその値が適用されます。 個々のオーバーライドを削除またはリセットすると、他のオーバーライドに影響を与えずに、選択したテーマの基本値にトークンが復元されます。

シェルの色

これらのトークンは、Visual Studio全体で共通のコントロールとサーフェスのスタイルを設定します。 Fluent テーマ リソースと同じ名前付け規則Windows 11従います。

アクセント

主要なボタン、選択したチェック ボックス、アクティブなインジケーターなどのアクセントカラーの要素のトークン。

トークン Description ライト 暗い ハイ コントラスト
AccentFillAlt 既定とは異なる色合いが必要な場合に使用される代替アクセント 背景 #FF3F3682 #FFD2CCF8 0000000D
AccentFillDefault 対話型要素、アクションの呼び出し、選択した状態の既定のアクセント 背景 #FF5649B0 #FF9184EE 0000000D
AccentFillDisabled 無効なアクセント背景 #37000000 #28FFFFFF 00000010
AccentFillSecondary ホバー状態を示すアクセント背景 #E55649B0 #E59184EE 0000000D
AccentFillSelectedTextBackground 作業中のテキスト フィールドで選択したテキストの背景 #FF0078D4 #FF005FB7 0000000D
AccentFillSelectedTextBackgroundSubtle 前景のテキストの色を反転できない場合に使用される、選択したテキストの背景を微妙に変更する #4D0078D4 #6660CDFF 0000000D
AccentFillSenary 3 次を超える状態の微妙なアクセント背景 #1F5649B0 #1F9184EE 0000000E
AccentFillTertiary 押された状態を示すアクセント背景 #CC5649B0 #CC9184EE 0000000D
AccentTextFillDisabled 無効なアクセント テキストとグリフの色 #5C000000 #5DFFFFFF 00000011
AccentTextFillPrimary 前景テキストと強調を必要とするグリフの主なアクセント テキストの色 #FF3F3682 #FFD2CCF8 00000002
AccentTextFillSecondary ホバー状態を示すアクセント テキスト #FF221D46 #FFD2CCF8 00000002
AccentTextFillTertiary 押された状態を示すアクセント テキスト #FF5649B0 #FFA79CF1 00000002

カード

カードのようなサーフェスのトークン — ページまたはレイヤーの背景に配置されるコンテンツ ブロック。

トークン Description ライト 暗い ハイ コントラスト
CardBackgroundFillDefault 既定のカードの背景 #B2FFFFFF #0DFFFFFF 00000005
CardBackgroundFillSecondary ホバー状態を示すカードの背景 #80F6F6F6 #08FFFFFF 00000005
CardBackgroundFillTertiary 押された状態を示すカードの背景 #FFFFFFFF #12FFFFFF 00000005
CardStrokeDefault 既定のカード罫線 #0F000000 #1A000000 00000010
CardStrokeDefaultSolid 透明なストロークが可視性の問題を引き起こす場合に使用されるカードの枠線 #FFEBEBEB #FF1C1C1C 00000010
CardStrokeDefaultSolidAlt 代替のカード罫線 #FFDADADA #FF0A0A0A 00000010

コントロール

ボタン、テキスト ボックス、コンボ ボックスなどの標準の対話型コントロールのトークン。

トークン Description ライト 暗い ハイ コントラスト
ControlAltFillDisabled 無効な代替コントロールの背景 #00FFFFFF #00FFFFFF 0000000F
ControlAltFillQuaternary 第 4 レベルの代替コントロールの背景 #18000000 #12FFFFFF 0000000E
ControlAltFillSecondary 第 2 レベルの代替コントロールの背景 #06000000 #1A000000 0000000E
ControlAltFillTertiary 第 3 レベルの代替コントロールの背景 #0F000000 #0BFFFFFF 0000000E
ControlAltFillTransparent 透明な代替コントロールの背景 #00FFFFFF #00FFFFFF 0000000E
ControlFillActiveInput アクティブなテキスト入力中に背景を制御する #FFFFFFFF #B21E1E1E 0000000F
ControlFillDefault 既定のコントロールの背景 (rest 状態) #B2FFFFFF #0FFFFFFF 0000000F
ControlFillDisabled 無効なコントロールの背景 #4DF9F9F9 #0BFFFFFF 0000000F
ControlFillQuaternary 第 4 レベルのコントロールの背景 #C2F3F3F3 #0FFFFFFF 0000000E
ControlFillSecondary 第 2 レベルのコントロールの背景 (ホバー) #80F9F9F9 #15FFFFFF 0000000E
ControlFillTertiary 3 番目のレベルのコントロールの背景 (押された) #4DF9F9F9 #08FFFFFF 0000000E
ControlFillTransparent 透明なコントロールの背景 #00FFFFFF #00FFFFFF 0000000F
ControlOnImageFillDefault イメージに配置された場合の既定のコントロールの背景 #C9FFFFFF #B21C1C1C 0000000F
ControlOnImageFillDisabled イメージに配置されたときにコントロールの背景を無効にしました #00FFFFFF #001E1E1E 0000000F
ControlOnImageFillSecondary 画像に配置された場合のホバー コントロールの背景 #FFF3F3F3 #FF1A1A1A 0000000E
ControlOnImageFillTertiary 画像上に配置された場合に押されたコントロールの背景 #FFEBEBEB #FF131313 0000000E
ControlSolidFillDefault 透明化によって可視性の問題が発生する場合に使用される、ソリッド コントロールの背景 #FFFFFFFF #FF454545 0000000F
ControlStrokeDefault 既定のコントロールの境界線 (rest 状態) #0F000000 #12FFFFFF 00000010
ControlStrokeForStrongFillWhenOnImage イメージに配置された強力な塗りつぶしの境界線を制御する #59FFFFFF #6B000000 0000000A
ControlStrokeOnAccentDefault アクセント背景のコントロールの既定の罫線 #14FFFFFF #14FFFFFF 0000000B
ControlStrokeOnAccentDisabled アクセント背景のコントロールの罫線を無効にしました #0F000000 #33000000 0000000B
ControlStrokeOnAccentSecondary アクセント背景のコントロールのホバー罫線 #66000000 #24000000 0000000B
ControlStrokeOnAccentTertiary アクセント背景のコントロールの押された罫線 #37000000 #37000000 0000000B
ControlStrokeSecondary 第 2 レベルのコントロールの境界線 #0F000000 #12FFFFFF 00000008
ControlStrokeTransparent 透明なコントロールの境界線 #00FFFFFF #00FFFFFF 0000000F
ControlStrongFillDefault スクロール バーなどのハイ コントラスト要素の強力なコントロール フィル #72000000 #8BFFFFFF 0000000A
ControlStrongFillDisabled 無効な強力なコントロールの塗りつぶし #51000000 #3FFFFFFF 0000000F
ControlStrongStrokeDefault チェックボックスとラジオ ボタンの強力なコントロール境界線 #9C000000 #9AFFFFFF 00000008
ControlStrongStrokeDisabled 無効な強力なコントロールの境界線 #37000000 #28FFFFFF 0000000B

ディバイダー

トークン Description ライト 暗い ハイ コントラスト
DividerStrokeDefault 既定の区切り線と区切り線 #14000000 #15FFFFFF 00000011

フォーカス

トークン Description ライト 暗い ハイ コントラスト
FocusStrokeInner 内側フォーカス インジケーター ストローク #FFFFFFFF #B2000000 00000005
FocusStrokeOuter 外側フォーカス インジケーター ストローク #E4000000 #FFFFFFFF 00000008
トークン Description ライト 暗い ハイ コントラスト
HyperlinkFillDisabled 無効なハイパーリンク テキストの色 #5C000000 #5DFFFFFF 00000013
HyperlinkFillPrimary プライマリ ハイパーリンク テキストの色 (rest) #FF003E92 #FF99EBFF 0000001A
HyperlinkFillSecondary ハイパーリンク テキストの色 (ホバー) #FF001A68 #FF60CDFF 0000001A
HyperlinkFillTertiary ハイパーリンク テキストの色 (押された) #FF005FB8 #E560CDFF 0000001A

レイヤーとサーフェス

背景、階層化されたサーフェス、およびページ レベルのコンテナーのトークン。

トークン Description ライト 暗い ハイ コントラスト
LayerFillAlt サーフェスの代替レイヤーの塗りつぶし #FFFFFFFF #0EFFFFFF 00000005
LayerFillDefault サーフェスとスクロール バーの既定のレイヤー塗りつぶし #80FFFFFF #4D3A3A3A 00000005
SolidBackgroundFillBase ページ サーフェスの基本の背景 #FFF3F3F3 #FF202020 00000005
SolidBackgroundFillBaseAlt 代替の基本ソリッド背景 #FFDADADA #FF0A0A0A 00000005
SolidBackgroundFillSecondary 2 次ソリッド背景 (Base の 1 レベル上) #FFEEEEEE #FF1C1C1C 00000005
SolidBackgroundFillTertiary 3 番目の単色の背景 #FFF9F9F9 #FF282828 00000005
SolidBackgroundFillQuaternary 第 4 レベルの単色の背景 #FFFFFFFF #FF2C2C2C 00000005
SolidBackgroundFillQuinary 第 5 レベルの単色の背景 #FFFDFDFD #FF333333 00000005
SolidBackgroundFillSenary 第 6 レベルの単色の背景 #FFFFFFFF #FF373737 00000005
SurfaceBackgroundFillDefault ベースの上の不連続サーフェスの既定の背景 #FFF9F9F9 #FF2C2C2C 00000005
SurfaceStrokeDefault 既定のサーフェス境界線 #66757575 #66757575 0000000A
SurfaceStrokeFlyout ポップアップ サーフェスの境界線 #0F000000 #33000000 0000000A

影と煙

トークン Description ライト 暗い ハイ コントラスト
ShadowFlyout ポップアップ、ヒント、コンテキスト メニューなどのポップアップ サーフェスの影の色 #24000000 #42000000 00000005
SmokeFillDefault 背景サーフェスを淡色化するためのスモーク オーバーレイの色 #4D000000 #4D000000 0000000F
SmokeFillInverse 逆煙オーバーレイの色 #C9FFFFFF #B21C1C1C 0000000F

目立たせない

ツール バー ボタンやメニュー項目など、視覚的な重みを最小限に抑えたコントロールのトークン。

トークン Description ライト 暗い ハイ コントラスト
SubtleFillDisabled 無効な微妙なコントロールの塗りつぶし #00000000 #00FFFFFF 00000005
SubtleFillSecondary 微妙なコントロールの塗りつぶし (ホバー) #0F000000 #0FFFFFFF 0000000F
SubtleFillTertiary 微妙なコントロールの塗りつぶし (押された) #0A000000 #0BFFFFFF 0000000F
SubtleFillTransparent 透明な微妙なコントロールの塗りつぶし #00FFFFFF #00FFFFFF 00000005

システムの状態

状態インジケーター (注意、注意、重大、成功、中立) のトークン。

トークン Description ライト 暗い ハイ コントラスト
SystemFillAttention 注意インジケーターの境界線とストローク (情報) #FF005FB7 #FF60CDFF 00000002
SystemFillAttentionBackground アテンション インジケーターの背景 #80F6F6F6 #08FFFFFF 00000018
SystemFillCaution 警告インジケーターの境界線とストローク #FF9D5D00 #FFFCE100 00000002
SystemFillCautionBackground 警告インジケーターの背景 #FFFFF4CE #FF433519 00000018
SystemFillCritical エラー インジケーターの境界線とストローク #FFC42B1C #FFFF99A4 00000002
SystemFillCriticalBackground エラー インジケーターの背景 #FFFDE7E9 #FF442726 00000018
SystemFillNeutral ニュートラル システムの塗りつぶし #72000000 #8BFFFFFF 00000002
SystemFillNeutralBackground ニュートラル システムの背景 #06000000 #08FFFFFF 00000018
SystemFillSolidAttentionBackground 透明感が可視性の問題を引き起こす場合に使用される、確実な注意の背景 #FFF7F7F7 #FF2E2E2E 00000018
SystemFillSolidNeutral ニュートラル インジケーターの塗りつぶし #FF8A8A8A #FF8A8A8A 00000002
SystemFillSolidNeutralBackground ニュートラルな背景 #FFF3F3F3 #FF2E2E2E 00000018
SystemFillSuccess 成功インジケーターの境界線とストローク #FF0F7B0F #FF6CCB5F 00000002
SystemFillSuccessBackground 成功インジケーターの背景 #FFDFF6DD #FF393D1B 00000018

テキスト

トークン Description ライト 暗い ハイ コントラスト
TextFillDisabled 無効なテキストの色 #5C000000 #5DFFFFFF 00000011
TextFillPrimary 一般的なコンテンツのプライマリ テキストの色 #E4000000 #FFFFFFFF 00000008
TextFillSecondary 補助コンテンツとヒントのセカンダリ テキストの色 #9E000000 #C8FFFFFF 00000008
TextFillTertiary 3 番目のテキストの色 (低コントラスト — 保存時のプライマリ コンテンツには使用しない) #72000000 #8BFFFFFF 00000008
TextOnAccentFillDisabled アクセントの背景で無効にされたテキスト #B2FFFFFF #80000000 00000003
TextOnAccentFillPrimary アクセント背景のプライマリ テキスト #FFFFFFFF #FF000000 0000000E
TextOnAccentFillSecondary アクセント背景の 2 番目のテキスト #B2FFFFFF #80000000 0000000E
TextOnAccentFillSelectedText アクセントの背景で選択したテキストのテキストの色 #FFFFFFFF #FFFFFFFF 0000000E

シェル内部の色

これらのトークンは、メイン ウィンドウ フレーム、ツール ウィンドウ ヘッダー、タブ、ステータス バー、およびその他のシェル レベルの要素である IDE クロム サーフェスを制御します。 これらは、テーマ作成者が IDE の全体的な操作性を変更するために使用する主要なトークンです。

Visual Studioシェル領域がより細かくなるにつれて Fluent カラー トークンが追加されます。 タブ ヘッダーやウィンドウ ヘッダーなどのクロム サーフェスに追加のトークンを表示できるため、テーマ作成者は他のシェル クロムとは別にこれらの領域のスタイルを設定できます。

Environment

メイン ウィンドウとシェル クロム サーフェスを制御するトークン。

トークン Description ライト 暗い ハイ コントラスト
EnvironmentBackground メイン ウィンドウの背景とフローティング ツール ウィンドウ #FFEEEEEE #FF1C1C1C 00000005
EnvironmentBadge ソリューション情報バッジの背景 (Live Share インジケーターなど) #B2FFFFFF #0FFFFFFF 0000000F
EnvironmentBody メイン シェル ウィンドウの本文/コンテンツ領域の背景 #FFEEEEEE #FF1C1C1C 00000005
EnvironmentBodyText メイン シェル ウィンドウの本文/コンテンツ領域のテキストの色 #E4000000 #FFFFFFFF 00000008
EnvironmentBorder アクティブなメイン ウィンドウの境界線 #FF5649B0 #FF9184EE 0000000A
EnvironmentBorderInactive 非アクティブなメイン ウィンドウの境界線と内部分割線 #FFADADAD #FF454545 00000003
EnvironmentHeader タブの背景とは別に、アクティブウィンドウまたはツールウィンドウヘッダーの背景 #FFF9F9F9 #FF282828 00000005
EnvironmentHeaderInactive タブの背景とは別に、非アクティブなウィンドウまたはツール ウィンドウ ヘッダーの背景 #FFF9F9F9 #FF282828 00000005
EnvironmentIndicator 自動非表示タブの罫線またはインジケーター #66757575 #66757575 0000000A
EnvironmentLayeredBackground InfoBars やタブ グループなどの階層化された要素の背景 #80FFFFFF #4D3A3A3A 00000005
EnvironmentLayeredBorder InfoBar やバッジなどのレイヤー要素の罫線 #0F000000 #80000000 00000010
EnvironmentLogo システム メニューにロゴの入力をVisual Studioする #FF5649B0 #FF9184EE 0000000D
EnvironmentTab ウィンドウ ヘッダーとツール ウィンドウ ヘッダーとは別に、アクティブなタブ ヘッダーの背景 #FFF9F9F9 #FF282828 00000005
EnvironmentTabInactive ウィンドウ ヘッダーとツール ウィンドウ ヘッダーとは別に、非アクティブなタブ ヘッダーの背景 #FFF9F9F9 #FF282828 00000005

Caption

ウィンドウ閉じるボタンのトークン。

トークン Description ライト 暗い ハイ コントラスト
CaptionControlCloseFillPrimary ボタンの背景を閉じる (ホバー) #FFC42B1C #FFC42B1C 0000000D
CaptionControlCloseFillSecondary ボタンの背景を閉じる (押された) #E6C42B1C #E6C42B1C 0000000D
CaptionControlCloseTextFillPrimary 閉じるボタン アイコンの色 (ホバー) #FFFFFFFF #FFFFFFFF 00000009
CaptionControlCloseTextFillSecondary 閉じるボタン アイコンの色 (押された) #B3FFFFFF #B3FFFFFF 00000009

ステータス バー

さまざまなモードにわたるステータス バーのトークン。

トークン Description ライト 暗い ハイ コントラスト
StatusBarBackgroundFillBuilding ビルド時のステータス バーの背景 #FF5649B0 #FF3F3682 00000005
StatusBarBackgroundFillDebugging デバッグ時のステータス バーの背景 #FFBC4B09 #FF7A2101 00000005
StatusBarBackgroundFillRest 既定の状態のステータス バーの背景 #8B000000 #4D000000 00000005
StatusBarBackgroundFillSolutionLoading ソリューションの読み込み時のステータス バーの背景 #FF005BA1 #FF003B6A 00000005
StatusBarControlFillSecondary ステータス バーのセカンダリ コントロールの塗りつぶし #33000000 #20FFFFFF 0000000E
StatusBarTextFillBuilding ビルド時のステータス バーのテキスト #FFFFFFFF #FFFFFFFF 00000008
StatusBarTextFillDebugging デバッグ時のステータス バーのテキスト #FFFFFFFF #FFFFFFFF 00000008
StatusBarTextFillDisabled 無効なステータス バーのテキスト #90FFFFFF #5DFFFFFF 00000011
StatusBarTextFillRest 既定の状態のステータス バーのテキスト #FFFFFFFF #FFFFFFFF 00000008
StatusBarTextFillSolutionLoading ソリューションの読み込み時のステータス バーのテキスト #FFFFFFFF #FFFFFFFF 00000008

ハイ コントラスト システムのカラー リファレンス

ハイ コントラスト値はシステム カラー インデックスです。 Visual Studioは、これらをユーザーのアクティブなハイ コントラスト配色にマップします。 一般的なインデックス:

Index システムの色
00000001 ActiveCaption
00000002 ActiveCaptionText
00000003 ActiveBorder
00000005 Window
00000008 WindowText
00000009 HotTrackColor
0000000A InactiveBorder
0000000B InactiveCaption
0000000D Highlight
0000000E HighlightText
0000000F ButtonFace
00000010 ButtonShadow
00000011 GrayText
00000013 InactiveCaptionText
00000018 GradientActiveCaption
0000001A HotLight