iOS Light Mode Theme -- JuanMTech

[JuanM (JuanMTech)]

A Home Assistant theme inspired on the iOS light mode interface.

Preview

Preparation

1. Make sure that under the configuration.yaml file you have the following:

frontend:
  themes: !include_dir_merge_named themes

2. Under the Home Assistant Config folder, create a new folder named themes
3. Restart Home assistant to apply the changes.

HACS installation

1. Go into the Community Store (HACS)
2. Search for iOS Light Mode
3. Open the theme
4. Press Install

Manual installation

1. In the Home assistant themes folder, create a file named ios_light_mode.yaml
2. In this GitHub repo, go into the themes folder, open the ios_light_mode.yaml file and copy the content
3. Paste the content in the ios_light_mode.yaml file created under your Home Assistant themes folder

Enable theme

1. Open your Home Assistant Profile
2. Under, Themes, select the new iOS Light Mode theme

Custom Header settings

When using the Custom Header plugin, add the following to make sure that the header matches the theme.

custom_header:
  compact_mode: true
  background: var(--app-header-background-color)
  elements_color: var(--app-header-text-color)
  active_tab_color: var(--state-icon-active-color)
  tab_indicator_color: var(--state-icon-active-color)

JuanMTech/ios_light_mode_theme

[KTibow (Kendell R)]

Why did you put the restart Home Assistant part in there? HACS should reload themes for you.

[keithcroshaw]

Bit of an issue with the transparency.
I’ve seen this with the other iOS themes in fairness.
Sorry it’s not a bug report on GitHub.
Lazy? I guess so. Oh well.

[KTibow (Kendell R)]

I don’t see anything causing this, also get this with the default theme? Here’s the source I looked at:

JuanMTech/ios_light_mode_theme/blob/ed4802d49e458a9f898910b7e11680c3916a5795/themes/ios_light_mode.yaml