Appearance and theming
Open Settings in the builder header, then the Appearance tab. Everything here applies to the whole app.
Looking for the app icon? It moved to General settings, alongside the app’s name and bundle identifier.
Default Mode
Section titled “Default Mode”Whether your app opens in light, dark, or follows the device.
If you place the Dark Mode feature, members can override your default themselves, and their choice persists.
Light Mode Colours and Dark Mode Colours
Section titled “Light Mode Colours and Dark Mode Colours”Two full palettes, edited separately. They are separate rather than derived because a colour that reads well on white rarely reads well on near-black at the same lightness.
Set both if you offer dark mode at all. If you leave the dark palette at its defaults while heavily branding the light one, members who switch will see an app that looks like a different product.
Background and Page colour
Section titled “Background and Page colour”These two are easy to mix up, and the difference is what makes a card look like a card.
Background is the surface: cards, headers, app bars and input fields are painted with it. Page is what those sit on. Leave Page empty and it is painted the same colour as the surface, exactly as it was before the setting existed — so an app you have already shipped does not change.
Set Page a shade away from Background — slightly darker in light mode, slightly lighter in dark mode — and every card in the app lifts off the page. That is the whole trick; nothing else has to change.
Apply the new default styling
Section titled “Apply the new default styling”Apps created from September 2026 onward start with a warm-neutral palette, Inter, a page colour set a shade under the card surface, and slightly larger list avatars. Apps created before then keep exactly the look they had — we do not restyle an app somebody has already shipped.
The button under Appearance writes that starting look into the settings you are editing. Nothing is saved until you press Save, so you can look at it in the preview and cancel. Everything it sets is an ordinary setting afterwards: change any of it, or press Reset to defaults to go back.
Background Style
Section titled “Background Style”How screen backgrounds are painted:
| Style | What it does |
|---|---|
| Solid | One flat colour |
| Transparent / glossy | A translucent ground, letting layers show through |
| Gradient | Two colours, with separate light and dark definitions |
| Radial | A radial gradient, with adjustable centre and spread |
| Image | A picture behind every screen, dimmed and anchored as you choose |
Radial gives you a centre point and a spread, so you can put a glow behind the top of the screen rather than the middle.
Image backgrounds
Section titled “Image backgrounds”Pick a picture from your site’s media library or paste a URL. Three settings decide how it sits:
- Focus X / Y anchor it. The picture is cover-sized, so fitting a landscape photo into a portrait phone crops most of the width away — and the subject is rarely in the middle of what survives.
- Darken lays your background colour over it as a scrim, so text stays readable. Leave the colour unset for the ordinary dark wash.
- Scrolling decides whether it moves:
| Mode | What it does |
|---|---|
| Fixed | The picture stays put while the content scrolls over it |
| Scrolling | The picture travels with the content, the way a page header leaves the top of a web page |
| Parallax | The picture travels a fraction of the scroll, which reads as depth. Speed sets the fraction |
Both moving modes stop after half a screen of travel. A list scrolls much further than it is tall, and a picture that kept going would leave the bottom of the screen with nothing behind it.
Fixed is the default, so an existing app is never set in motion by an update.
A feature’s own Background setting offers the same choice, picture and scrolling included, for that screen alone.
Navigation Surface
Section titled “Navigation Surface”How the app’s bars are painted — the upper nav, top nav, back bar, bottom bar and the sidebar drawer.
| Style | What it does |
|---|---|
| Solid | Opaque chrome. This is the default and what every existing app has |
| Glass | Frosted: a translucent fill over a real blur, with content scrolling underneath |
| Glass (iOS only) | The same on iPhone; Android keeps solid bars |
Glass is the treatment Slack and Instagram use on iOS. It only reads as glass when something is moving beneath it, so the effect is strongest on a long list and least visible on a short screen with nothing to scroll.
It covers the bars and nothing else. Cards, buttons, form fields and list rows keep their solid backgrounds — a blurred card sitting on a blurred bar is two layers of blur for one effect, and it costs frame rate on every scroll.
Glass (iOS only) exists because the blur is more expensive on Android, where a mid-range phone can drop frames scrolling under it. Pick it if your members are mostly on Android and you would rather have smoothness than the effect. The preview always draws the glass — it has no Android to show you.
This setting covers every bar at once. To give one bar its own padding, colours, border, background or an animated active indicator, use its navigation appearance panel — and note that a background set there replaces the glass on that bar.
Typography and Layout
Section titled “Typography and Layout”The tokens every screen sizes itself from:
- Font family, from Google Fonts. It is bundled into the build, so it works offline and does not depend on the device having it.
- Text sizes for headings, secondary headings and body.
- Wrappers and borders — the gap and padding around content, and border width.
- Card corners — the corner radius of a content card: an activity post, a member row, a group row. Set it to 0 for square cards.
- Screen transition — how one screen replaces another, including none. The incoming screen brings the app background with it, so a background never appears only once the transition ends.
- Tablet settings, for larger screens.
Changing a token changes every screen that uses it. That is the point: it is faster than restyling screens one at a time, and it keeps the app coherent.
Fields and Buttons
Section titled “Fields and Buttons”Form control styling, in three groups: text fields, dropdowns and choices, and buttons. These apply everywhere a form appears — sign-in, registration, profile editing, search filters.
User Lists
Section titled “User Lists”How members are rendered wherever they are listed — the directory, followers, group members, search results.
- List sizing, controlling row height and density.
Avatar shape is set on Avatars, on the Background tab, and applies to every member photo in the app.
Setting these once means the directory and the followers list cannot drift apart.
One deliberate exception: a group’s photo is drawn as a rounded rectangle rather than a circle, so a group and a member are distinguishable at a glance in two directories that sit next to each other. If you set the Avatars shape to Square, groups are square too — an explicit choice is never overridden.
Forums
Section titled “Forums”How a forum topic is proportioned. The same row is drawn by the Forum Feed, Forums, My Forum Activity, the moderation queue and search results, so it is set once here rather than on each screen. What each screen shows stays a setting on that screen.
| Setting | What it changes | Default |
|---|---|---|
| Vote column | Arrows, chevrons, or hidden | Arrows |
| Title size | The topic title, on a row and on the topic screen | 15 |
| Meta size | The author, time and reply-count line | 11 |
| Badge size | The forum name, and the pinned / solved chips | 10 |
| Avatar | The topic author’s avatar; rows and replies step down from it | 22 |
| Card radius | The corners of a topic card, forum card and reply block | 10 |
| Vote icon | The up and down arrows | 16 |
| Reply indent | How far each nesting level is indented | 14 |
Leave a box empty to keep the default.
Hidden removes the vote column even on a site that has ForumWP Pro’s votes module switched on. The score still exists on your site — the app stops putting arrows on every row.
Each forum screen also has its own Title text and Content text on its Appearance tab, for a screen that should read differently from the rest. Leave those empty and the screen follows the global Typography settings.
Feed CSS
Section titled “Feed CSS”Custom CSS applied to feed content. A hatch for the case the settings above do not cover, rather than the first thing to reach for.
Sidebar Sub-navigation Arrow
Section titled “Sidebar Sub-navigation Arrow”Whether a Parent Menu in the drawer shows a disclosure arrow on its group headers.
Seeing your changes
Section titled “Seeing your changes”The preview updates as you edit. The built app does not — appearance is compiled in, so a colour change reaches a phone only after the next build.
When it does not work
Section titled “When it does not work”| Symptom | Cause | Fix |
|---|---|---|
| The app looks unstyled in dark mode | Only the light palette was set | Set the dark palette too |
| A font does not apply | The family name does not match a Google Fonts family | Pick it from the font picker rather than typing it |
| The build fails at the icon step | The icon is not a square PNG of at least 512×512 | Re-upload and build again |
| Colours look right in preview, wrong on the phone | The phone has an older build | Build again |