Editor

Theme

Pick colours; the page recolours live. Hit Save to write them to storage/theme.json and regenerate public/css/theme.css.

Palette

Each variable maps to a CSS custom property used across the site. Changes apply instantly in the preview; click Save to persist.

Page background The body and pre-block default. --bg

Panel surface Cards, alerts, demo blocks. --panel

Raised panel Inline code, table hover. --panel-2

Body text All foreground copy. --text

Muted text Labels, helper text, subtitles. --muted

Primary accent Primary buttons, links on hover, focus rings. --accent

Secondary accent Links, secondary buttons. --accent-2

Success / "good" Success alerts, "live" pills. --good

Danger / "bad" Errors, locked states, danger buttons. --bad

Borders Card borders, table rules, form outlines. --border

In production, gate this page behind admin auth - move the controller to app/Admin/Theme.php extending AdminController, or add a role check in boot().

Live preview

A condensed copy of /components. Open that page in another tab for the full kitchen sink - the theme applies there too.

Typography

Body text with an inline link, strong, emphasis, and some_code().

Info. The accent-2 colour drives this border.

Success. Good colour applied.

Warning. Fixed amber, not theme-driven.

Danger. Bad colour applied.

Primary Secondary Success Danger Pill Live

Name	Role	Status
Alice	Admin	Active
Bob	User	Pending

Export

These regenerate as you tweak. Copy into your project.

CSS custom properties

/* loading… */

Tailwind v3 config

/* loading… */