pingdotgg / pingdotgg/t3code

[Bug]: Imported VS Code themes ignore syntax highlighting

Open
#10,830 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement via-triage
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
  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:

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.