Status bar colour in apps
In the Purple apps for iOS and Android, Experience screens without a native title bar show the status bar above the web content. By default, this area uses the action bar colour from Purple Manager. A view can set its own colour with the standard theme-color meta tag, configured in views.json. Available from app version 11.3.0 (iOS and Android) and Purple Experience 6.2.0.
Default
- Status bar area: the action bar background colour from Purple Manager (see Colour settings in Purple Manager ). On Android it is darkened by 20 %.
- Status bar icons: on iOS the status bar style configured for the app, on Android white.
- Area below the content (home indicator on iOS, navigation bar on Android) and the side areas in landscape: black.
Set the colour for a view
Add a theme-color entry to the view's seo.meta in views.json:
{
"name": "home",
"path": "home",
"seo": {
"meta": [{ "name": "theme-color", "content": "#170c0c" }]
},
"content": []
}Use a hex colour, rgb() or a colour name. In the apps, theme-color is the only entry of seo.meta that is used; all other SEO tags apply to websites only. While a view with a theme-color is shown:
- the status bar area shows exactly this colour (also on Android, without darkening),
- the status bar icons switch automatically: dark icons on light colours, light icons on dark colours.
Views without a theme-color show the default. The area below the content stays black.
Light and dark variants
"seo": {
"meta": [
{ "name": "theme-color", "media": "(prefers-color-scheme: light)", "content": "#ffffff" },
{ "name": "theme-color", "media": "(prefers-color-scheme: dark)", "content": "#121212" }
]
}The first entry whose media query matches is used. Only add a dark entry if the page itself has a dark design: the apps currently always use the light scheme (app version 11.3.0), but the dark entry applies as soon as the apps report dark mode.
Let the user choose the colour
The content can be an expression, for example a user attribute:
"seo": {
"meta": [{ "name": "theme-color", "content": "$context.userAttributes.statusBarColor" }]
}A button or switch sets the attribute with the Set User Attribute action:
"tap": { "type": "setUserAttribute", "key": "statusBarColor", "value": "#121212" }The colour changes immediately, without a reload. An empty value removes the tag, and the default is shown again. The attribute is stored, so every view that uses it shows the chosen colour, also after the app is restarted. A native light/dark mode switch for the apps is planned; once it is available, use it with a light/dark pair instead of a dark mode switch of your own.
Where theme-color has no effect
- Screens with a native title bar (for example opened with title_bar=true): the title bar keeps the colours from Purple Manager.
- Native screens (for example app info or settings): unchanged. When the user returns to the Experience, its colour is shown again.
- Experience screens opened with force_status_bar=false: the status bar is hidden. See List of Action URLs .
- Websites: the same configuration sets the tag on the website, and browsers use it for their own interface.