Visual Studio token di colore del tema

Visual Studio usa token di colore semantici per definire l'aspetto di ogni superficie dell'interfaccia utente. Questi token fanno parte del sistema di progettazione Fluent introdotto in Visual Studio 2026. Anziché fare riferimento a colori esadecimali specifici, ogni controllo e superficie fa riferimento a un token denominato. I temi forniscono valori per questi token e l'intero IDE viene aggiornato di conseguenza.

Questo riferimento elenca tutti i token di colore del tema disponibili, l'utilizzo previsto e i relativi valori predefiniti nei temi Light, Dark e High Contrast. Usare questo riferimento quando si creano temi personalizzati o si eseguono l'override di singoli token nelle impostazioni.

Funzionamento dei token del tema

Ogni token è un nome semantico mappato a un valore di colore. I token sono organizzati in due categorie:

Shell (ShellColors) - token per controlli e superfici comuni, derivati dal sistema di progettazione FluentWindows 11. Questi pulsanti di copertina, caselle di testo, sfondi, bordi, indicatori di stato e altro ancora. Usare questi token per lo stile generale dell'interfaccia utente.
Shell interna (ShellInternalColors): token per le superfici chrome dell'IDE, ad esempio la finestra principale, la barra del titolo, la barra di stato e le intestazioni della finestra degli strumenti. Questi elementi vengono esposti per gli override del tema, ma non sono destinati allo stile del controllo dell'estensione.

Formato del valore colore

I colori vengono specificati nel #AARRGGBB formato (alfa, rosso, verde, blu). Ad esempio, #B2FFFFFF è bianco a circa 70% opacità.

I valori a contrasto elevato sono indici di colore di sistema (ad esempio, 00000008 = WindowText). Visual Studio risolve questi valori nella combinazione di colori corrente a contrasto elevato dell'utente in fase di esecuzione.

Colori della shell

Questi token stilino controlli e superfici comuni in Visual Studio. Seguono le stesse convenzioni di denominazione di Windows 11 risorse del tema Fluent.

Principale

Token per elementi di colore principale, ad esempio pulsanti primari, caselle di controllo selezionate e indicatori attivi.

token	Description	Light	Scuro	Contrasto elevato
`AccentFillAlt`	Sfondo principale alternativo, usato quando è necessaria una tonalità diversa da Default	`#FF3F3682`	`#FFD2CCF8`	`0000000D`
`AccentFillDefault`	Sfondo principale predefinito per elementi interattivi, chiamate all'azione e stati selezionati	`#FF5649B0`	`#FF9184EE`	`0000000D`
`AccentFillDisabled`	Sfondo accentato disabilitato	`#37000000`	`#28FFFFFF`	`00000010`
`AccentFillSecondary`	Sfondo principale che indica lo stato del passaggio del mouse	`#E55649B0`	`#E59184EE`	`0000000D`
`AccentFillSelectedTextBackground`	Sfondo per il testo selezionato nei campi di testo attivi	`#FF0078D4`	`#FF005FB7`	`0000000D`
`AccentFillSelectedTextBackgroundSubtle`	Sfondo del testo selezionato sottile, usato quando il colore del testo in primo piano non può essere invertito	`#4D0078D4`	`#6660CDFF`	`0000000D`
`AccentFillSenary`	Sfondo accentato sottile per gli stati oltre terziario	`#1F5649B0`	`#1F9184EE`	`0000000E`
`AccentFillTertiary`	Sfondo principale che indica lo stato premuto	`#CC5649B0`	`#CC9184EE`	`0000000D`
`AccentTextFillDisabled`	Testo accentato disabilitato e colore del glifo	`#5C000000`	`#5DFFFFFF`	`00000011`
`AccentTextFillPrimary`	Colore principale del testo principale per testo in primo piano e glifi che richiedono enfasi	`#FF3F3682`	`#FFD2CCF8`	`00000002`
`AccentTextFillSecondary`	Testo accentato che indica lo stato del passaggio del mouse	`#FF221D46`	`#FFD2CCF8`	`00000002`
`AccentTextFillTertiary`	Testo accentato che indica lo stato premuto	`#FF5649B0`	`#FFA79CF1`	`00000002`

Scheda

Token per superfici simili a schede: blocchi di contenuto che si trovano su sfondi di pagina o livello.

token	Description	Light	Scuro	Contrasto elevato
`CardBackgroundFillDefault`	Sfondo scheda predefinita	`#B2FFFFFF`	`#0DFFFFFF`	`00000005`
`CardBackgroundFillSecondary`	Sfondo scheda che indica lo stato del passaggio del mouse	`#80F6F6F6`	`#08FFFFFF`	`00000005`
`CardBackgroundFillTertiary`	Sfondo scheda che indica lo stato premuto	`#FFFFFFFF`	`#12FFFFFF`	`00000005`
`CardStrokeDefault`	Bordo scheda predefinito	`#0F000000`	`#1A000000`	`00000010`
`CardStrokeDefaultSolid`	Bordo carta continua, usato quando i tratti semitrasparnti causano problemi di visibilità	`#FFEBEBEB`	`#FF1C1C1C`	`00000010`
`CardStrokeDefaultSolidAlt`	Bordo alternativo con carta a tinta unita	`#FFDADADA`	`#FF0A0A0A`	`00000010`

Controllo

Token per controlli interattivi standard, ad esempio pulsanti, caselle di testo e caselle combinate.

token	Description	Light	Scuro	Contrasto elevato
`ControlAltFillDisabled`	Sfondo del controllo alternativo disabilitato	`#00FFFFFF`	`#00FFFFFF`	`0000000F`
`ControlAltFillQuaternary`	Sfondo del controllo alternativo di quarto livello	`#18000000`	`#12FFFFFF`	`0000000E`
`ControlAltFillSecondary`	Sfondo del controllo alternativo di secondo livello	`#06000000`	`#1A000000`	`0000000E`
`ControlAltFillTertiary`	Sfondo del controllo alternativo di terzo livello	`#0F000000`	`#0BFFFFFF`	`0000000E`
`ControlAltFillTransparent`	Sfondo del controllo alternativo trasparente	`#00FFFFFF`	`#00FFFFFF`	`0000000E`
`ControlFillActiveInput`	Controllare lo sfondo durante l'input di testo attivo	`#FFFFFFFF`	`#B21E1E1E`	`0000000F`
`ControlFillDefault`	Sfondo del controllo predefinito (stato rest)	`#B2FFFFFF`	`#0FFFFFFF`	`0000000F`
`ControlFillDisabled`	Sfondo del controllo disabilitato	`#4DF9F9F9`	`#0BFFFFFF`	`0000000F`
`ControlFillQuaternary`	Sfondo del controllo di quarto livello	`#C2F3F3F3`	`#0FFFFFFF`	`0000000E`
`ControlFillSecondary`	Sfondo del controllo di secondo livello (passaggio del mouse)	`#80F9F9F9`	`#15FFFFFF`	`0000000E`
`ControlFillTertiary`	Sfondo del controllo di terzo livello (premuto)	`#4DF9F9F9`	`#08FFFFFF`	`0000000E`
`ControlFillTransparent`	Sfondo del controllo trasparente	`#00FFFFFF`	`#00FFFFFF`	`0000000F`
`ControlOnImageFillDefault`	Sfondo del controllo predefinito quando posizionato su un'immagine	`#C9FFFFFF`	`#B21C1C1C`	`0000000F`
`ControlOnImageFillDisabled`	Sfondo del controllo disabilitato quando posizionato su un'immagine	`#00FFFFFF`	`#001E1E1E`	`0000000F`
`ControlOnImageFillSecondary`	Sfondo del controllo al passaggio del mouse quando posizionato su un'immagine	`#FFF3F3F3`	`#FF1A1A1A`	`0000000E`
`ControlOnImageFillTertiary`	Sfondo del controllo premuto quando posizionato su un'immagine	`#FFEBEBEB`	`#FF131313`	`0000000E`
`ControlSolidFillDefault`	Sfondo del controllo solido, usato quando la trasparenza causa problemi di visibilità	`#FFFFFFFF`	`#FF454545`	`0000000F`
`ControlStrokeDefault`	Bordo del controllo predefinito (stato rest)	`#0F000000`	`#12FFFFFF`	`00000010`
`ControlStrokeForStrongFillWhenOnImage`	Bordo di controllo per riempimenti sicuri posizionati sulle immagini	`#59FFFFFF`	`#6B000000`	`0000000A`
`ControlStrokeOnAccentDefault`	Bordo predefinito per i controlli sugli sfondi accentato	`#14FFFFFF`	`#14FFFFFF`	`0000000B`
`ControlStrokeOnAccentDisabled`	Bordo disabilitato per i controlli sugli sfondi accentato	`#0F000000`	`#33000000`	`0000000B`
`ControlStrokeOnAccentSecondary`	Bordo al passaggio del mouse per i controlli sugli sfondi principali	`#66000000`	`#24000000`	`0000000B`
`ControlStrokeOnAccentTertiary`	Bordo premuto per i controlli sugli sfondi accentati	`#37000000`	`#37000000`	`0000000B`
`ControlStrokeSecondary`	Bordo di controllo di secondo livello	`#0F000000`	`#12FFFFFF`	`00000008`
`ControlStrokeTransparent`	Bordo di controllo trasparente	`#00FFFFFF`	`#00FFFFFF`	`0000000F`
`ControlStrongFillDefault`	Riempimento di controllo sicuro per elementi a contrasto elevato, ad esempio barre di scorrimento	`#72000000`	`#8BFFFFFF`	`0000000A`
`ControlStrongFillDisabled`	Riempimento controllo sicuro disabilitato	`#51000000`	`#3FFFFFFF`	`0000000F`
`ControlStrongStrokeDefault`	Bordo controllo sicuro per caselle di controllo e pulsanti di opzione	`#9C000000`	`#9AFFFFFF`	`00000008`
`ControlStrongStrokeDisabled`	Bordo di controllo sicuro disabilitato	`#37000000`	`#28FFFFFF`	`0000000B`

Divisore

token	Description	Light	Scuro	Contrasto elevato
`DividerStrokeDefault`	Separatore predefinito e tratto separatore	`#14000000`	`#15FFFFFF`	`00000011`

Concentrazione (or Messa a fuoco)

token	Description	Light	Scuro	Contrasto elevato
`FocusStrokeInner`	Tratto indicatore di stato attivo interno	`#FFFFFFFF`	`#B2000000`	`00000005`
`FocusStrokeOuter`	Tratto indicatore di stato attivo esterno	`#E4000000`	`#FFFFFFFF`	`00000008`

Collegamento ipertestuale

token	Description	Light	Scuro	Contrasto elevato
`HyperlinkFillDisabled`	Colore testo collegamento ipertestuale disabilitato	`#5C000000`	`#5DFFFFFF`	`00000013`
`HyperlinkFillPrimary`	Colore testo collegamento ipertestuale primario (rest)	`#FF003E92`	`#FF99EBFF`	`0000001A`
`HyperlinkFillSecondary`	Colore testo collegamento ipertestuale (passaggio del mouse)	`#FF001A68`	`#FF60CDFF`	`0000001A`
`HyperlinkFillTertiary`	Colore testo collegamento ipertestuale (premuto)	`#FF005FB8`	`#E560CDFF`	`0000001A`

Livello e superficie

Token per sfondi, superfici a più livelli e contenitori a livello di pagina.

token	Description	Light	Scuro	Contrasto elevato
`LayerFillAlt`	Riempimento del livello alternativo per le superfici	`#FFFFFFFF`	`#0EFFFFFF`	`00000005`
`LayerFillDefault`	Riempimento del livello predefinito per le superfici e le barre di scorrimento	`#80FFFFFF`	`#4D3A3A3A`	`00000005`
`SolidBackgroundFillBase`	Sfondo solido di base per le superfici della pagina	`#FFF3F3F3`	`#FF202020`	`00000005`
`SolidBackgroundFillBaseAlt`	Sfondo solido di base alternativo	`#FFDADADA`	`#FF0A0A0A`	`00000005`
`SolidBackgroundFillSecondary`	Sfondo solido secondario (un livello superiore alla base)	`#FFEEEEEE`	`#FF1C1C1C`	`00000005`
`SolidBackgroundFillTertiary`	Sfondo solido terziario	`#FFF9F9F9`	`#FF282828`	`00000005`
`SolidBackgroundFillQuaternary`	Sfondo solido di quarto livello	`#FFFFFFFF`	`#FF2C2C2C`	`00000005`
`SolidBackgroundFillQuinary`	Sfondo a tinta unita di quinto livello	`#FFFDFDFD`	`#FF333333`	`00000005`
`SolidBackgroundFillSenary`	Sfondo solido di sesto livello	`#FFFFFFFF`	`#FF373737`	`00000005`
`SurfaceBackgroundFillDefault`	Sfondo predefinito per superfici discrete sopra la base	`#FFF9F9F9`	`#FF2C2C2C`	`00000005`
`SurfaceStrokeDefault`	Bordo superficie predefinito	`#66757575`	`#66757575`	`0000000A`
`SurfaceStrokeFlyout`	Bordo superficie riquadro a comparsa	`#0F000000`	`#33000000`	`0000000A`

Ombra e fumo

token	Description	Light	Scuro	Contrasto elevato
`ShadowFlyout`	Colore ombreggiatura per superfici a comparsa come popup, descrizioni comando e menu di scelta rapida	`#24000000`	`#42000000`	`00000005`
`SmokeFillDefault`	Colore di sovrimpressione fumosa per le superfici di sfondo di attenuazione	`#4D000000`	`#4D000000`	`0000000F`
`SmokeFillInverse`	Colore di sovrapposizione fumo inverso	`#C9FFFFFF`	`#B21C1C1C`	`0000000F`

Sottile

Token per i controlli con peso visivo minimo, ad esempio pulsanti della barra degli strumenti e voci di menu.

token	Description	Light	Scuro	Contrasto elevato
`SubtleFillDisabled`	Riempimento del controllo sottile disabilitato	`#00000000`	`#00FFFFFF`	`00000005`
`SubtleFillSecondary`	Riempimento del controllo sottile (passaggio del mouse)	`#0F000000`	`#0FFFFFFF`	`0000000F`
`SubtleFillTertiary`	Riempimento del controllo sottile (premuto)	`#0A000000`	`#0BFFFFFF`	`0000000F`
`SubtleFillTransparent`	Riempimento di controllo sottile trasparente	`#00FFFFFF`	`#00FFFFFF`	`00000005`

Stato del sistema

Token per gli indicatori di stato: attenzione, cautela, critica, riuscita e neutrale.

token	Description	Light	Scuro	Contrasto elevato
`SystemFillAttention`	Bordo indicatore di attenzione e tratto (informativo)	`#FF005FB7`	`#FF60CDFF`	`00000002`
`SystemFillAttentionBackground`	Sfondo indicatore di attenzione	`#80F6F6F6`	`#08FFFFFF`	`00000018`
`SystemFillCaution`	Bordo indicatore di avviso e tratto	`#FF9D5D00`	`#FFFCE100`	`00000002`
`SystemFillCautionBackground`	Sfondo indicatore di avviso	`#FFFFF4CE`	`#FF433519`	`00000018`
`SystemFillCritical`	Bordo indicatore di errore e tratto	`#FFC42B1C`	`#FFFF99A4`	`00000002`
`SystemFillCriticalBackground`	Sfondo indicatore di errore	`#FFFDE7E9`	`#FF442726`	`00000018`
`SystemFillNeutral`	Riempimento di sistema neutro	`#72000000`	`#8BFFFFFF`	`00000002`
`SystemFillNeutralBackground`	Sfondo del sistema neutro	`#06000000`	`#08FFFFFF`	`00000018`
`SystemFillSolidAttentionBackground`	Sfondo con attenzione continua, usato quando la trasparenza causa problemi di visibilità	`#FFF7F7F7`	`#FF2E2E2E`	`00000018`
`SystemFillSolidNeutral`	Riempimento indicatore neutro a tinta unita	`#FF8A8A8A`	`#FF8A8A8A`	`00000002`
`SystemFillSolidNeutralBackground`	Sfondo neutro a tinta unita	`#FFF3F3F3`	`#FF2E2E2E`	`00000018`
`SystemFillSuccess`	Bordo indicatore di esito positivo e tratto	`#FF0F7B0F`	`#FF6CCB5F`	`00000002`
`SystemFillSuccessBackground`	Sfondo indicatore di esito positivo	`#FFDFF6DD`	`#FF393D1B`	`00000018`

Testo

token	Description	Light	Scuro	Contrasto elevato
`TextFillDisabled`	Colore testo disabilitato	`#5C000000`	`#5DFFFFFF`	`00000011`
`TextFillPrimary`	Colore del testo principale per il contenuto generale	`#E4000000`	`#FFFFFFFF`	`00000008`
`TextFillSecondary`	Colore del testo secondario per contenuto supplementare e hint	`#9E000000`	`#C8FFFFFF`	`00000008`
`TextFillTertiary`	Colore del testo terziario (contrasto basso - non usato per il contenuto primario inattivi)	`#72000000`	`#8BFFFFFF`	`00000008`
`TextOnAccentFillDisabled`	Testo disabilitato sugli sfondi accentato	`#B2FFFFFF`	`#80000000`	`00000003`
`TextOnAccentFillPrimary`	Testo principale sugli sfondi accentato	`#FFFFFFFF`	`#FF000000`	`0000000E`
`TextOnAccentFillSecondary`	Testo secondario sugli sfondi accentato	`#B2FFFFFF`	`#80000000`	`0000000E`
`TextOnAccentFillSelectedText`	Colore del testo per il testo selezionato sugli sfondi accentato	`#FFFFFFFF`	`#FFFFFFFF`	`0000000E`

Colori interni della shell

Questi token controllano le superfici del chrome dell'IDE, ovvero la cornice principale della finestra, le intestazioni della finestra degli strumenti, le schede, la barra di stato e altri elementi a livello di shell. Sono gli autori del tema dei token primari usati per modificare l'aspetto complessivo dell'IDE.

Environment

Token che controllano la finestra principale e le superfici cromate della shell.

token	Description	Light	Scuro	Contrasto elevato
`EnvironmentBackground`	Finestre degli strumenti mobili e sfondo della finestra principale	`#FFEEEEEE`	`#FF1C1C1C`	`00000005`
`EnvironmentBadge`	Sfondo notifica informazioni sulla soluzione (ad esempio, indicatore di Live Share)	`#B2FFFFFF`	`#0FFFFFFF`	`0000000F`
`EnvironmentBody`	Sfondo dell'area corpo/contenuto della finestra della shell principale	`#FFEEEEEE`	`#FF1C1C1C`	`00000005`
`EnvironmentBodyText`	Colore del testo nell'area corpo/contenuto della finestra della shell principale	`#E4000000`	`#FFFFFFFF`	`00000008`
`EnvironmentBorder`	Bordo finestra principale attivo	`#FF5649B0`	`#FF9184EE`	`0000000A`
`EnvironmentBorderInactive`	Bordo finestra principale inattivo e divisori interni	`#FFADADAD`	`#FF454545`	`00000003`
`EnvironmentHeader`	Sfondo per le aree di intestazione attive	`#FFF9F9F9`	`#FF282828`	`00000005`
`EnvironmentHeaderInactive`	Sfondo per le aree di intestazione inattive	`#FFF9F9F9`	`#FF282828`	`00000005`
`EnvironmentIndicator`	Bordo o indicatore per le schede nascoste automaticamente	`#66757575`	`#66757575`	`0000000A`
`EnvironmentLayeredBackground`	Sfondo per elementi a più livelli, ad esempio InfoBars e gruppi di schede	`#80FFFFFF`	`#4D3A3A3A`	`00000005`
`EnvironmentLayeredBorder`	Bordo per elementi a più livelli, ad esempio InfoBars e badge	`#0F000000`	`#80000000`	`00000010`
`EnvironmentLogo`	Visual Studio logo compilare il menu di sistema	`#FF5649B0`	`#FF9184EE`	`0000000D`
`EnvironmentTab`	Sfondo dell'elemento Tab	`#FFF9F9F9`	`#FF282828`	`00000005`
`EnvironmentTabInactive`	Sfondo dell'elemento tabulazioni inattive	`#FFF9F9F9`	`#FF282828`	`00000005`

Didascalia

Token per il pulsante di chiusura della finestra in particolare.

token	Description	Light	Scuro	Contrasto elevato
`CaptionControlCloseFillPrimary`	Chiudi sfondo pulsante (passaggio del mouse)	`#FFC42B1C`	`#FFC42B1C`	`0000000D`
`CaptionControlCloseFillSecondary`	Chiudi sfondo pulsante (premuto)	`#E6C42B1C`	`#E6C42B1C`	`0000000D`
`CaptionControlCloseTextFillPrimary`	Colore icona pulsante chiudi (passaggio del mouse)	`#FFFFFFFF`	`#FFFFFFFF`	`00000009`
`CaptionControlCloseTextFillSecondary`	Colore icona pulsante di chiusura (premuto)	`#B3FFFFFF`	`#B3FFFFFF`	`00000009`

Barra di stato

Token per la barra di stato nelle diverse modalità.

token	Description	Light	Scuro	Contrasto elevato
`StatusBarBackgroundFillBuilding`	Sfondo della barra di stato durante la compilazione	`#FF5649B0`	`#FF3F3682`	`00000005`
`StatusBarBackgroundFillDebugging`	Sfondo della barra di stato durante il debug	`#FFBC4B09`	`#FF7A2101`	`00000005`
`StatusBarBackgroundFillRest`	Sfondo della barra di stato nello stato predefinito	`#8B000000`	`#4D000000`	`00000005`
`StatusBarBackgroundFillSolutionLoading`	Sfondo della barra di stato durante il caricamento di una soluzione	`#FF005BA1`	`#FF003B6A`	`00000005`
`StatusBarControlFillSecondary`	Riempimento del controllo secondario sulla barra di stato	`#33000000`	`#20FFFFFF`	`0000000E`
`StatusBarTextFillBuilding`	Testo della barra di stato durante la compilazione	`#FFFFFFFF`	`#FFFFFFFF`	`00000008`
`StatusBarTextFillDebugging`	Testo della barra di stato durante il debug	`#FFFFFFFF`	`#FFFFFFFF`	`00000008`
`StatusBarTextFillDisabled`	Testo della barra di stato disabilitato	`#90FFFFFF`	`#5DFFFFFF`	`00000011`
`StatusBarTextFillRest`	Testo della barra di stato nello stato predefinito	`#FFFFFFFF`	`#FFFFFFFF`	`00000008`
`StatusBarTextFillSolutionLoading`	Testo della barra di stato durante il caricamento di una soluzione	`#FFFFFFFF`	`#FFFFFFFF`	`00000008`

Informazioni di riferimento sul colore del sistema a contrasto elevato

I valori a contrasto elevato sono indici di colore di sistema. Visual Studio esegue il mapping di questi elementi alla combinazione di colori attiva a contrasto elevato dell'utente. Indici comuni:

Indice	Colore del sistema
`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`

Last updated on 2026-05-20