iOS Themes

The iOS Theme by @basnijholt and modified from @kalkih's Gist

A generalized version of iOS Dark Mode Theme! This includes both Dark and Light Mode and 7 different HomeKit backgrounds. Installing this theme adds 28 different themes:

ios-light-mode-dark-green
ios-dark-mode-dark-green
ios-light-mode-light-blue
ios-dark-mode-light-blue
ios-light-mode-light-green
ios-dark-mode-light-green
ios-light-mode-orange
ios-dark-mode-orange
ios-light-mode-blue-red
ios-dark-mode-blue-red
ios-light-mode-red
ios-dark-mode-red
ios-light-mode-dark-blue
ios-dark-mode-dark-blue
... and versions with the -alternative suffix

🖼️ Backgrounds: Remote vs Local

As of version 3.0.0, we have introduced an alternative to Base64-encoded background images to boost performance.

By default, iOS Themes now use remote background images hosted on GitHub for faster caching and loading times. However, for users that prefer to host images locally on their Home Assistant setup (or in environments with poor internet connectivity), -alternative versions of the themes are available, which use locally hosted background images.

Remote Backgrounds (Default)

The default themes use background images stored in our GitHub repository.
To switch to the default themes, no configuration beyond the installation steps is necessary.

Local Backgrounds (Alternative Versions)

For the alternative themes, you will need to download the images and store them locally in your Home Assistant's /config/www/ios-themes directory. Home Assistant automatically serves files from the www folder under /local/.

📥 How to Download Backgrounds for Local Use (Alternative Themes)

Step-by-Step Local Background Setup:

To use locally hosted background images, follow the instructions below.

Create the necessary directory: Open a terminal (or SSH into your Home Assistant setup) and run the following command to ensure the correct folder structure is in place:
```
mkdir -p /config/www/ios-themes
```

Download the background images: Download the required background images using wget commands. This will store them in the /config/www/ios-themes folder.

For example:

# Dark Blue background
wget -O /config/www/ios-themes/homekit-bg-dark-blue.jpg https://raw.githubusercontent.com/basnijholt/lovelace-ios-themes/master/themes/homekit-bg-dark-blue.jpg

# Light Blue background
wget -O /config/www/ios-themes/homekit-bg-dark-blue.jpg https://raw.githubusercontent.com/basnijholt/lovelace-ios-themes/master/themes/homekit-bg-light-blue.jpg

# Add more backgrounds as needed for other themes

Repeat the command for all the backgrounds you need (ensure to replace dark-blue.jpg with the appropriate background name from the themes you're using).

Switch to the alternative theme: In your Home Assistant profile settings, select the alternative version of the theme you want to use.
Example: ios-dark-mode-dark-blue-alternative

Important: For images hosted locally, the background paths in the theme are referenced as /local/ios-themes/....

Command Summary for Downloading Backgrounds:

Here are commands to download all available backgrounds:

# Dark Blue
wget -O /config/www/ios-themes/homekit-bg-dark-blue.jpg https://raw.githubusercontent.com/basnijholt/lovelace-ios-themes/master/themes/homekit-bg-dark-blue.jpg

# Light Blue
wget -O /config/www/ios-themes/homekit-bg-light-blue.jpg https://raw.githubusercontent.com/basnijholt/lovelace-ios-themes/master/themes/homekit-bg-light-blue.jpg

# Dark Green
wget -O /config/www/ios-themes/homekit-bg-dark-green.jpg https://raw.githubusercontent.com/basnijholt/lovelace-ios-themes/master/themes/homekit-bg-dark-green.jpg

# Light Green
wget -O /config/www/ios-themes/homekit-bg-light-green.jpg https://raw.githubusercontent.com/basnijholt/lovelace-ios-themes/master/themes/homekit-bg-light-green.jpg

# Orange
wget -O /config/www/ios-themes/homekit-bg-orange.jpg https://raw.githubusercontent.com/basnijholt/lovelace-ios-themes/master/themes/homekit-bg-orange.jpg

# Blue Red
wget -O /config/www/ios-themes/homekit-bg-blue-red.jpg https://raw.githubusercontent.com/basnijholt/lovelace-ios-themes/master/themes/homekit-bg-blue-red.jpg

# Red
wget -O /config/www/ios-themes/homekit-bg-red.jpg https://raw.githubusercontent.com/basnijholt/lovelace-ios-themes/master/themes/homekit-bg-red.jpg

After placing the images in the /config/www/ios-themes/ directory, reload your Home Assistant theme settings (or restart Home Assistant) and enjoy using the responsive, locally hosted backgrounds!

Screenshots

Screenshots of my Home-Assistant instance, see the config files here .

Low quality gif, click here to see a mp4 (or scroll down).

Overview

Installation

Installation of the themes with HACS.

(If you do not have it yet) Install HACS.
Go to the HACS Community Store.
Click on the THEMES tab.
Search and install the iOS Themes.

Add the following code to your configuration.yaml file (reboot required).

frontend:
  ... # your configuration.
  themes: !include_dir_merge_named themes
  ... # your configuration.

Add the following line to your lovelace-ui.yaml or use the RAW editor:

background: var(--background-image)

So the end result will be something like this example.

Automations to easily switch

WARNING: if you want to switch themes using automations, you need to go to your profile and select "Backend-selected" for Theme!

It is recommended to use these automations (basnijholt/home-assistant-config/automations/frontend.yaml) in combination with these:

input_select:
  theme:
    options:
      - blue-red
      - dark-blue
      - dark-green
      - light-blue
      - light-green
      - orange
      - red
    icon: mdi:format-color-fill
  
input_boolean:
  dark_mode:
    name: Dark mode
    icon: mdi:theme-light-dark
  theme_alternative:
    name: Theme alternative (disable active state color)

Then add input_select.theme, input_boolean.theme_alternative, and input_boolean.dark_mode to your Lovelace UI.

How does the code work

All the 28(!) themes in themes/ are automatically generated using create-themes.py and the information in settings-light-dark.yaml is passed into template.jinja2. The resulting file is themes/ios-themes.yaml which contains all variants (different backgrounds and dark/light mode).

basnijholt / lovelace-ios-themes