30 lines
1.7 KiB
Markdown
30 lines
1.7 KiB
Markdown
---
|
|
title: Theming
|
|
id: 'theming'
|
|
---
|
|
|
|
## Colors used
|
|
|
|
![Android](/assets/android.svg) Android<br /><br />
|
|
Colors should be specified in hex format (e.g. `#0099ff`) and defining element colors through variable names is not supported.
|
|
- `primary-background-color` for the navigation bar background color ![Android](/assets/android.svg)
|
|
- `app-header-background-color` for the status bar background color ![Android](/assets/android.svg)
|
|
|
|
![iOS](/assets/iOS.svg)<br /><br />
|
|
As of version 2020.3, the iOS app will accept colors specified in hex, rgb, hsl, rgba, hsla formats or using a valid [HTML color name](https://www.w3schools.com/colors/colors_names.asp); although formats with alpha values are recognized, using alpha values less than 100 % (or 1) will currently lead to a color mismatch. 2020.2 and earlier versions of the app require colors to be specified in hex.
|
|
- `primary-background-color` for the background color of the web view ![iOS](/assets/iOS.svg)
|
|
- `app-header-background-color` for the status bar background color ![iOS](/assets/iOS.svg)
|
|
- `primary-color` for the pull-to-refresh control/spinner ![iOS](/assets/iOS.svg)
|
|
|
|
## Setting the app theme
|
|
|
|
The process needed to get the app to match the Home Assistant theme is different depending on the app version used.
|
|
|
|
### iOS apps after version 2020.2
|
|
|
|
The app will automatically match the selected theme in Home Assistant and will update in real time when the theme is changed.
|
|
|
|
### iOS app version 2020.1 or older and Android app
|
|
|
|
To change the theme of the app you must use a [service call](https://www.home-assistant.io/docs/scripts/service-calls/) to `frontend.set_theme` in Home Assistant to change them. This will fire an event which the app can detect.
|