Bespoke — Custom Theme & Live Builder for Flarum 2

Design your whole forum on the live page — colours, fonts, layout, widgets, chrome — and publish when it's perfect. No code, no rebuilds, no guesswork.

Bespoke is a premium theme and an in-context visual theme builder for Flarum 2, in the spirit of Invision Community's Theme Designer. Open the overlay editor right on your forum, change anything, watch it repaint instantly, and hit Publish when you're happy. Visitors only ever see the published result.

---

Table of contents

• Why Bespoke

• Feature tour

  • The live editor

  • Palette & accessibility

  • Typography (any Google Font)

  • Shape & depth

  • Layout modes — Feed / Grid / Category

  • Hero

  • Effects — header, dark mode, glass, tag colouring

  • Site chrome — announcement bar & footer

  • Widgets

  • Inspector

  • Presets, import & export

• How it works

• Installation

• Using the editor

• Permissions

• Internationalisation

• Performance & security

• Requirements & compatibility

• FAQ

• Pricing

• Support

• License

---

Why Bespoke

Most Flarum theming means editing LESS, redeploying, and refreshing to see what you got. Bespoke replaces that loop with a live, in-context editor:

• Instant — colour, font, radius, spacing and effect changes repaint with zero server round-trips.

• Safe — everything you change is a private draft until you Publish; one click reverts.

• Deep — it's a complete theme in itself (three discussion-list layouts, hero, posts, avatars, header variants), not just a colour picker.

• No code — but power users still get a Custom CSS escape hatch.

---

Feature tour

The live editor

A floating ✦ Edit theme launcher appears for admins. It opens a docked overlay with tabs for every part of the theme; the forum stays fully interactive behind it so you always edit in real context. A light/dark preview switch, Save draft, and Publish sit in the footer.

Palette & accessibility

Set every colour role — brand, accent, background, surface, text, muted, border — with independent light and dark values. Don't want to hand-pick seven colours? Generate harmony from Brand derives a balanced palette from one hue.

A built-in WCAG contrast checker grades the key text/background pairings live (AA / AAA / fail) so your theme stays readable as you go.

Typography (any Google Font)

Pick any Google Font by name — not a short curated list, the whole library — for headings and body independently, plus base size, modular type scale, and line-height. System and already-loaded fonts work too. Font links are injected server-side so there's no flash of the wrong typeface.

Shape & depth

Corner radius, border width, elevation/shadow depth, button styles (solid / soft / outline / ghost), post styles (boxed / flat / bubble), and avatar shapes (circle / rounded / square / hexagon).

Layout modes — Feed / Grid / Category

The discussion list ships in three first-class layouts, switchable live:

| Mode | Look |

|---|---|

| Feed | Comfortable, separated cards — the refined default. |

| Grid | Magazine cards with a cover image (pulled from the first post), excerpt, tag pills, and a participant/reply footer. Configurable columns or auto-fit. |

| Category | A classic forum category index built from your tags, inspired by fof/categories — parent tags become sections, child tags become rows with icons, descriptions and counts. |

Hero

Full control of the welcome hero: height, contained vs. full-bleed width, a brand→accent gradient or a background image, custom text colours, and an admin-locked (non-dismissible) option so the hero always shows.

Effects — header, dark mode, glass, tag colouring

The Effects tab is where Bespoke earns its keep:

• Header style — solid, transparent, or gradient; optional centred logo; sticky on/off.

• Visitor dark-mode toggle — adds a sun/moon switch to the header so each visitor picks their own scheme (remembered locally, applied before paint — no flash).

• Glassmorphism — frosted, translucent surfaces; pairs beautifully with a site background image.

• Subtle animations — tasteful hover/entrance motion, toggleable.

• Colour UI by active tag — a built-in ramon/colored replacement: on a tag page the hero adopts that tag's colour (with automatically-contrasting text), and the brand accent follows too.

• Card tag accent — give each discussion card a left bar or full border in its own primary-tag colour, so a mixed list reads as a colour-coded index.

Site chrome — announcement bar & footer

• Announcement bar — a dismissible, optionally-linked banner across the top of every page.

• Custom footer — your own links, social icons (X, Discord, GitHub, YouTube, Facebook, Instagram), and copyright/text — no second extension required.

Widgets

Drag widgets from the tray into any zone — above the list, sidebar, below the list, header, hero, or footer — then reorder them by their handle. Click a placed widget to edit its settings in the inspector.

| Widget | What it shows |

|---|---|

| Hero banner | Heading, subheading, CTA, background image. |

| Community stats | Discussions / posts / members / online counts. |

| Online users | Avatars of who's online now. |

| Top Contributors | Ranked by posts, likes received, or discussions, over week / month / all-time. |

| Newest Members | Most-recent sign-ups, as a list with join dates or an avatar grid. |

| Trending threads | Most-active discussions over 24h / 48h / 7d. |

| Call to action | Heading, body, button + link. |

| Markdown / HTML | Free-form content block. |

| Tag cloud | Popular tags. |

| Articles | From Page Builder, shown automatically when that extension is installed. |

All data-driven widgets share one cached request per page, so a widget-heavy sidebar stays cheap.

Inspector

Toggle Inspect (⊹) and hover any element on the page — Bespoke highlights it and labels it; click to jump straight to the controls that style it.

Presets, import & export

Start from curated themes (Aurora, Carbon, Sunrise, Newsprint, Terminal, Grape), then export your finished theme as a portable .bespoke.json and import it on another Bespoke site — perfect for moving a look between staging and production, or shipping a house style across forums.

---

How it works

Bespoke splits styling into two layers so editing feels instant but still reaches deep into Flarum:

| Layer | Carries | Mechanism | When |

|---|---|---|---|

| Instant | colours, fonts, radius, spacing, shadows, effects, layout switches | CSS custom properties in <style id="bespoke-vars"> + data-bespoke-* attributes on <html> | every page load; mutated client-side in the editor for zero-latency preview |

| Structural | the premium base theme, layout modes, component styling | compiled LESS (less/forum.less) | at build/compile time |

The theme is stored as a single JSON document (tokens + layout + zones + custom CSS + chrome). The editor edits an in-memory copy and applies it live; Save draft persists it for admins only; Publish promotes it to what every visitor sees. Because the instant layer is server-injected, the forum is themed before JavaScript runs — there's no flash of an unstyled or default theme.

---

Installation

composer require ernestdefoe/bespoke

Then enable Bespoke in Admin → Extensions, open your forum, and click ✦ Edit theme (bottom-right).

To update:

php flarum cache:clear```

---

## Using the editor

1. Click **✦ Edit theme**. The overlay docks to the side; your forum stays live behind it.
2. Work through the tabs — **Palette, Type, Shape, Layout, Hero, Discussion, Effects, Site, Widgets, Presets**. Every change previews instantly.
3. Use the footer **◑** switch to preview light vs. dark.
4. **Save draft** to keep working privately, or **Publish** to go live for everyone.
5. Use **Inspect (⊹)** any time to jump from an on-page element to its controls.

---

## Permissions

The editor and the theme save/publish API are gated on the `bespoke.edit` ability, which is granted to **administrators**. Visitors and regular members never load the editor and cannot write theme data or custom CSS.

---

## Internationalisation

Every user-facing string is translatable via standard Flarum locale files (`resources/locale/en.yml`) — tab names, control labels, widget names, hints, and messages. Translations are welcome.

---

## Performance & security

* **One request for widgets** — all data widgets share a single, 60-second-cached `widget-data` call per page.
* **No render flash** — colours/fonts are injected server-side before JS.
* **Visibility-aware** — the Trending widget is scoped to guest-visible discussions, so its shared cache can never leak titles of private or tag-gated threads.
* **Admin-only writes** — theme save/publish (including Custom CSS) require `bespoke.edit`; injected custom CSS is additionally sanitised against tag-breakout as defence-in-depth.

---

## Requirements & compatibility

* **Flarum** `^2.0`
* **PHP** `8.3+` (Flarum 2's minimum)
* Optional: [Flarum Tags](https://github.com/flarum/tags) (Category layout, tag colouring, tag accents) and Page Builder (Articles widget) light up automatically when present.

---

## FAQ

**Will my visitors see my experiments?**

No. Everything is a private draft until you **Publish**. One click reverts.

**Can I use a font that isn't in the suggestions?**

Yes — type *any* Google Font name; the whole library is available.

**Does it replace ramon/colored or fof/categories?**

It includes native equivalents — tag-driven colouring and a tag-based category index — so you don't need to run both.

**Can I move a theme between forums?**

Export `.bespoke.json` on one and import it on another.

**Is there a flash of the default theme on load?**

No — the instant layer is server-rendered.

---

## Pricing

Bespoke is a premium extension sold on [Floxum](https://floxum.com/extension/ernestdefoe/bespoke):

| Plan | Price |

|---|---|

| **Annual** | **$20.00 / year** |

| **Lifetime** | **$100.00 one-time** |

Both plans include all features and updates. Buy at [floxum.com/extension/ernestdefoe/bespoke](https://floxum.com/extension/ernestdefoe/bespoke).

---

## Support

Found a bug or have a request?

* **Support site:** [ernestdefoe.online](https://ernestdefoe.online)
* **Issues:** [github.com/ernestdefoe/bespoke/issues](https://github.com/ernestdefoe/bespoke/issues)

---

## License

Proprietary — commercial license. © 2026 ernestdefoe. See `LICENSE.md`.

bespoke 2.0.0

What's Changed

Bespoke 2.0.0 — the first public release. 🎉

A premium custom theme and a live, in-context theme builder for Flarum 2 — design your whole forum on the page and publish when it's perfect.

Highlights

• Live overlay editor — recolour, re-type, reshape and rearrange on the real forum with instant preview; private draft → Publish workflow with one-click revert.
• Palette & accessibility — every colour role with light/dark values, harmony generator, and a live WCAG contrast checker.
• Any Google Font — pick from the entire library for headings and body, plus size, scale and line-height.
• Three discussion-list layouts — Feed, Grid (cover image + excerpt + tag pills), and a tag-driven Category index.
• Hero, shape & post styling — gradients/images, height & width, radius, elevation, button styles, post styles, avatar shapes.
• Effects — header styles + centred logo, visitor dark-mode toggle, glassmorphism, animations, per-tag hero colouring (ramon/colored built in), and per-card tag accents.
• Site chrome — announcement bar and a custom footer (links + social) with no extra extension.
• Widgets — Stats, Online, Top Contributors, Newest Members, Trending, Tag cloud, CTA, Markdown, and Page Builder Articles — drag into any zone, one shared cached request.
• Inspector, presets, and import/export of portable .bespoke.json themes.

Fully translatable. Requires Flarum ^2.0.

bespoke 2.0.1

What's Changed

• README: correct PHP minimum, add pricing + support site
• docs: add the 10 README screenshots

bespoke 2.0.2

What's Changed

• Fix admin crash on Flarum 2 (extensionData was removed)

If the current border-radius is intentional for a consistent card-based design, I’d like to suggest a small UX improvement for mobile viewports.

On screens below tablet size, adding a bit of horizontal padding (around 12–15px on both sides) could help the cards feel more balanced and fully “contained” visually. It often improves perceived quality, especially on modern mobile devices where edge-to-edge layouts can sometimes feel a bit tight depending on the display, case, or viewing angle.

From my experience, card-based layouts do have a strong visual identity, but on mobile I’ve personally been moving more toward flatter, full-width layouts with controlled spacing to maximize usable space while keeping clarity.

Both approaches have their strengths, of course—it really depends on the design direction you want to maintain 👍

bespoke 2.0.3

What's Changed

• Harden per Floxum audit
• Centre fallback avatar initials in data widgets
• Fix editor preview & widget persistence; add high-contrast variants

@"Subarist"#p173 Thank you will address this at some point today. It'll be included with the next round of audit fixes. Other than that what do you think? I know you can't really see a lot unless you are an Admin but the screenshots give you a really good idea.

@"ernestdefoe"#p175

I think this extension is a great idea. It should really help users who want to do something different with their forum but don’t have the time or experience to dig into Flarum . :

😂 ( : :

(emoji picker doesn’t seem to behave correctly)

The core of Flarum v2 is solid, but the real “modern feel” comes from UI/UX improvements like this. Nice to see people actively pushing it forward. 😍 :

🙃 Not sure what's going on with the emoji picker. Not sure if that's a theme issue or picker issue. Well even in the 1.x days the one thing that was truly lacking was themes. While I'm not gonna build just themes or just extensions I feel that with this theme it's kinda the end all for themes with how much you can customize it.

So with that being said this may be the last theme I do unless something hits me. I've covered a general purpose theme with Mosaic and Aurora and a gaming theme with Respawn.

There's still a big gap in extensions that you can find on other forum platforms that either there is no Flarum version or it was developed but never maintained or developed and the developer just went MIA. My aim is to bridge that gap some. If you've ever used Invision Community that's where I got the idea for this theme and my Page Builder extension. They both have live editors to make it easy to make something your own without having to know CSS or anything like that.

@"ernestdefoe"#p178

I remember a few years ago, we were discussing simple logo CSS issues on the forum. I can’t believe how much you’ve progressed since then—just look at how far you’ve come! I truly admire your spirit and dedication—your drive and vision are really inspiring.

@"Subarist"#p179 I'm not gonna lie I've learned how to get Claude to do all the heavy lifting and I take all audit items seriously. I think I have 20 extensions showing on Floxum and they are all green.

I could never do what Claude does but I am gaining more understanding of how things work and yes I remember back then having to ask for help on so many things. I knew how forums worked I just didn't know how to do advanced stuff.

Absolutely no problem at all. Just like how I might never fully learn to speak English fluently, I can still be here, chatting and discussing things with you now. 😆

bespoke 2.0.4

What's Changed

• Prevent dark-mode flash-of-light on initial load
• Default to OS colour scheme when the visitor hasn't chosen
• Implement the enable switch and default-preset seeding
• Bound widget settings size in the published document
• Wire gutter token, add mobile card padding, use inspect_on label

@"Subarist"#p182 this is true.I know so many people are against AI on Flarum but when used correctly and addressing any audit fixes that come up on Floxum AI can make things much quicker than by a human. Plus human developers have just as many issues. I get that because they wrote the code they know how everything is supposed to work but that doesn't always mean the code is good. I don't know why so many people are so against it.

@"ernestdefoe"#p184

Right, since I work in the electronics industry, I can understand why the reaction is strong when people feel their jobs are being taken. But, we’re not professional coders ourselves, and I think coders, being in that field, definitely have a certain stubbornness and pride in their craft.

@"Subarist"#p185 I agree 100%. I'm a truck driver here in the US and they are slowly coming out with autonomus trucks. They are slowing expanding the areas they can run. Now it won't replace every truck driver but it will replace a bunch of them. Like the company I drive for we are specialized and I don't think a self driving truck would ever be able to replace me or any other driver at my company.

bespoke 2.0.5

What's Changed

• Make system dark mode flash-free via render-blocking CSS
• Extract the enable-flag check into an injectable BespokeState
• Move ThemeValidator to Theme namespace; cache the discussion-list mode
• Translate the editor load-failure message
• Make the Articles widget pull real articles + add a carousel style

bespoke 2.0.6

What's Changed

• Fix dark-mode flash by correcting core's per-user pre-paint scheme
• Scope contributor counts to guests; log the boot enable-flag fallback
• Log swallowed errors in site plumbing; drop a stale JSDoc line
• Add a new-post indicator + throttle discussion-list decoration
• Stop Bespoke writing data-theme; defer to core/theme-toggle (fixes flash)

@"ernestdefoe"#p188

Under normal network conditions, the flash is barely noticeable now.seems fine. 😘

@"Subarist"#p189 Shouldn't be any flash now with the 2.0.6 update. Noticed a slight flash when going from the homepage to the discussion list.

@Subarist I will say mobile looks better on grid view now.

bespoke 2.0.7

What's Changed

• Log & degrade widget-data failures; document BespokeState boot note
• Give the client widget caches a 5-minute TTL
• Refactor list decoration into focused, testable functions
• Warn before discarding unsaved editor changes

bespoke 2.0.8

What's Changed

• Mobile: move the sidebar widget zone below the discussion list

bespoke 2.0.9

What's Changed

• Make bespoke.edit delegable; document the boot-time resolve() exception
• Trending widget: implement the tag filter end-to-end; log fetch failures
• Translate widget inspector field labels