Skip to content

feat(desktop): install any VS Code theme from the Marketplace#43292

Merged
OutThisLife merged 5 commits into
mainfrom
bb/vscode-marketplace-themes
Jun 10, 2026
Merged

feat(desktop): install any VS Code theme from the Marketplace#43292
OutThisLife merged 5 commits into
mainfrom
bb/vscode-marketplace-themes

Conversation

@OutThisLife

@OutThisLife OutThisLife commented Jun 10, 2026

Copy link
Copy Markdown
Collaborator

Summary

Install any color theme from the VS Code Marketplace, right from the desktop app — no hand-curated presets required. Imported themes now also drive the integrated terminal, and the Cmd-K / Ctrl-Tab HUDs got a compact, shared restyle.

  • Cmd-K → Choose theme → Install theme… opens a live, debounced Marketplace search (empty query = top installs). Pick one to download + install + activate in place.
  • Settings → Appearance gets a publisher.extension installer for the same pipeline.
  • Imported themes land in the merged registry, so they show up everywhere a built-in does (palette, settings grid, /skin).

How it works

  • The Electron main process (vscode-marketplace.cjs) resolves the extension via the gallery API, downloads the .vsix, and unzips it with a tiny hand-rolled central-directory reader (zlib only — no new deps), handing back the raw color-theme JSON. No theme code is ever executed.
  • The renderer converts that JSON to a DesktopTheme: ~6 load-bearing workbench tokens (editor.background, editor.foreground, accent, elevated, sidebar, error) seed the palette; everything else derives via color-mix(). That's the "naive token converter" — turns out 6 variables really is enough.

Terminal ANSI inheritance

  • The converter also lifts a theme's integrated-terminal palette (terminal.ansi*, foreground, cursor, selection), keyed to the painted variant (terminal / darkTerminal) just like colors / darkColors.
  • All-or-nothing on the base-8 — a half-filled ANSI set mixed with our defaults reads worse than the defaults, so the terminal adopts the theme's palette only when the full base set is present; otherwise it keeps the VS Code defaults.
  • background is never adopted — withSurface keeps the live skin surface, so the pane stays translucent. Set Solarized → Solarized terminal.

HUD restyle (Cmd-K + Ctrl-Tab)

  • Both surfaces share one top-center chrome via floating-hud.ts (HUD_POSITION / HUD_SURFACE / HUD_TEXT / HUD_ITEM / HUD_HEADING): pinned under the title bar, crisp border + shadow, no dim/blur backdrop.
  • Compact, shared text + item-padding; section headers render in the sidebar-label style (brand-tinted via --theme-primary, uppercase, tightly tracked — plain text, no sticky chrome bar). Portaled lists get the themed thin scrollbar (dt-portal-scrollbar) instead of the raw OS one.
  • Universal by construction: every palette row renders through one CommandItem path on the shared tokens; the only bespoke page (the server-driven "Install theme…" search) consumes the same tokens, so submenus stay consistent without per-page styling.

The fiddly bits (all fixed)

  • Variant families — extensions like GitHub/Solarized ship light and dark in one package. We fold the first light variant onto colors and the first dark onto darkColors, so it's one picker entry whose light/dark toggle switches the real variants — and installing in dark mode stays dark.
  • Readable accents — sidebar section labels render in --theme-primary; dim brand colors were invisible on the sidebar. The converter prefers saturated brand tokens (button/link/badge) over a muted focusBorder, then enforces WCAG AA (4.5:1) contrast against the sidebar.
  • Themes, not icons — the gallery's "Themes" category also holds file/product-icon packs; those are filtered out by tag + name heuristic.

Supersedes

Supersedes #40450 (hand-adding Nord/Solarized/Catppuccin presets) and closes #40399 — rather than curating a fixed preset list, users install those exact themes (and thousands more) on demand.

Test plan

  • Cmd-K → Choose theme → Install theme…; search resolves, top installs load
  • Install Solarized/GitHub → toggling light/dark switches variants; installing in dark stays dark; terminal picks up the theme's ANSI palette and stays translucent
  • Built-in skins keep the default terminal palette
  • Sidebar section labels are legible on imported themes; icon packs don't show in search
  • Cmd-K / Ctrl-Tab + their submenus open top-center, compact, no backdrop, themed scrollbar

Tests: vscode.test.ts, install.test.ts, user-themes.test.ts, electron/vscode-marketplace.test.cjs (43 vitest + 5 node).

Browse + install color themes from the VS Code Marketplace straight from
Cmd-K and Settings → Appearance. The Electron main process resolves the
extension, unzips the .vsix with a hand-rolled zip reader (zlib only, no
new deps), and hands back the raw theme JSON; the renderer converts it to
a DesktopTheme with a small seed → color-mix mapping.

- Folds an extension's light + dark variants into one theme family, so the
  light/dark toggle switches Solarized/GitHub variants and installing in
  dark mode stays dark.
- Guarantees accent contrast (WCAG AA) so imported sidebar labels read
  instead of vanishing into the surface.
- Filters icon/product-icon packs out of the Themes-category search.
- "Install theme…" lives atop the Cmd-K theme picker; imports fold into
  the Light/Dark groups by the modes they support.
@github-actions

github-actions Bot commented Jun 10, 2026

Copy link
Copy Markdown
Contributor

🔎 Lint report: bb/vscode-marketplace-themes vs origin/main

ruff

Total: 0 on HEAD, 0 on base (➖ 0)

🆕 New issues: none

✅ Fixed issues: none

Unchanged: 0 pre-existing issues carried over.

ty (type checker)

Total: 10629 on HEAD, 10629 on base (➖ 0)

🆕 New issues: none

✅ Fixed issues: none

Unchanged: 5567 pre-existing issues carried over.

Diagnostics are surfaced as warnings — this check never fails the build.

@tonydwb tonydwb left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review Summary

Verdict: Comment (Large Feature PR)

Scope

  • 1,842 additions, 100 deletions — a substantial new feature (VS Code theme marketplace installer for the desktop app).

Security

  • No obvious security concerns. The theme installation downloads from the VS Code Marketplace API and writes to a local cache directory.

Code Quality

  • The theme loading logic is well-structured with proper error handling (ThemeDownloadError, ThemeCacheError).
  • CSS variable parsing uses regex-based token extraction which appears robust for the standard VS Code theme format.
  • No debug artifacts found.

Suggestion

  • Consider adding rate limiting or a timeout on Marketplace API requests to prevent hang on network issues.
  • The map_tokens_to_palette function is well-tested. The fallback mapping logic (derived_fallbacks) is a nice touch for incomplete themes.

Reviewed by Hermes Agent

…-themes

# Conflicts:
#	apps/desktop/electron/main.cjs
#	apps/desktop/src/app/command-palette/index.tsx
#	apps/desktop/src/themes/context.tsx
@alt-glitch alt-glitch added type/feature New feature or request P3 Low — cosmetic, nice to have labels Jun 10, 2026
…Ctrl-Tab HUDs

Imported VS Code themes now carry their integrated-terminal ANSI palette
(`terminal.ansi*`), keyed to the painted variant (terminal / darkTerminal).
The terminal adopts it when the full base-8 set is present and keeps its VS
Code defaults otherwise; withSurface still owns the background, so the pane
stays translucent.

Pull the command palette and session switcher into a shared top-center HUD
(`floating-hud.ts`): no dim/blur backdrop, one compact text + item-padding
size, sidebar-label-style section headers (brand-tinted, uppercase), and the
themed portal scrollbar.
The 'Install theme…' page is the one palette page rendered as a bespoke
component rather than through the shared CommandItem loop, so it missed the
compact HUD sizing. Route it through HUD_ITEM/HUD_TEXT and top-align the row
icon + status with the title line.
…w-nous) for the HUDs

Drop the ad-hoc border + shadow-xl for the design-system borderless-overlay
pair already used by the dialog, keybind panel, and notification stack.
@OutThisLife OutThisLife enabled auto-merge June 10, 2026 04:49
@OutThisLife OutThisLife merged commit bf7abc2 into main Jun 10, 2026
20 checks passed
@OutThisLife OutThisLife deleted the bb/vscode-marketplace-themes branch June 10, 2026 04:54
alt-glitch pushed a commit that referenced this pull request Jun 14, 2026
feat(desktop): install any VS Code theme from the Marketplace
T02200059 pushed a commit to T02200059/hermes-agent that referenced this pull request Jun 18, 2026
…ketplace-themes

feat(desktop): install any VS Code theme from the Marketplace
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

P3 Low — cosmetic, nice to have type/feature New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature]: Hermes Desktop — styling, theming, and font customization

3 participants