Function applyEditorTheme

apps/client/lib/init-editor-theme.ts:199–275

(key: string, value: string)

// Export a utility function that components can use to apply a theme
export const applyEditorTheme = (key: string, value: string) => {
  localStorage.setItem("editorTheme", key);

  if (key in DEFAULT_THEMES) {
    const themeConfig = DEFAULT_THEMES[key as keyof typeof DEFAULT_THEMES];
    setCSSVariables(themeConfig.variables);
    setCSSVariables({ "--status-bar-text": "#fff" });

    // Set document classes
    if (key === "vs-dark") {
      document.documentElement.classList.add("dark");
      document.documentElement.classList.remove("light");
    } else {
      document.documentElement.classList.remove("dark");
      document.documentElement.classList.add("light");
    }
  } else {
    try {
      // eslint-disable-next-line @typescript-eslint/no-require-imports
      const themeData = require(`monaco-themes/themes/${value}.json`);

      // Set document classes
      if (themeData.base === "vs-dark") {
        document.documentElement.classList.add("dark");
        document.documentElement.classList.remove("light");
      } else {
        document.documentElement.classList.remove("dark");
        document.documentElement.classList.add("light");
      }

      setCSSVariables({
        "--toolbar-bg-primary": themeData.colors[
          "editor.selectionBackground"
        ].slice(0, 7),
        "--toolbar-bg-secondary": themeData.colors[
          "editor.selectionBackground"
        ].slice(0, 7),
        "--toolbar-foreground": themeData.colors["editor.foreground"].slice(
          0,
          7
        ),
        "--toolbar-accent": themeData.colors["editorCursor.foreground"].slice(
          0,
          7
        ),
        "--panel-text-accent": themeData.colors["editor.background"].slice(
          0,
          7
        ),
        "--panel-background": themeData.colors["editor.background"].slice(0, 7),
        "--status-bar-text": themeData.base === "vs-dark" ? "dark" : "light",
      });
    } catch (error) {
      console.error("Failed to load theme:", error);
    }
  }

  if (globalMonaco) {