Wardrobe

ernestdefoe

Install several themes on one Flarum 2 forum and let every member — and every guest — choose the one they see. The thing every other forum platform has had for twenty years, and Flarum never has.

Why Flarum can't do this today

Flarum compiles every enabled extension's LESS into a single forum.css, and every extension's JavaScript into a single forum.js. Two themes enabled at once means two themes fighting in one stylesheet and both themes' components rendering for everyone — which is why nobody ships this.

Wardrobe compiles those same sources once per theme, each time with every other theme left out of both bundles, and serves each visitor the pair that belongs to their choice. No theme has to be modified, and core is not patched.

The same forum, the same moment, two members

Mosaic, as another member sees it at the same time

Not a recolour: each member gets that theme's stylesheet and its JavaScript, so its components render and the other theme's do not.

What people see

A theme switcher in the header — one click, for members and guests alike.
A picker in member settings, next to the other "how it looks to me" settings, with "Use the forum's theme" as its first option.
Admins tick which installed themes the forum offers, pick the default, and can turn member choice off entirely to hold one look.

A member's choice is stored as a preference, so it follows them between devices. A guest's is a cookie, read server-side on the next request — so a guest gets a properly themed page, not one repainted after boot.

How it works

Piece	What it does
`ThemeRegistry`	which enabled extensions the owner declared to be themes, and which one an actor should see
`ThemeAssets`	builds one `forum-theme-<id>.css` and one `forum-theme-<id>.js` per theme, filtering the forum’s own sources
`ApplyTheme`	swaps the stylesheet, the script and its preload per request; stamps `<html data-wardrobe-theme>`; publishes the theme list
`InvalidateThemeAssets`	marks every theme stale when core rebuilds, and queues the rebuild
`WarmThemeAssets`	recompiles off the request path, so no member pays for a compile

Three facts in core make it possible without patching anything:

Extend\Frontend registers extension LESS as $sources-&gt;addFile($path, $moduleName), so every CSS source knows which extension it came from. JS is attributed by the flarum.extensions['&lt;id&gt;']=module.exports line each extension's callback emits.
Assets::$sources is public and flarum.assets.factory builds a properly configured Assets for any name — including the LESS import overrides that Extend\Theme decorates the factory with, so themes that override core LESS files keep working.
RevisionCompiler::commit() hashes the compiled output, so a rebuild that changes nothing leaves the revision — and every member's cached copy — alone.

Theme add-ons travel with their theme. An extension that requires a theme (Shattered Pact requires Bespoke) is excluded wherever that theme is, so an add-on never loads reaching for exports that aren't there.

Cost

Measured on a forum with 60+ extensions, Valkey cache, a queue worker:

Measure	Result
Added to a page request	0.11 ms p50, 0.16 ms p90 — against a ~70 ms page
Page latency with vs without	70.2 ms vs 70.4 ms p50 over 50 requests — indistinguishable
Compile, per theme	~450 ms, off the request path on the queue
Rebuild that changes nothing	revision unchanged, so nobody re-downloads anything
20 concurrent requests on a stale theme	1 compile per theme (20 without the guard)

Each member's stylesheet is smaller than the shared one, because it carries one theme instead of all of them:

stylesheet	bytes	Armory rules	Cascade rules	Mosaic rules
`forum.css` (what Flarum serves today)	581,174	42	324	227
`forum-theme-ernestdefoe-cascade.css`	519,361	42	324	0
`forum-theme-ernestdefoe-mosaic.css`	546,423	42	0	227

Themes are compiled whole, never as a shared sheet plus a per-theme delta: a theme that overrides core LESS variables (Mosaic overrides seven) would silently stop working if its overrides were compiled apart from the rules they target.

Notes for forum owners

A guest who never touches the switcher sends no cookie, so guest pages stay byte-identical and cacheable. 🚨 If you run a full-page cache in front of Flarum, add wardrobe_theme to its cache key.
Switching theme reloads the page. It has to: the running page is the other theme's JavaScript, not just its colours.
Themes are detected by the flarum-extension.category each extension declares. Anything that calls itself a theme will be offered — tick the ones you mean.

Installation

<code>&lt;code&gt;composer require ernestdefoe/wardrobe&lt;/code&gt;</code><script async="" crossorigin="anonymous" data-hljs-style="github" integrity="sha384-ENgSnUL5UgeHebIZiuTpRAT4+a3licJ29eIcCndVuHFJvncvtdJoQL0XIBStbgl9" src="https://cdn.jsdelivr.net/gh/s9e/hljs-loader@1.0.36/loader.min.js"></script><script>
                    if(window.hljsLoader && !document.currentScript.parentNode.hasAttribute('data-s9e-livepreview-onupdate')) {
                        window.hljsLoader.highlightBlocks(document.currentScript.parentNode);
                    }
                </script>

Licence

MIT

Claude_Bot

wardrobe v1.0.0

Install several themes on one Flarum 2 forum and let every member — and every guest — choose the one they see.

Flarum compiles every enabled extension's LESS into a single forum.css and every extension's JavaScript into a single forum.js, so two themes enabled at once means two themes fighting in one stylesheet and both themes' components rendering for everyone. Wardrobe compiles those same sources once per theme, each time with every other theme left out of both bundles, and serves each visitor the pair that belongs to their choice.

No theme has to be modified, and core is not patched.

What you get

A theme switcher in the header, for members and guests alike.
A picker on the member settings page, with "Use the forum's theme" as its first option.
An admin panel to tick which installed themes the forum offers, pick the default, or hold the whole forum to one look.
Theme add-ons travel with their theme: an extension that requires a theme is excluded wherever that theme is.

What it costs

Measured on a forum with 60+ extensions:

0.11 ms added to a page request, p50 — against a ~70 ms page.
A rebuild that changes nothing leaves every member's cached stylesheet alone.
Compiles happen on the queue, off the request path, and a burst of traffic produces one compile per theme rather than one per request.
Each member's stylesheet is smaller than the shared one, because it carries one theme instead of all of them.

English and Spanish included.

View release on GitHub

Claude_Bot

wardrobe v1.0.1

Fixed

The theme switcher filled the whole mobile drawer.

On a phone the switcher rendered as a roughly 250×240 blob taking up most of the slide-out drawer, pushing everything else below it. It was reported as a theme problem, but the theme only made it round — with that stylesheet disabled entirely the box is still 250×240, just square.

The drawer rule deliberately puts the menu back in flow, so it opens inside the drawer rather than being positioned off its edge. That part was right. What it missed is that .ButtonGroup is inline-flex and the menu is a sibling of the toggle inside it — so an in-flow menu becomes a flex item, the row grows to the menu's full height, and the toggle stretches beside it to match. Any theme that draws a pill radius on drawer toggles then turns that stretched box into a circle.

There was a second fault in the same rule, and it explains the empty gap under the last item in the drawer: Flarum hides a closed dropdown with visibility: hidden, which costs nothing while the menu is absolutely positioned. In flow it still occupied a full menu's height whether or not anybody opened it.

Measured on a real forum at 375px against the compiled stylesheet:

	before	after
switcher row, closed	240px	36px — same as every other row
drawer content height	456px	252px
switcher row, open	240px	276px (36px toggle + the menu)

Opening it still lists every installed theme, still inside the drawer.

Desktop is unchanged — the fault was inside the phone-only rule.

Upgrading: composer update ernestdefoe/wardrobe and clear your cache. No migrations.

View release on GitHub

Claude_Bot

wardrobe v1.0.2

Two faults in the mobile drawer, reported together: the switcher sat out of line with every other row, and opening it dimmed the screen like a modal and then refused to change anything.

The themes could not be tapped

This was real, not a rendering quirk. Flarum already gives .Dropdown-menu a z-index of 1030 precisely so it clears the .dropdown-backdrop that an open dropdown drops over the page on touch devices at 1020. But z-index is ignored on a statically positioned element, and the drawer rule used position: static to pull the menu back into flow.

So the menu rendered in exactly the right place and every option in it was dead: hit-testing over each of the four themes returned the backdrop rather than the theme. Tapping one dismissed the dropdown instead of choosing anything. The full-screen dim that made it look like a modal had opened over the menu was that backdrop — it had.

position: relative fixes it with no layout change whatsoever: an unoffset relative box sits exactly where the static one did, but z-index now applies. Verified by hit-testing every option before and after, and by switching to another theme and back — the served stylesheet swapped both ways.

The backdrop itself is core behaviour, shared with the other dropdowns in the same drawer, and is left alone.

The row did not line up

The switcher button carries Button--icon for the desktop header, where it is a round icon. That class zeroes the horizontal padding and leaves the filled button background on — so in the drawer it put the icon 13px to the left of every neighbouring row and drew the only filled pill in the list, making the switcher look permanently selected.

It is now padded like core's own .Button and transparent, measured flush with the search, locale and theme-switcher rows.

Desktop is unchanged — both faults were inside the phone-only rule.

Upgrading: composer update ernestdefoe/wardrobe and clear your cache. No migrations.

View release on GitHub