Skip to content

Themes for standalone and web playground#13

Merged
nedtwigg merged 26 commits intomainfrom
feat/theme-embed
Apr 16, 2026
Merged

Themes for standalone and web playground#13
nedtwigg merged 26 commits intomainfrom
feat/theme-embed

Conversation

@nedtwigg
Copy link
Copy Markdown
Member

No description provided.

nedtwigg and others added 19 commits April 13, 2026 13:38
Documents the two-layer CSS variable system, the conversion pipeline
from VSCode theme JSON to --vscode-* CSS variables, build-time bundling
from OpenVSX, runtime theme installation, and localStorage persistence.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The three-layer chain (--vscode-* → --mt-* → --color-*) had a redundant
middle layer. Every --mt-* variable was a pure passthrough to --color-*.

- Delete 38 dead variables defined 3× each (114 lines): --mt-ansi-*,
  --mt-terminal-cursor/selection, --mt-gutter*, --mt-editor-font-*,
  --mt-selection-workspace — none were consumed anywhere
- Eliminate duplicate mappings: focusBorder was aliased as --mt-accent,
  --mt-gutter-active, and --mt-selection-terminal
- Drop testing.iconPassed → success mapping (wrong semantic); hardcode green
- Move var(--vscode-*, fallback) chains directly into @theme
- Update Dockview overrides and inline style refs to use --color-*

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Build-time: scripts/bundle-themes.mjs downloads VSIX files from OpenVSX,
extracts theme JSONs, and converts them to --vscode-* CSS variable maps.
13 bundled themes: Dark+, Light+, 9 GitHub variants, 2 Dracula variants.

Runtime: users can search and install additional themes from OpenVSX
directly in the browser. VSIX extraction uses fflate (~8KB). Installed
themes persist in localStorage.

Core library in lib/src/lib/themes/:
- convert.ts: CONSUMED_VSCODE_KEYS filter + dots-to-hyphens conversion
- apply.ts: sets --vscode-* vars on body + manages vscode-light class
- store.ts: bundled + installed registry with localStorage persistence
- openvsx.ts: search API + in-browser VSIX download/extraction

Replaces the 5 hardcoded themes in playground-themes.ts. Storybook
themes now derive from bundled.json instead of manual color maps.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- AGENTS.md: replace deleted website/src/lib/playground-themes.ts with
  lib/src/lib/themes/, add theme.md spec entry
- theme.md: fix bundle-themes.mjs path (scripts/ -> lib/scripts/), update
  stale "replaces the current" for deleted PlaygroundTheme file
- layout.md: update --mt-* references to --color-* (collapsed in theme
  refactor), fix var(--mt-surface) -> var(--color-surface)
@cloudflare-workers-and-pages
Copy link
Copy Markdown

cloudflare-workers-and-pages bot commented Apr 16, 2026

Deploying mouseterm with  Cloudflare Pages  Cloudflare Pages

Latest commit: 156c3e2
Status: ✅  Deploy successful!
Preview URL: https://c4cb237d.mouseterm.pages.dev
Branch Preview URL: https://feat-theme-embed.mouseterm.pages.dev

View logs

@nedtwigg nedtwigg merged commit 50fef9f into main Apr 16, 2026
6 checks passed
@nedtwigg nedtwigg deleted the feat/theme-embed branch April 16, 2026 20:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant