Only ship OpenVSX themes.

Author: nedtwigg

docs/specs/layout.md

@@ -279,7 +279,7 @@ Custom `mousetermTheme` extends dockview's `themeAbyss`:
 - Pane header height: `--dv-tabs-and-actions-container-height: 30px`
 - 6px padding around the dockview area (`p-1.5` on wrapper, `inset-1.5` on container)
 
-Colors use a two-layer CSS variable strategy: `@theme --color-*` tokens → `var(--vscode-*, <fallback>)`. In VSCode, host theme variables take precedence. In standalone mode, fallback values apply (Dark+ defaults with `prefers-color-scheme: light` overrides). Tailwind v4 `@theme` block registers `--color-*` tokens as Tailwind colors (e.g., `bg-surface`, `text-foreground`, `border-border`). See `theme.css` for the full token map.
+Colors use a two-layer CSS variable strategy: `@theme --color-*` tokens → `var(--vscode-*, <fallback>)`. In VSCode, host theme variables take precedence. In standalone mode, fallback values apply with `prefers-color-scheme: light` overrides. Tailwind v4 `@theme` block registers `--color-*` tokens as Tailwind colors (e.g., `bg-surface`, `text-foreground`, `border-border`). See `theme.css` for the full token map.
 
 Dockview's separator borders, sash handles, and groupview borders are all set to transparent/none — the 6px gap is the only visual separator between panes. All dockview container backgrounds are flattened to `var(--color-surface)`.
 

docs/specs/theme.md

@@ -37,13 +37,13 @@ The old three-layer system (`--vscode-*` → `--mt-*` → `--color-*`) had a red
 
 ### Light theme body class
 
-`applyTheme()` adds `vscode-light` to `document.body.classList` for light themes and removes it for dark themes. `theme.css` has a `body.vscode-light` selector that switches all `--color-*` fallback values to the Light+ palette. Without this class, a light theme that doesn't explicitly define every key would get dark fallbacks for missing keys.
+`applyTheme()` adds `vscode-light` to `document.body.classList` for light themes and removes it for dark themes. `theme.css` has a `body.vscode-light` selector that switches all `--color-*` fallback values to the light fallback palette. Without this class, a light theme that doesn't explicitly define every key would get dark fallbacks for missing keys.
 
 ## Theme data model
 
 ```typescript
 interface MouseTermTheme {
-  id: string;           // "GitHub.github-vscode-theme.dark-default" or "builtin.dark-plus"
+  id: string;           // "GitHub.github-vscode-theme.github-dark-default"
   label: string;        // "GitHub Dark Default"
   type: 'dark' | 'light';
   swatch: string;       // editor.background — used for picker preview
@@ -55,7 +55,7 @@ interface MouseTermTheme {
 interface BundledOrigin { kind: 'bundled' }
 interface InstalledOrigin {
   kind: 'installed';
-  extensionId: string;  // "dracula-theme/theme-dracula"
+  extensionId: string;  // "publisher/theme-extension"
   installedAt: string;  // ISO date
 }
 ```
@@ -86,7 +86,7 @@ Not all VSCode theme color keys matter to MouseTerm — only the ~45 keys that a
 
 ### Conversion rule
 
-For each key in the VSCode theme's `colors` object: if it's in `CONSUMED_VSCODE_KEYS`, emit `--vscode-${key.replace(/\./g, '-')}` → value. Keys not consumed by MouseTerm are silently dropped. Missing keys fall through to the `@theme` fallbacks in `theme.css` (Dark+ or Light+ defaults), which is the same behavior as VSCode itself.
+For each key in the VSCode theme's `colors` object: if it's in `CONSUMED_VSCODE_KEYS`, emit `--vscode-${key.replace(/\./g, '-')}` → value. Keys not consumed by MouseTerm are silently dropped. Missing keys fall through to the `@theme` fallbacks in `theme.css`, which is the same behavior as VSCode itself.
 
 ## Bundled themes
 
@@ -97,10 +97,6 @@ Bundled themes are extracted at build time by a Node.js script (`lib/scripts/bun
 | Extension | OpenVSX ID | Variants |
 |-----------|-----------|----------|
 | GitHub VSCode Theme | `GitHub/github-vscode-theme` | Dark Default, Light Default, Dark Dimmed, Dark High Contrast, Light High Contrast, Dark Colorblind, Light Colorblind, etc. |
-| Dracula | `dracula-theme/theme-dracula` | Dracula, Dracula Soft |
-| VSCode builtins | (hardcoded) | Dark+, Light+ |
-
-Dark+ and Light+ are VSCode built-in themes not published to OpenVSX. Their values are hardcoded (from the existing `lib/.storybook/themes.ts`).
 
 ### Build script flow
 
@@ -117,8 +113,6 @@ lib/scripts/bundle-themes.mjs
   |         +- convertVscodeThemeColors(colors) -> vars
   |         +- emit MouseTermTheme object
   |
-  +- append hardcoded Dark+ and Light+ themes
-  |
   +- write lib/src/lib/themes/bundled.json
 ```
 
@@ -231,6 +225,6 @@ user searches OpenVSX
 
 **Why filter to `CONSUMED_VSCODE_KEYS` instead of passing all colors through?** VSCode themes can define 500+ color keys. Setting all of them as CSS variables would be wasteful (most are never read) and could cause unexpected interactions if VSCode adds new keys that happen to match future `--color-*` variables.
 
-**Why set the `vscode-light` body class?** `theme.css` uses `body.vscode-light` to switch all `--color-*` fallback values to the Light+ palette. Without this class, a light theme that doesn't explicitly define every key would get dark fallbacks for the missing ones, creating a broken mixed appearance.
+**Why set the `vscode-light` body class?** `theme.css` uses `body.vscode-light` to switch all `--color-*` fallback values to the light fallback palette. Without this class, a light theme that doesn't explicitly define every key would get dark fallbacks for the missing ones, creating a broken mixed appearance.
 
 **Why not use OpenVSX's direct file access instead of downloading the full VSIX?** OpenVSX doesn't expose individual theme files via API — you have to download the full VSIX. However, theme-only extensions are typically small (50-200 KB), so this is fine. The build script and runtime installer share the same extraction logic.

docs/specs/tutorial.md

@@ -127,7 +127,7 @@ The sandbox stays fully functional after completion. Running `tut` shows "Tutori
 
 Implemented in `mouseterm-lib/lib/themes` and `mouseterm-lib/components/ThemePicker`.
 
-Bundled themes are provided by `mouseterm-lib/lib/themes` and include Dark+, Light+, GitHub variants, and Dracula variants. Users can install additional themes from OpenVSX through the dropdown footer action.
+Bundled themes are provided by `mouseterm-lib/lib/themes` and include only GitHub variants. Users can install additional themes from OpenVSX through the dropdown footer action.
 
 The picker appears only on `/playground`, inside `SiteHeader`, labeled `Theme:`. The trigger opens a dropdown of bundled and installed themes. The dropdown footer is always `Install theme from OpenVSX`, which opens the theme store dialog. Installed theme rows include an `X` delete control; deletion requires browser confirmation before removing the theme from localStorage. If the active installed theme is deleted, the picker falls back to the first bundled theme and applies it immediately.
 

docs/specs/vscode.md

@@ -231,7 +231,7 @@ Example of the pattern:
 --color-surface: var(--mt-surface);
 ```
 
-Full mapping in `lib/src/theme.css` covers: surfaces (3), text (2), accent/borders (4), tabs (6), terminal bg/fg/cursor/selection (4), all 16 ANSI colors + bright variants, badges (2), semantic status (3), inputs (2), buttons (3), and selection (2). Dark mode fallbacks (VS Code Dark+ defaults) are in `:root`; light mode overrides (VS Code Light+ defaults) are in `body.vscode-light`; a standalone fallback uses `@media (prefers-color-scheme: light)` for non-VS Code contexts.
+Full mapping in `lib/src/theme.css` covers: surfaces (3), text (2), accent/borders (4), tabs (6), terminal bg/fg/cursor/selection (4), all 16 ANSI colors + bright variants, badges (2), semantic status (3), inputs (2), buttons (3), and selection (2). Dark mode fallbacks are in `:root`; light mode overrides are in `body.vscode-light`; a standalone fallback uses `@media (prefers-color-scheme: light)` for non-VS Code contexts.
 
 A `MutationObserver` in `terminal-registry.ts` watches for VS Code theme changes on `body`/`html` (class and style attribute mutations) and live-updates all xterm.js instances.
 

lib/.storybook/preview.ts

@@ -43,7 +43,7 @@ const preview: Preview = {
     },
   },
   initialGlobals: {
-    theme: 'Dark+ (default)',
+    theme: 'GitHub Dark Default',
   },
   decorators: [
     // Theme switcher: inject --vscode-* CSS variables

lib/scripts/bundle-themes.mjs

@@ -20,7 +20,10 @@ const OUTPUT = resolve(__dirname, '../src/lib/themes/bundled.json');
 /** Extensions to download from OpenVSX. */
 const EXTENSIONS = [
   { namespace: 'GitHub', name: 'github-vscode-theme' },
-  { namespace: 'dracula-theme', name: 'theme-dracula' },
+];
+
+const PREFERRED_THEME_ORDER = [
+  'GitHub.github-vscode-theme.github-dark-default',
 ];
 
 /**
@@ -121,123 +124,21 @@ async function fetchExtensionThemes(namespace, name) {
   return themes;
 }
 
-/** VSCode built-in Dark+ and Light+ (not on OpenVSX). */
-function builtinThemes() {
-  return [
-    {
-      id: 'builtin.dark-plus',
-      label: 'Dark+ (default)',
-      type: 'dark',
-      swatch: '#1e1e1e',
-      accent: '#007fd4',
-      vars: {
-        '--vscode-editor-background': '#1e1e1e',
-        '--vscode-editor-foreground': '#cccccc',
-        '--vscode-sideBar-background': '#252526',
-        '--vscode-editorWidget-background': '#252526',
-        '--vscode-descriptionForeground': '#858585',
-        '--vscode-focusBorder': '#007fd4',
-        '--vscode-panel-border': '#2b2b2b',
-        '--vscode-tab-activeBackground': '#1e1e1e',
-        '--vscode-tab-inactiveBackground': '#2d2d2d',
-        '--vscode-tab-activeForeground': '#ffffff',
-        '--vscode-tab-inactiveForeground': '#969696',
-        '--vscode-list-activeSelectionBackground': '#094771',
-        '--vscode-list-activeSelectionForeground': '#ffffff',
-        '--vscode-terminal-background': '#1e1e1e',
-        '--vscode-terminal-foreground': '#cccccc',
-        '--vscode-badge-background': '#007acc',
-        '--vscode-badge-foreground': '#ffffff',
-        '--vscode-errorForeground': '#f48771',
-        '--vscode-input-background': '#3c3c3c',
-        '--vscode-input-border': '#3c3c3c',
-        '--vscode-button-background': '#0e639c',
-        '--vscode-button-foreground': '#ffffff',
-        '--vscode-button-hoverBackground': '#1177bb',
-        '--vscode-textLink-foreground': '#3794ff',
-        '--vscode-terminal-ansiBlack': '#000000',
-        '--vscode-terminal-ansiRed': '#cd3131',
-        '--vscode-terminal-ansiGreen': '#0dbc79',
-        '--vscode-terminal-ansiYellow': '#e5e510',
-        '--vscode-terminal-ansiBlue': '#2472c8',
-        '--vscode-terminal-ansiMagenta': '#bc3fbc',
-        '--vscode-terminal-ansiCyan': '#11a8cd',
-        '--vscode-terminal-ansiWhite': '#e5e5e5',
-        '--vscode-terminal-ansiBrightBlack': '#666666',
-        '--vscode-terminal-ansiBrightRed': '#f14c4c',
-        '--vscode-terminal-ansiBrightGreen': '#23d18b',
-        '--vscode-terminal-ansiBrightYellow': '#f5f543',
-        '--vscode-terminal-ansiBrightBlue': '#3b8eea',
-        '--vscode-terminal-ansiBrightMagenta': '#d670d6',
-        '--vscode-terminal-ansiBrightCyan': '#29b8db',
-        '--vscode-terminal-ansiBrightWhite': '#e5e5e5',
-        '--vscode-terminalCursor-foreground': '#aeafad',
-        '--vscode-terminal-selectionBackground': '#264f7840',
-      },
-      origin: { kind: 'bundled' },
-    },
-    {
-      id: 'builtin.light-plus',
-      label: 'Light+ (default)',
-      type: 'light',
-      swatch: '#ffffff',
-      accent: '#0090f1',
-      vars: {
-        '--vscode-editor-background': '#ffffff',
-        '--vscode-editor-foreground': '#333333',
-        '--vscode-sideBar-background': '#f3f3f3',
-        '--vscode-editorWidget-background': '#f3f3f3',
-        '--vscode-descriptionForeground': '#717171',
-        '--vscode-focusBorder': '#0090f1',
-        '--vscode-panel-border': '#e5e5e5',
-        '--vscode-tab-activeBackground': '#ffffff',
-        '--vscode-tab-inactiveBackground': '#ececec',
-        '--vscode-tab-activeForeground': '#333333',
-        '--vscode-tab-inactiveForeground': '#8e8e8e',
-        '--vscode-list-activeSelectionBackground': '#cce6ff',
-        '--vscode-list-activeSelectionForeground': '#000000',
-        '--vscode-terminal-background': '#ffffff',
-        '--vscode-terminal-foreground': '#333333',
-        '--vscode-badge-background': '#007acc',
-        '--vscode-badge-foreground': '#ffffff',
-        '--vscode-errorForeground': '#a1260d',
-        '--vscode-input-background': '#ffffff',
-        '--vscode-input-border': '#cecece',
-        '--vscode-button-background': '#007acc',
-        '--vscode-button-foreground': '#ffffff',
-        '--vscode-button-hoverBackground': '#0062a3',
-        '--vscode-textLink-foreground': '#006ab1',
-        '--vscode-terminal-ansiBlack': '#000000',
-        '--vscode-terminal-ansiRed': '#cd3131',
-        '--vscode-terminal-ansiGreen': '#00bc00',
-        '--vscode-terminal-ansiYellow': '#949800',
-        '--vscode-terminal-ansiBlue': '#0451a5',
-        '--vscode-terminal-ansiMagenta': '#bc05bc',
-        '--vscode-terminal-ansiCyan': '#0598bc',
-        '--vscode-terminal-ansiWhite': '#555555',
-        '--vscode-terminal-ansiBrightBlack': '#666666',
-        '--vscode-terminal-ansiBrightRed': '#cd3131',
-        '--vscode-terminal-ansiBrightGreen': '#14ce14',
-        '--vscode-terminal-ansiBrightYellow': '#b5ba00',
-        '--vscode-terminal-ansiBrightBlue': '#0451a5',
-        '--vscode-terminal-ansiBrightMagenta': '#bc05bc',
-        '--vscode-terminal-ansiBrightCyan': '#0598bc',
-        '--vscode-terminal-ansiBrightWhite': '#a5a5a5',
-        '--vscode-terminalCursor-foreground': '#000000',
-        '--vscode-terminal-selectionBackground': '#add6ff80',
-      },
-      origin: { kind: 'bundled' },
-    },
-  ];
-}
-
 async function main() {
-  const allThemes = [...builtinThemes()];
+  const allThemes = [];
 
   for (const ext of EXTENSIONS) {
     const themes = await fetchExtensionThemes(ext.namespace, ext.name);
     allThemes.push(...themes);
   }
+  allThemes.sort((a, b) => {
+    const aIndex = PREFERRED_THEME_ORDER.indexOf(a.id);
+    const bIndex = PREFERRED_THEME_ORDER.indexOf(b.id);
+    if (aIndex === -1 && bIndex === -1) return 0;
+    if (aIndex === -1) return 1;
+    if (bIndex === -1) return -1;
+    return aIndex - bIndex;
+  });
 
   console.log(`\nWriting ${allThemes.length} themes to ${OUTPUT}`);
   writeFileSync(OUTPUT, JSON.stringify(allThemes, null, 2) + '\n');