Modernizzare i colori del tema di Visual Studio per le estensioni

I temi di Visual Studio in precedenza si basavano su token di colore granulari e specifici delle funzionalità. Nel corso del tempo, questo approccio ha prodotto migliaia di valori personalizzati e colori personalizzati, rendendo la coerenza e l'accessibilità più difficili da garantire. Per risolvere questo problema, il sistema è stato ricostruito intorno a principi di progettazione chiari: meno token semantici per una manutenzione più semplice, rampe di colori prevedibili per l'accessibilità sostenibile e un'esperienza più coesa tra Visual Studio, la piattaforma Windows e altri strumenti di Microsoft.

Questo articolo illustra le modifiche apportate e come eseguire la migrazione dei temi precedenti per essere compatibili con Visual Studio 2026.

Tip

La migrazione del tema non richiede la spedizione di un nuovo payload VSIX. Le estensioni esistenti di Visual Studio 2022 possono adottare i nuovi token di colore senza dover ricreare il pacchetto.

Cosa è cambiato

Prima di Visual Studio 2026, un tema Visual Studio predefinito includeva molte categorie e token di colore. Le estensioni spesso offrono qualcosa in più. Questa densità ha creato diverse sfide:

  • Molti token erano quasi identici, differenti solo leggermente in tonalità o luminosità, causando confusione visiva.
  • Le singole funzionalità hanno creato token univoci, con conseguente utilizzo dei colori frammentato e incoerente.
  • La verifica del contrasto dei colori per l'accessibilità è stata complessa a causa del numero elevato di voci personalizzate.
  • L'esperienza utente complessiva è diventata incoerente, con le superfici che appaiono non corrispondenti o non sincronizzate.

Visual Studio 2026 consolida i token in una manciata di categorie intent-first con livelli di denominazione prevedibili. Un tema della shell predefinita ora contiene solo quattro categorie di primo livello.

Esempio dei nuovi token semantici basati prima sull’intento:

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

Perché un minor numero di token migliora l'esperienza utente

  • Denominazione intent-first: I nomi dei token riflettono chiaramente il proprio ruolo (ad esempio ControlFill, TextFill, AccentFill, Stroke, SystemFill) e livello (Primario, Secondario, Terziario), rendendo l'utilizzo intuitivo.
  • Tavolozza semplificata: L'aggiornamento di un piccolo set di token condivisi migliora immediatamente la coerenza sia nella shell che nelle estensioni.
  • Maggiore coerenza: Meno punti di personalizzazione significano meno mancate corrispondenze accidentali ed eliminare varianti leggermente diverse.
  • Accessibilità migliorata: Le rampe di colori centralizzate e gli stati semantici (Success, Caution, Critical, Attention) rendono la convalida del contrasto più semplice e affidabile.
  • Prestazioni e manutenibilità migliori: I livelli semantici sostituiscono setter di colore granulari, riducendo il sovraccarico di manutenzione e migliorando la qualità dell'interfaccia utente.

Eseguire la migrazione dei temi a Visual Studio 2026

È possibile rendere compatibile un tema precedente con Visual Studio 2026 unendo i token esistenti con un piccolo set di nuovi token semantici. Non è necessario ricreare ogni token precedente. Visual Studio 2026 legge prima i nuovi token e quindi esegue il fallback ai token precedenti.

Steps

  1. Aggiungere FallbackId="{Light or Dark theme GUID}" sull'elemento <Theme /> .

    Tema su cui basare FallbackId
    Light {de3dbbcd-f642-433c-8353-8f1df4370aba}
    Oscuro {1ded0138-47ce-435e-84ef-9ec1f439b749}

  2. Aggiungere il set di token minimo (illustrato di seguito) come ultime due categorie dopo i token del tema precedenti. Assicurarsi che il nome della categoria e il GUID vengano copiati esattamente.

  3. Regolare i valori dei colori in modo che corrispondano al tema in base alle esigenze.

Set minimo di token per un tema basato su luce

<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>

Set minimo di token per un tema scuro

<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

Perché è una modifica dirompente?

Oltre alle modifiche apportate alla struttura dei token dei colori del tema e alle convenzioni di denominazione, la maggior parte del codice dell'interfaccia utente è stato refattorizzato per usare token di stile semantici dal Fluent Design System, invece dei token con ambito di funzionalità precedenti o stili inline. Anche se la maggior parte del colore precedente e altre risorse di stile rimangono presenti nell'SDK, potrebbero non riflettere la progettazione più recente o comportarsi in modo coerente nell'interfaccia utente modernizzata.

È possibile continuare a usare i token precedenti?

I token precedenti possono comunque essere risolti per alcune superfici precedenti, ma i percorsi dell'interfaccia utente nuovi e sottoposti a refactoring leggono prima i nuovi token semantici. Se si fa affidamento su token obsoleti, si rischia di avere una tematizzazione incompleta.

Dov'è il tema blu classico?

Il tema blu classico è stato sostituito con una famiglia di temi con tonalità e opzioni di aspetto dell'editor Extra Contrast. È anche possibile installare il tema Blue Steel ↗ della community per un omaggio più vicino.

Un minor numero di token significa meno personalizzazione?

No: i livelli semantici consentono di creare ampie variazioni visive regolando una piccola tavolozza. È comunque possibile creare personalità distinte tramite tonalità d'accento, livelli di luminanza di sfondo e riempimenti del sistema.

Impatto sulle prestazioni?

Il refactoring riduce le ricerche di stile e le risorse ridondanti, migliorando la località della memoria e semplificando la creazione di pennelli posticipati.

Anche i colori dell'editor cambiano?

L'editor mantiene attualmente la maggior parte della colorazione della sintassi. Questa modifica è destinata alle superfici condivise dell'interfaccia utente della shell, ad esempio finestre degli strumenti, menu e finestre di dialogo. È possibile scegliere l'aspetto dell'editor (incluso il contrasto aggiuntivo) in modo indipendente.

Contenuti correlati

  • Ultimo aggiornamento: