Plugin Themes & UI Packs

Full guides: themes.md · ui-packs.md (raw Markdown is what crawlers should index).

Which one do I need?

Theme pack

Colors, radius, accents, optional CSS. Users pick under Preferences → Appearance.

Frontend/theme.json + optional theme.css

UI pack

Replace shell regions, hide slots, swap pages, toolbar actions. One active at a time.

Frontend/ui.json (+ optional overrides / index.js)

How to make a theme (short)

Admin → Developer → Plugins → Create → template Theme pack.
Edit Frontend/theme.json — HSL components like "199 89% 48%" (no hsl() wrapper).
Optional theme.css for slot polish while the pack is active.
Preferences → Appearance → Theme packs → select {plugin}:default.

{
  "id": "default",
  "name": "Ocean",
  "tokens": {
    "light": { "primary": "199 89% 48%", "background": "210 40% 98%", "radius": "0.5rem" },
    "dark": { "primary": "199 89% 48%", "background": "222 47% 7%", "radius": "0.5rem" }
  },
  "accents": ["custom:#0ea5e9"],
  "defaults": { "backgroundType": "aurora" },
  "css": "theme.css"
}

APIs: GET /api/system/plugin-themes · CSS GET /api/system/plugin-theme-css?id=plugin:packId

Schema: plugin-theme.schema.json

Admin locks: app_theme_pack_default / app_theme_pack_lock

Token keys

background, foreground, card, card-foreground, popover, popover-foreground, primary, primary-foreground, secondary, secondary-foreground, muted, muted-foreground, accent, accent-foreground, destructive, destructive-foreground, border, input, ring, radius

UI packs

{
  "id": "glass",
  "name": "Glass Dashboard",
  "theme": "default",
  "shell": {
    "replace": {
      "shell.sidebar": { "component": "Components/Sidebar.html" }
    }
  },
  "pages": [
    { "match": "/dashboard", "replace": { "remote": "dist/Dashboard.js" } }
  ],
  "hide": [],
  "actions": [
    {
      "slot": "toolbar.server-console",
      "label": "My action",
      "component": "Components/action-panel.html",
      "priority": 10
    }
  ]
}

APIs: GET /api/system/plugin-ui-packs · GET /api/system/plugin-overrides

Schemas: ui-pack · overrides

Admin: app_ui_pack_default / app_ui_pack_lock

Overrides (surgical)

Frontend/overrides.json: hide / replace / actions on named slots without a full UI pack.

Shell slots: shell.sidebar, shell.navbar, shell.page-header, shell.main, shell.background

Host bridge

Panel exposes window.FeatherPanel v2 — see Power SDK.

featherpanel-ready → host replies with featherpanel-theme
featherpanel-navigate { path }
featherpanel-toast { message, level }
featherpanel-bus: event/action bridge for iframes

React remotes

Point a slot remote at a prebundled ESM that default-exports a React component. React is provided by the host — no panel rebuild when installing the plugin.

Dev templates

Admin → Developer → Plugins → Create: choose Theme pack or UI pack. Full walkthroughs in Markdown linked above.