Skip to content

v1.3.0: Themes in your web dashboard

Latest

Choose a tag to compare

@CliffWade CliffWade released this 12 Aug 13:36
· 1 commit to main since this release

Hermes Theme Pack v1.3.0

Themes in your web dashboard, plus a hover-card readability overhaul.

The Theme Switcher now lives in hermes dashboard as a full tab, and every
hover surface on the Desktop Themes page is guaranteed readable.

What's new

  • Web dashboard Themes tab: a dashboard plugin bundle (manifest tab +
    IIFE) gives hermes dashboard a Themes tab listing every installed skin
    with one-click apply, reusing the same backend API as the Desktop page.
    Themes group into ☀ Light / ☾ Dark sections with counts and tabs; every
    paired theme shows its twin with a flip button; applying a skin also
    repaints the web dashboard by writing a dashboard-theme YAML from the
    skin's palette and activating it.
  • Full Desktop toolbar in the tab: search (including palette colors
    like "purple" or #7b2d8e), All/Light/Dark tabs with per-polarity counts,
    Follow system (auto twin switch on OS scheme change), category filter,
    Random, and + Add theme (paste-YAML install with the same validation as
    the Desktop page).
  • Truly responsive theme cards: the dashboard grid uses the same fluid
    formula as the Desktop page (repeat(auto-fit, minmax(min(100%, 240px), 1fr))): cards wrap by minimum width at every window size, collapse to a
    single column on narrow panels, and fill the last row. Container queries
    adapt spacing to the tab's actual panel width, with viewport fallbacks for
    small and 4K screens.
  • Desktop-style compact cards: 4px accent bar, tiny 10px swatches,
    whole-card apply, floating swap/copy actions, NEW badge for freshly
    installed themes; layout classes are self-contained with no host Tailwind
    dependency.
  • Hover detail panel: hovering a theme card in the dashboard tab shows
    a right-docked panel with the name, description, accent bar, and up to 12
    labeled color swatches; docs/preview.html ships the same behavior so the
    static gallery matches the live app.
  • Readable themed tooltips: every tooltip on the Desktop Themes page
    now uses the app's themed Tip component (auto-inverting with the theme)
    instead of native title= attributes, which rendered as unreadable
    white-on-pale text.
  • Guaranteed-readable hover preview mockup: the preview panel's mini UI
    mockup clamps every text/background pair to >= 4.5:1 WCAG contrast
    (gamma-corrected luminance), uses the theme's real status-bar colors from
    full_colors, and nudges bubble surfaces until text clears the bar.
    Themes may pair decorative colors however they like; the preview never
    renders unreadable text.
  • Readable panel chrome: polarity tags, twin labels, and descriptions
    moved from the faint tertiary token (54% opacity) to secondary (74%);
    the 8px footer labels demand a 7:1 contrast floor; floating surfaces are
    opaque (the panel and modal no longer let the theme grid bleed through);
    the polarity tag says each word once ("☀ Light", not "Light ☀ light").

Bug fixes

  • Themes restored to the sidebar: a duplicate readableOn declaration
    was a hard SyntaxError under the runtime loader's strict-mode ESM import
    (CJS parsing tolerates duplicates, so node --check missed it). The whole
    plugin was failing to load; a gate test now rejects duplicate module-level
    declarations.
  • Hover panel docked right again: the panel used right-6 top-24
    utility classes that the app's Tailwind purge strips; positioning is now
    inline (right: 24px; top: 96px).
  • Cards respond to window width: replaced the fixed layout with a
    responsive grid (thanks @jdtimothy, #5).
  • Theme Switcher setup docs clarified for Desktop-over-SSH (thanks
    @jdtimothy, #3).

Important

Instant dashboard repaint uses the SDK.theme.apply bridge, which ships on
the hermes-agent fork branch feat/dashboard-theme-apply-sdk. On hosts
without the bridge the tab falls back to a reload hint; a stock hermes update resets main and drops the bridge by design (graceful degradation).

How to get it

  • Desktop plugin: bash install.sh in the repo, or copy
    desktop-plugin/theme-switcher/plugin.js to
    ~/.hermes/desktop-plugins/theme-switcher/ and reload desktop plugins
    (⌘K → "Reload desktop plugins").
  • Dashboard tab: sync plugins/theme-switcher/dashboard/dist/ to the
    running dashboard's plugin directory, or restart hermes dashboard.

Verified

  • 21/21 tests pass (WCAG gate, twin invariants, plugin ESM hygiene, panel
    chrome, opaque surfaces, polarity tag, responsive grid)
  • Strict-ESM parse + loader simulation register the plugin with the sidebar
  • CI green on the release commit