Skip to content

Commit 7c31902

Browse files
authored
Merge pull request #14444 from ghogen/modernize-theme-colors
Modernize theme colors (new article)
2 parents b415e07 + 3ee4453 commit 7c31902

3 files changed

Lines changed: 332 additions & 107 deletions

File tree

docs/extensibility/internals/vsix-color-compiler.md

Lines changed: 2 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -196,111 +196,6 @@ Category names provide logical groupings for colors that can be used for similar
196196
"Data"=hex:38,00,00,00,0b,00,00,00,01,00,00,00,8e,f0,ec,92,13,8b,f4,4c,99,e9,ae,26,92,38,21,85,01,00,00,00,0a,00,00,00,42,61,63,6b,67,72,6f,75,6e,64,01,f5,f5,f5,ff,01,1e,1e,1e,ff
197197
```
198198

199-
:::moniker range="visualstudio"
200-
201-
## Migrating themes to Visual Studio 2026
202-
203-
You can make a previous theme compatible with Visual Studio 2026 by merging its existing tokens with a small set of new semantic tokens. You do not need to recreate every previous token. Visual Studio 2026 reads the new tokens first and then falls back to previous tokens. Here is how:
204-
205-
1. Add `FallbackId="{Light or Dark theme GUID}"` object at the `<Theme />` object.
206-
207-
|**Theme to base on**|**FallbackId**|
208-
|-|-|
209-
|Light|{de3dbbcd-f642-433c-8353-8f1df4370aba}|
210-
|Dark|{1ded0138-47ce-435e-84ef-9ec1f439b749}|
211-
212-
2. Append the below set of tokens as the last two categories after the previous theme tokens. Make sure the category name and GUID are copied exactly as below.
213-
214-
Minimal migration token overrides for a Light based theme:
215-
216-
```xml
217-
<Category Name="Shell" GUID="{73708ded-2d56-4aad-b8eb-73b20d3f4bff}">
218-
<Color Name="AccentFillDefault">
219-
<Background Type="CT_RAW" Source="FF5649B0" />
220-
</Color>
221-
<Color Name="AccentFillSecondary">
222-
<Background Type="CT_RAW" Source="E55649B0" />
223-
</Color>
224-
<Color Name="AccentFillTertiary">
225-
<Background Type="CT_RAW" Source="CC5649B0" />
226-
</Color>
227-
<Color Name="SolidBackgroundFillTertiary">
228-
<Background Type="CT_RAW" Source="FFF9F9F9" />
229-
</Color>
230-
<Color Name="SolidBackgroundFillQuaternary">
231-
<Background Type="CT_RAW" Source="FFFFFFFF" />
232-
</Color>
233-
<Color Name="SurfaceBackgroundFillDefault">
234-
<Background Type="CT_RAW" Source="FFF9F9F9" />
235-
</Color>
236-
<Color Name="TextFillSecondary">
237-
<Background Type="CT_RAW" Source="9E000000" />
238-
</Color>
239-
</Category>
240-
<Category Name="ShellInternal" GUID="{5af241b7-5627-4d12-bfb1-2b67d11127d7}">
241-
<Color Name="EnvironmentBackground">
242-
<Background Type="CT_RAW" Source="FFEEEEEE" />
243-
</Color>
244-
<Color Name="EnvironmentBorder">
245-
<Background Type="CT_RAW" Source="FF5649B0" />
246-
</Color>
247-
<Color Name="EnvironmentIndicator">
248-
<Background Type="CT_RAW" Source="66757575" />
249-
</Color>
250-
<Color Name="EnvironmentLogo">
251-
<Background Type="CT_RAW" Source="FF5649B0" />
252-
</Color>
253-
<Color Name="EnvironmentLayeredBackground">
254-
<Background Type="CT_RAW" Source="80FFFFFF" />
255-
</Color>
256-
</Category>
257-
```
258-
259-
Minimal migration token overrides for a Dark based theme:
260-
261-
```xml
262-
<Category Name="Shell" GUID="{73708ded-2d56-4aad-b8eb-73b20d3f4bff}">
263-
<Color Name="AccentFillDefault">
264-
<Background Type="CT_RAW" Source="FF9184EE" />
265-
</Color>
266-
<Color Name="AccentFillSecondary">
267-
<Background Type="CT_RAW" Source="80000000" />
268-
</Color>
269-
<Color Name="AccentFillTertiary">
270-
<Background Type="CT_RAW" Source="CC9184EE" />
271-
</Color>
272-
<Color Name="SolidBackgroundFillTertiary">
273-
<Background Type="CT_RAW" Source="FF282828" />
274-
</Color>
275-
<Color Name="SolidBackgroundFillQuaternary">
276-
<Background Type="CT_RAW" Source="FF2C2C2C" />
277-
</Color>
278-
<Color Name="SurfaceBackgroundFillDefault">
279-
<Background Type="CT_RAW" Source="FF2C2C2C" />
280-
</Color>
281-
<Color Name="TextFillSecondary">
282-
<Background Type="CT_RAW" Source="C8FFFFFF" />
283-
</Color>
284-
</Category>
285-
<Category Name="ShellInternal" GUID="{5af241b7-5627-4d12-bfb1-2b67d11127d7}">
286-
<Color Name="EnvironmentBackground">
287-
<Background Type="CT_RAW" Source="FF1C1C1C" />
288-
</Color>
289-
<Color Name="EnvironmentBorder">
290-
<Background Type="CT_RAW" Source="FF9184EE" />
291-
</Color>
292-
<Color Name="EnvironmentIndicator">
293-
<Background Type="CT_RAW" Source="66757575" />
294-
</Color>
295-
<Color Name="EnvironmentLogo">
296-
<Background Type="CT_RAW" Source="FF9184EE" />
297-
</Color>
298-
<Color Name="EnvironmentLayeredBackground">
299-
<Background Type="CT_RAW" Source="4D3A3A3A" />
300-
</Color>
301-
</Category>
302-
```
199+
## Update themes to work with Visual Studio 2026
303200

304-
3. Adjust the color values to fit the previous theme as needed.
305-
306-
:::moniker-end
201+
You can update existing themes that work with Visual Studio 2022 or earlier to work with Visual Studio 2026. See [Migrate themes to Visual Studio 2026](../migration/modernize-theme-colors.md#migrate-themes-to-visual-studio-2026).

0 commit comments

Comments
 (0)