Home Assistant Community

iOS Dark Mode Theme -- JuanMTech

Share your Projects! Themes

JuanM (JuanMTech) August 10, 2020, 10:46pm 1

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

Preview

Preparation

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

frontend:
  themes: !include_dir_merge_named themes

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

HACS installation

Go into the Community Store (HACS)
Search for iOS Dark Mode
Open the theme
Press Install

Manual installation

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

Enable theme

Open your Home Assistant Profile
Under, Themes, select the new iOS Dark 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)

2 Likes