[Bug]: Imported VS Code themes ignore syntax highlighting

[gfdelarue]

Importing a VS Code theme changes T3 Code's UI palette, but code keeps the built-in syntax colors. The import succeeds without indicating that the theme's syntax rules were discarded.

This is a gap in the existing theme-import behavior. When I import and select a VS Code theme, I expect its syntax highlighting to apply wherever T3 renders highlighted code.

Before submitting

• I searched existing issues and did not find a duplicate.
• I included enough detail to reproduce or investigate the problem.

Area

apps/web. Desktop shares the affected web renderers.

Steps to reproduce

1. Open Settings → Appearance and import a VS Code theme through the JSON importer or community extension search.
2. Select the imported theme for the active light or dark appearance.
3. View a fenced JavaScript code block in chat, or open a JavaScript file in the file preview.
4. Compare keyword, string, and comment colors with the imported theme's rules. Change to another imported theme with the same appearance and different syntax colors.

For an unambiguous JSON example, import this theme:

{
	"name": "Syntax import repro",
	"type": "dark",
	"colors": {
		"editor.background": "#101820",
		"editor.foreground": "#eeeeee"
	},
	"tokenColors": [
		{ "scope": "keyword", "settings": { "foreground": "#ff00ff" } },
		{ "scope": "string", "settings": { "foreground": "#00ff00" } },
		{ "scope": "comment", "settings": { "foreground": "#ffff00" } }
	]
}

Use this JavaScript snippet:

// This comment should be yellow.
if (true) console.log("This string should be green.");

Expected behavior

The selected imported theme supplies syntax colors to highlighted code, including chat blocks, file previews and editing, diffs, PR code, and search snippets. In the example, if is magenta, the string is green, and the comment is yellow.

Actual behavior

UI and code-background colors follow the imported palette, while syntax highlighting continues to use Pierre's built-in light or dark theme. Switching between imported dark themes does not change the syntax palette.

Source inspection identifies two breaks:

• Extension import sanitization retains selected workbench colors and drops syntax rules. VS Code JSON conversion likewise produces only a UI palette. The stored theme model has no syntax-rule field.
• Renderer theme selection resolves only to pierre-light or pierre-dark. The shared syntax highlighter loads those themes.

Impact

Cosmetic issue. Imported themes lose their syntax palette, which affects code readability and makes the successful import misleading.

Version or commit

Source inspected at main @ 061543e9e5b54ec0048725c37d52fef2962df173.

Environment and verification

Reported from use of T3 Code and investigated in the local source checkout. The minimal JSON example above is supplied for reproduction; it was not separately run in a fresh browser session during this investigation. The affected selection logic is shared by web and desktop and does not depend on the agent provider.

Workaround

No supported way found to make an imported theme supply syntax rules to these renderers. The theme editor's code background and foreground roles do not control individual syntax tokens.

[juliusmarminge]

Thanks for the tight repro and the source pointers. Confirmed on current main: this is a real gap in theme import, not a one-off renderer miss.

What happens today

VS Code import is a UI-palette conversion. parseVsCodeThemeFile maps workbench colors onto our roles and never keeps tokenColors. Open VSX sanitization keeps only USED_WORKBENCH_COLORS. The stored ThemeDefinition has no syntax-rule field. Highlighters then always load pierre-light / pierre-dark from appearance, so chat fences, file preview, diffs, PR code, and search snippets stay on Pierre. Switching imported dark themes does not change token colors.

That matches the file header in apps/web/src/vscodeThemeImport.ts (editor chrome, not an app palette) and the user docs, which say you can import a VS Code theme without noting that syntax rules are dropped. Desktop shares the web path. Mobile uses its own Pierre pair and is out of scope here.

Related work

#6571 already tried to preserve tokenColors, register custom Shiki themes, and thread them through the same surfaces. It was closed as one 32-file change, not as unwanted. Earlier import work (#5226, #5654) shipped palette-only by design. Open #8419 (local .vsix) would hit the same drop.

Next

Keep this open as an enhancement. A useful fix is three smaller slices: persist sanitized tokenColors on the theme model, register a Shiki theme (Pierre fallback when missing), then thread that name through every highlighter. Until then, there is no supported way to make an imported theme drive syntax colors; the theme editor’s code background/foreground roles do not control tokens.

Optional short-term: mention the limitation in the import UI and Appearance docs so a successful import is not misleading.