Commit 1905846e03226582f64fec16e1500ddffa151fdf | the-knife

author	oliver <97427849+flamboh@users.noreply.github.com> 2026-09-30 17:49:15-07:00
committer	GitHub <noreply@github.com> 2026-09-30 17:49:15-07:00
log	1905846e03226582f64fec16e1500ddffa151fdf
tree	8df3ec7100f8b2d26b5868184735269e10f15279
parent	9da066dbe906310671b86290b09df0b56a88ffa5
signature	Signed by PGP key B5690EEEBB952194

fix(web): Dark+ and Light+ themes import instead of colliding with built-in ids (#14499)

2 files changed, 40 insertions(+), 3 deletions(-)

apps
- web
  - src
    vscodeThemeImport.test.ts
    vscodeThemeImport.ts

apps/web/src/vscodeThemeImport.test.ts+30

...	@@ -112,6 +112,36 @@ describe("VS Code theme import", () => {	...	@@ -112,6 +112,36 @@ describe("VS Code theme import", () => {
112	);	112	);
113	});	113	});
114		114
		115	it("moves reserved VS Code names to a non-reserved id", () => {
		116	const darkPlus = parseVsCodeThemeFile({
		117	name: "Dark+",
		118	type: "dark",
		119	colors: { "editor.background": "#1e1e1e" },
		120	});
		121	expect(darkPlus.label).toBe("Dark+");
		122	expect(darkPlus.id).not.toBe("dark");
		123	expect(darkPlus.id).toBe("dark-vscode");
		124	});
		125
		126	it("keeps Dark+ and Light+ as separate themes instead of pairing them as +", () => {
		127	const themes = pairVsCodeThemes([
		128	parseVsCodeThemeFile({
		129	name: "Light+",
		130	type: "light",
		131	colors: { "editor.background": "#ffffff" },
		132	}),
		133	parseVsCodeThemeFile({
		134	name: "Dark+",
		135	type: "dark",
		136	colors: { "editor.background": "#1e1e1e" },
		137	}),
		138	]);
		139	expect(themes.map((theme) => [theme.id, theme.label])).toEqual([
		140	["light-vscode", "Light+"],
		141	["dark-vscode", "Dark+"],
		142	]);
		143	});
		144
115	it("fills every role the file omits with a readable derived value", () => {	145	it("fills every role the file omits with a readable derived value", () => {
116	const theme = parseVsCodeThemeFile(VSCODE_DARK);	146	const theme = parseVsCodeThemeFile(VSCODE_DARK);
117	const colors = getThemeColorsForMode(theme, "dark")!;	147	const colors = getThemeColorsForMode(theme, "dark")!;

apps/web/src/vscodeThemeImport.ts+10-3

 @@ -1,8 +1,10 @@
 import {
   createVividThemeColors,
   getThemeModes,
+  isReservedThemeId,
   parseThemeFile,
   themeColorToHex,
+  themeIdFromName,
   THEME_FILE_VERSION,
   type ThemeAppearance,
   type ThemeColorRole,
 @@ -321,9 +323,12 @@ export function parseVsCodeThemeFile(value: unknown): ThemeDefinition {
   // Reuse the theme-file parser so ids, names, and color values go through the
   // same validation as a hand-written file.
+  const name = resolveName(value);
+  const generatedId = themeIdFromName(name);
   return parseThemeFile({
     version: THEME_FILE_VERSION,
-    name: resolveName(value),
+    ...(isReservedThemeId(generatedId) ? { id: `${generatedId}-vscode` } : {}),
+    name,
     appearance,
     colors: { ...derived, ...overrides },
   });
 @@ -352,9 +357,11 @@ export function pairVsCodeThemes(
   const passthrough: Array<{ theme: ThemeDefinition; order: number }> = [];
   themes.forEach((theme, order) => {
     // Only single-appearance themes with an appearance word in the name can
-    // pair; anything else is already what the user asked for.
+    // pair, and only when the rest of the name can still identify the pair
+    // ("Dark+" and "Light+" would pair as "+"); anything else is already
+    // what the user asked for.
     const key = stripAppearance(theme.label);
-    if (getThemeModes(theme).length !== 1 || key === theme.label || key.length === 0) {
+    if (getThemeModes(theme).length !== 1 || key === theme.label || !/[a-z0-9]/i.test(key)) {
       passthrough.push({ theme, order });
       return;
     }