---
title: Status bar colour in apps
slug: experience/status-bar-colour-in-apps
createdAt: 2026-10-29T09:05:32.038Z
---

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](docId\:HIz-ceTIvjEi6aGI-LuRT) ). 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`:

```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

```json
"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:

```json
"seo": {
  "meta": [{ "name": "theme-color", "content": "$context.userAttributes.statusBarColor" }]
}
```

A button or switch sets the attribute with the Set User Attribute action:

```json
"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](docId\:HvlbwIwymM61GC7F6ZNfR) .
- Websites: the same configuration sets the tag on the website, and browsers use it for their own interface.