Build a theme on the website and take it to the bar or the Store #677

Problem

StableBar ships seven themes, and the Store has one community theme. Making a theme today means reading the themes guide and writing JSON by hand, which keeps most people from trying. Those who do have no easy way to see what each key does or to get their theme onto the Store.

Proposal

A theme creator page on stablebar.app where anyone can build a theme by eye:

• Start from a bundled theme (Built-in, Léman, Notch, Catppuccin, Nord, Gruvbox or Phosphor) and change it.
• Controls for the look a theme owns: colors in light and dark, font, bar shape and tiles, workspace indicator, and popup look. Popup padding and the gap below the bar come once Popups can't share one padding, spacing and gap below the bar #664 (PR feat: share one padding, spacing and gap across popups #665) lands.
• A live preview of the bar that shows only what StableBar draws: a control the app would ignore doesn't move the preview.
• The theme's JSON, live and read-only, next to the controls. Each control shows the key it writes, so people learn tokens, defaults and popupDefaults and can edit their file by hand later.
• Download a zip that is a Store-ready theme folder, with how to install it.
• Try in StableBar, a stablebar://theme link that opens the theme in the app. It appears once a release ships that link (Open a shared theme from a link to try it on the bar and install it #676); everything else on the page works without it.
• A guide to submit the theme to the Store as a pull request to Seb-GRAF/stablebar-packages.

Static and plain like the rest of the site: no server, no accounts, no build step and no new dependency.

Out of scope: widgets, layout, roles, states, gradients, glass and profiles. A base theme that sets these keeps them unchanged.

Acceptance

• Each bundled theme loads in the creator and, untouched, matches the app's look.
• The zip passes StableBar --validate and the Store's checks, and the installed theme looks the way it did on the page.
• The page writes only keys a theme may hold, in valid form.
• The page works at phone width and in light and dark, and is linked from the site and from the themes guide.

Possible today

Partly: copy a bundled theme, edit its JSON by hand following the themes guide, and use Save as Theme… in Settings.

Related

• Too many bundled themes, and the website shows them unlike the app #370 / PR feat: keep seven iconic themes and show them as the app draws them #371 kept seven themes and made the website draw them as the app does; the creator keeps that rule.
• Popups can't share one padding, spacing and gap below the bar #664 / PR feat: share one padding, spacing and gap across popups #665 adds shared popup spacing and bar.popupOffset.

Triaged by Claude Code (Claude Opus 5.5).