[Bug]: Imported VS Code themes ignore syntax highlighting
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 23k
- Forks
- 5.9k
- Avg merge
- 11h 14m
- Merged PRs (30d)
- 357
Description
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
- Open Settings → Appearance and import a VS Code theme through the JSON importer or community extension search.
- Select the imported theme for the active light or dark appearance.
- View a fenced JavaScript code block in chat, or open a JavaScript file in the file preview.
- 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-lightorpierre-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.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with apps/web/src/openVsxThemes.ts, apps/web/src/vscodeThemeImport.ts, and packages/shared/src/themePalettes.ts to trace how imported syntax rules are discarded, then read apps/web/src/lib/diffRendering.ts and apps/web/src/lib/syntaxHighlighting.ts for renderer selection. Reproduce with the supplied JSON theme and JavaScript snippet; done means imported token colors apply consistently to chat blocks, previews, editing, diffs, PR code, and search snippets.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript, vscode
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 68/100