Appearance and theming
Open Settings in the builder header, then the Appearance tab. Everything here applies to the whole app.
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 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 |
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.
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.
- Screen transition — how one screen replaces another, including none.
- 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.
- Avatar shape: circle, rounded or square.
- List sizing, controlling row height and density.
Setting these once means the directory and the followers list cannot drift apart.
App Icons
Section titled “App Icons”The launcher icon, and the branding images bundled into the build.
Use a square PNG, at least 512×512. Anything else is the most common cause of a build failing during the icon step. See When a build fails.
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.
Setting colours, typography and background style
record → src/assets/media/global-appearance.mp4
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 |