iOS Dark and Light Mode with easy background change - A theme pack

[basnijholt]

iOS Themes

The iOS inspired themes

See and star this repository on GitHub!

This is a generalized version of iOS Dark Mode Theme (this topic)!
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 my config files here.

Video of all different versions (or scroll down for screenshots).

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.

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

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

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

background: var(--background-image)

4. (Optional) add the following to the same file to make the header smaller (you need to install custom-header too):

custom_header:
  background: 'rgba(155, 155, 155, 0.25)'
  compact_mode: true
  button_text:
    options: '{{ hours24 }}:{{ minutesLZ }}'

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 (enable active state color)

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

Which should look something like:

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).

[Korte (Körte)]

@basnijholt

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

Thank you.
Can you help me with this:
Then add input_select.theme , input_boolean.theme_alternative , and input_boolean.dark_mode to your Lovelace UI.

an example would be nice…Thank you

[basnijholt]

Go to your edit mode in your UI and add a new “Entities card” and do something like:

[Korte (Körte)]

Thank you, and what should i se if i would like to change the theme by automation?

[Korte (Körte)]

great job, thank you

[Shadowstrider (Chris)]

Hi Everyone,

great Theme, but i musst be doing something wrong. It works for the different views but not the overall. Any idea:

I tried this, but i did not have any effect:

{
    "data": {
        "config": {
            "background": "var(--background-image)",
            "theme": "ios-dark-mode-light-blue",
            "title": "Zuhause",
            "views": [
                {
                    "badges": [

[basnijholt]

Hi @Shadowstrider!

Is it possible that you missed this instruction?

@basnijholt

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

Or do you not set the theme through automations?

[Shadowstrider (Chris)]

haha i got it. Thank you so much. It was on Backend-selected. I could to find the Theme select when i was looking for it.

Now it did. Awsome

[vulcanjedi]

I originally installed w/o HACS (im on hass on docker) via the git clone on your other thread?
Can I still use this?

[dkmcgowan (David McGowan)]

This a great them, awesome work!

to answer @vulcanjedi, I installed without HACS, just put the yaml file in the theme folder, then download all the images to your “www” folder, I matched the folder structure. Then you have to edit the yaml to replace “hacsfiles” with “local”

That would be my first request, can you auto generate one for non HACS as well so when we get updates we don’t have to do find/replace?

Also, not sure if you have many using this on an Android, but one thing is the header on the Android Companion App your background header does not work. You have…

app-header-background-color: rgba(1, 133, 162, 0.8)

With Android that has to be a HEX value, not an rgb or rgba value. This is to set the color at the top of the Android device when the app is open, the part that has time, open apps, signal, battery, etc…

So I guess could you also pick a color per theme and generate an android version as well that has a HEX value for that setting so it works on Android mobile?

Otherwise the weirdness I see is from custom-header which I posted over there, seems to have issues sometimes with multiple dashboards and background images, only on mobile

[dkmcgowan (David McGowan)]

Another random request you can take or leave, but since you are auto generating, could you not also make a folder with each individual theme in it’s own folder? that way if someone really only liked one dark/light they could just place those in their theme folder so when someone goes to their profile to switch, or uses dropdowns like you suggested, it’s not so many options?

[vulcanjedi]

when you say download do you mean you manually went to github repo and grab each one?

[dkmcgowan (David McGowan)]

yes, go to github and download them, place them in your config folders correctly

[phairplay]

Hi I’m using this great theme but I’m having an issue with mini media not showing icons, could someone please help

[basnijholt]

@dkmcgowan

That would be my first request, can you auto generate one for non HACS as well so when we get updates we don’t have to do find/replace?

Good suggestion!

I’ve added the theme here: lovelace-ios-themes/manual-install at master · basnijholt/lovelace-ios-themes · GitHub

A Pull Request that adds manual installation instructions is appreciated

[NdR (Andrea Montanari)]

Hello @basnijholt, and thanks for your work!

I have an issue, only with the light versions of the theme. When I chamge page or i open a popup of some card, the background become grey for a while. After that It return back to the theme background.

Do you have an idea about how to solve it?

[basnijholt]

Hi @NdR, I do not understand what you mean, could you perhaps attach a screenshot?

[NdR (Andrea Montanari)]

Sure @basnijholt , here you can see my issue:
I have a lot of “grey flashes” on the background.
This not happen with your “old dark ios theme”.

[basnijholt]

I don’t observe that behaviour on my iPhone. How did you activate the themes? Using the service call or via your profile?

[NdR (Andrea Montanari)]

I only use the Profile to set it…

I still have your “old” Dark Theme installed. Can it cause this issue?