Skip to main content

Theming

Colors used​

Android   Android

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
  • app-header-background-color for the status bar background color Android

iOS

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; 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
  • app-header-background-color for the status bar background color iOS
  • primary-color for the pull-to-refresh control/spinner iOS

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 to frontend.set_theme in Home Assistant to change them. This will fire an event which the app can detect.