Skip to content

❤️📱🏠🤖 Themes inspired by iOS Dark ⬛️ and Light ◻️ Mode for Lovelace Home Assistant with different backgrounds

License

Notifications You must be signed in to change notification settings

dMopp/lovelace-ios-themes

 
 

Repository files navigation

iOS Themes

Action Status hacs_badge homeassistant_community Github Stars

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

Screenshots

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

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

Theme - Overview

Overview

Theme - Overview Theme - Overview Theme - Overview Theme - Overview Theme - Overview Theme - Overview Theme - Overview Theme - Overview Theme - Overview Theme - Overview Theme - Overview Theme - Overview Theme - Overview Theme - Overview

Installation

  1. 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.
  1. Add the following code to your configuration.yaml file (reboot required).
frontend:
  ... # your configuration.
  themes: !include_dir_merge_named themes
  ... # your configuration.
  1. 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).

About

❤️📱🏠🤖 Themes inspired by iOS Dark ⬛️ and Light ◻️ Mode for Lovelace Home Assistant with different backgrounds

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Jinja 66.6%
  • Python 33.4%