fix: unsupported themes will use dark-plus (#7187)

* feat: create a helper function to handle theme strings

* feat: add tests for kebabOfThemeStr

* fix: unsupported themes are correctly using dark-plus

Author: jpoly1219

core/codeRenderer/CodeRenderer.ts

@@ -20,7 +20,7 @@ import {
   Highlighter,
 } from "shiki";
 import { DiffLine } from "..";
-import { escapeForSVG, kebabOfStr } from "../util/text";
+import { escapeForSVG, kebabOfThemeStr } from "../util/text";
 
 interface CodeRendererOptions {
   themesDir?: string;
@@ -70,28 +70,29 @@ export class CodeRenderer {
 
   public async setTheme(themeName: string): Promise<void> {
     if (
-      this.themeExists(kebabOfStr(themeName)) ||
+      this.themeExists(kebabOfThemeStr(themeName)) ||
       themeName === "Default Dark Modern"
     ) {
       this.currentTheme =
         themeName === "Default Dark Modern"
           ? "dark-plus"
-          : kebabOfStr(themeName);
-
-      this.highlighter = await getSingletonHighlighter({
-        langs: ["typescript"],
-        themes: [this.currentTheme],
-      });
-
-      const th = this.highlighter.getTheme(this.currentTheme);
-
-      this.editorBackground = th.bg;
-      this.editorForeground = th.fg;
-      this.editorLineHighlight =
-        th.colors!["editor.lineHighlightBackground"] ?? "#000000";
+          : kebabOfThemeStr(themeName);
     } else {
+      // Fallback to default theme for unsupported themes.
       this.currentTheme = "dark-plus";
     }
+
+    // Always initialize the highlighter with the current theme.
+    this.highlighter = await getSingletonHighlighter({
+      langs: ["typescript"],
+      themes: [this.currentTheme],
+    });
+
+    const th = this.highlighter.getTheme(this.currentTheme);
+    this.editorBackground = th.bg;
+    this.editorForeground = th.fg;
+    this.editorLineHighlight =
+      th.colors!["editor.lineHighlightBackground"] ?? "#000000";
   }
 
   async init(): Promise<void> {}

core/util/text.ts

@@ -44,3 +44,10 @@ export function kebabOfStr(str: string): string {
     .replace(/[\s_]+/g, "-") // replace spaces and underscores with hyphens
     .toLowerCase();
 }
+
+export function kebabOfThemeStr(str: string): string {
+  return str
+    .toLowerCase()
+    .replace(/[\s_]+/g, "-") // replace spaces and underscores with hyphens
+    .replace(/\(|\)/g, ""); // remove parentheses
+}

core/util/text.vitest.ts

@@ -3,6 +3,7 @@ import {
   capitalizeFirstLetter,
   escapeForSVG,
   kebabOfStr,
+  kebabOfThemeStr,
   replaceEscapedCharacters,
 } from "./text";
 
@@ -184,3 +185,60 @@ describe("kebabOfStr", () => {
     expect(kebabOfStr("MiXeD cAsE")).toBe("mi-xe-d-c-as-e");
   });
 });
+
+describe("kebabOfThemeStr", () => {
+  it("should convert spaces to hyphens", () => {
+    expect(kebabOfThemeStr("hello world")).toBe("hello-world");
+    expect(kebabOfThemeStr("multiple   spaces")).toBe("multiple-spaces");
+  });
+
+  it("should convert underscores to hyphens", () => {
+    expect(kebabOfThemeStr("snake_case")).toBe("snake-case");
+    expect(kebabOfThemeStr("multiple___underscores")).toBe(
+      "multiple-underscores",
+    );
+  });
+
+  it("should convert mixed spaces and underscores", () => {
+    expect(kebabOfThemeStr("mixed_ case")).toBe("mixed-case");
+    expect(kebabOfThemeStr("theme name_variant")).toBe("theme-name-variant");
+  });
+
+  it("should convert to lowercase", () => {
+    expect(kebabOfThemeStr("UPPERCASE")).toBe("uppercase");
+    expect(kebabOfThemeStr("MiXeD CaSe")).toBe("mixed-case");
+  });
+
+  it("should handle already kebab-case strings", () => {
+    expect(kebabOfThemeStr("already-kebab")).toBe("already-kebab");
+  });
+
+  it("should handle empty strings", () => {
+    expect(kebabOfThemeStr("")).toBe("");
+  });
+
+  it("should handle single characters", () => {
+    expect(kebabOfThemeStr("A")).toBe("a");
+    expect(kebabOfThemeStr("a")).toBe("a");
+  });
+
+  it("should preserve other special characters", () => {
+    expect(kebabOfThemeStr("hello@world")).toBe("hello@world");
+    expect(kebabOfThemeStr("test.file.name")).toBe("test.file.name");
+  });
+
+  it("should not convert camelCase (unlike kebabOfStr)", () => {
+    expect(kebabOfThemeStr("camelCase")).toBe("camelcase");
+    expect(kebabOfThemeStr("PascalCase")).toBe("pascalcase");
+  });
+
+  it("should handle strings with numbers", () => {
+    expect(kebabOfThemeStr("theme_v2 beta")).toBe("theme-v2-beta");
+    expect(kebabOfThemeStr("version_123_FINAL")).toBe("version-123-final");
+  });
+
+  it("should handle strings with parentheses", () => {
+    expect(kebabOfThemeStr("theme_v2 (beta)")).toBe("theme-v2-beta");
+    expect(kebabOfThemeStr("Gruvbox Dark (Hard)")).toBe("gruvbox-dark-hard");
+  });
+});