basnijholt / lovelace-ios-themes

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

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

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

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)

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

lovelace-ios-themes's Issues

Change Color State of Window-Shutter

Hi Community,

how can I change this purple color of my covers zu any custom color, based on state.
The color doesn‘t match with the other colors (orange) of the theme.

Background not working

hi all first I just want to thank you for these amazing theme.
I now have a problem that my background Is grey on all the different themes, how do I fix this ?

app-header-background-color should change to match theme colors.

Hello there,
I have an aesthetic request to improve your awesome themes:
app-header-background-color does not match the color scheme of most themes.
in my opinion, it should be the same (or compliment) as the background color used in the theme.
orange themes shouldn't have a brown header, it should be as orange as the background.

Dark Mode Slider Knob color to dark to properly see

With most of the dark mode themes the Slider Knob is dark gray and almost not visible at all unless your screens brightness is very high.

I checked in my iPhone and the Slider knobs color is the same between active and inactive. Please fix this so either to color is the same or at least more bright so it is properly visible.

Please add the following under all #Switches themes:

switch-unchecked-button-color: "#B3B3B3"

Theme is broken since update 2023.04.0

Theme wont load anymore since the latest update.

theme not work in panel with hassio 0.117, no wallpaper

theme not work with hassio 0.117

White text and Icons in Mini Media Player

Hi, first of all thank you for these themes, they are really nice and I am very grateful for you sharing them.

My issue or more of a question or FYI is I was having trouble with Mini Media Player cards showing all white in light versions af the theme.

Anyway, after a lot of digging and failed messing I spotted the following...

Custom

mcg-title-letter-spacing: .15em
mini-media-player-base-color: white
mini-media-player-icon-color: white

Is there any reason for these to be in the release? once I removed them the MMP cards are working as they should.

Thanks again.

Remove address bar from screenshots

(just for documentation)

I used

import pathlib

import numpy as np
from PIL import Image

fs = list(pathlib.Path(".").glob("*.png"))


def remove_url(fname):
    im = Image.open(fname)
    y0, x0, y1, x1 = 963, 164, 1461, 217  # from https://www.image-map.net/
    data = np.array(im)
    to_remove = data[x0:x1, y0:y1]
    data[x0:x1, y0:y1] = to_remove[0][0]
    return Image.fromarray(data)

for f in fs:
    im = remove_url(f)
    im.save("new" / f)

for f in sorted(fs):
    print(str(f))

deleted

deleted

Gauge Card

Hi

When a Gauge Card is set to show RED, say over 90%, you just get a slightly darker shade of yellow, not RED

I am using "ios-dark-mode-blue-red"

Flash between tabs

Does somebody know how eliminates the white flash when you change the tabs? It flash when it loads the theme on every tab.
I’m use custom header.

Q: option to change transparancy?

Is there a way to change the transparency of the elements? It's a bit too transparent imho.
example where transparency is tad hindering:

Is a version compatible with ULM theme possible?

I am using https://github.com/UI-Lovelace-Minimalist/UI and would love to use these theme, but setting this theme on a dashboard using ULM cards/custom-cards looks broken.

Is a version compatible with ULM theme possible?

How to install when HA is installed in Python virtualenv

I know this is technically a HA question, but I couldn't find an answer in the docs or the community forum. Would you mind to include some pointers on how to install this when one has e.g. installed HA on a Raspberry PI in a Python virtualenv? Does one simply create a themes directory and copy some files? Scanning this repo briefly, it looks like I only need settings-light-dark.yaml, run create-themes.py and copy the files to the themes directory.

How to change drop-down background menu color?

I know years ago, Home Assistant had a limitation where it inadvertently shared card-background-color with unrelated theme colors such as dropdown menu background color. I finally gave up trying to use transparent card backgrounds.

Have you figured out a way to define the color for the drop-down menu background color (without transparency) or at least add blur to the drop-down?

Feature Request: Style the guage cards

Hi!

Love the theme, just one thing stands out in my setup - the Guage colors. Is it possible to add a style option to align the colors of the guages? The blue clashes a bit with the rest of the vibrant colors.

Enable Card Mod, for custom-header replacement?

With the imminent removal of the custom-header repository due to incompatibilities with 0.117, a community has sprung up around card mod which replicates many features.

Would it be possible to include (optionally?) a card_mod area to themes?

Here is how I've manually done it, using a snippet from here.

Not sure how best to preserve this when the theme has fixes and updates?

#
# iOS Dark Mode Theme - blue-red
#
ios-dark-mode-blue-red:
  # Global
  card-mod-theme: ios-dark-mode-blue-red
  ...
  # CCH
  card-mod-root-yaml: |

    ha-app-layout$: |
        /* This corrects top padding for the view. */
        #contentContainer {
          padding-top: 48px !important;
        }

    paper-tabs$: |
        /* This hides tab scroll arrows, remove next 3 lines if you want them. */
        paper-icon-button {
          display: none;
        }
        /* This makes it so arrows are only displayed when needed. */
        .not-visible {
          display: none;
        }
    .: |
      /* This shifts the unused portion of the header up. */
      app-toolbar:not([class="edit-mode"]) {
        margin-top: -64px;
        z-index: 1;
      }
      /* This shifts the menu button back down. */
      app-toolbar:not([class="edit-mode"]) ha-button-menu {
        margin-top: 110px
      }
      /* This shifts the voice button back down. */
      app-toolbar:not([class="edit-mode"]) mwc-icon-button[label] {
        /* Uncomment line below to hide voice button. */
        /* display: none; */
        margin-top: 110px
      }
      /* This shifts the options button back down. */
      app-toolbar:not([class="edit-mode"]) ha-menu-button {
        /* Uncomment line below to hide options button. */
        /* display: none; */
        margin-top: 110px
      }
      /* This hides the menu button when sidebar is open. */
      menu-button[style="visibility: hidden;"] {
        display: none;
      }
      /* This adds room for the menu button when sidebar is open. */
      :host-context(home-assistant-main[expanded]) paper-tabs {
        margin-left: 60px !important;
      }
      /* This leaves space for the buttons on the right of the tabs bar.
         Change 112px to 56px if you don't use voice icon. */
      paper-tabs {
          margin-right: 112px !important;
      }
      /* This corrects the sizing of the view. */
      #view {
        min-height: calc(100vh - 48px) !important;
      }

Kiosk Mode issue

when switching to kiosk mode on a samsung tablet it leaves a black bar along the bottom of the screen.

Is there a way i can preset the width and height of the background?

deleted

deleted

Odd behaviour with markdown card

Hi,

I've been using your themes for a while, and everything is great. Sometimes, when refreshing the page, I end up with odd shading around the markdown cards. Here's what is looks like when it "breaks":

Here is when it loads correctly:

This happens pretty randomly, and I can usually make it happen after refreshing a few times.

Here's the config for the card:

type: custom:vertical-stack-in-card
cards:
  - type: markdown
    content: <h1>Switches</h1>
  - type: markdown
    content: <h2>Lights</h2>
  - type: markdown
    content: <h3>Main Floor</h3>

Not sure what's going on, and would appreciate some help if you've seen this before.

Unable to rearrange

I am not able to rearrange items in my sidebar or in entities cards list when this theme is enabled. If I change themes, I am able to do it.

Background not working

I'm new to all of this, so fogive me if I'm doing something wrong here - the variable background-image doesn't seem to be working for me. I installed the theme through HACS, and everything in the view does seem to be themed correctly except there is a white background.

I added background: var(--background-image) to the top in Raw Configuration Editor.

If I substitute the variable value itself, e.g: background: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-dark-green.jpg')", then that works and everything looks great.

Background is not loading

Home assistant is not showing the backgrounds ( black background) when the theme is applied

no state change in icons?

just tried this ios theme and must say I like it. Only thing i noticed is that lights/switches (and other devices that have some form of on/off state) don't turn yellow when the are on, the icon I mean. only the switch ticker itself turns blue.

Would love it if the the also had some form on state changes.

eg, i've setup several entity cards with this attribute:
state_color: true
which looks like this with default theme:

Frontend automation does not want to work

Hi!

I've just installed ios-themes. Themes appear in the theme dropdown in the user parameters. Themes are well applied from there.

I then added your frontend automation file. Automations are well listed in my automation list. But when I click on "execute", nothing happens.
I set the entities panel with the theme selector input, aside with dark mode toggle and alternative theme toggle. Every thing is well presented on my lovelace. But when I selected a theme from the drop down list, toggle the dark mode knob or the laternative knob, nothing happens.

Using HA 2021.8.8, User Interface 20210909.0

System Health

version	core-2021.8.8
installation_type	Home Assistant Core
dev	false
hassio	false
docker	false
user	sc-homeassistant
virtualenv	true
python_version	3.8.11
os_name	Linux
os_version	4.4.59+
arch	aarch64
timezone	Europe/Paris

Home Assistant Community Store

GitHub API	ok
Github API Calls Remaining	4951
Installed Version	1.15.2
Stage	running
Available Repositories	877
Installed Repositories	4

Home Assistant Cloud

logged_in	false
can_reach_cert_server	ok
can_reach_cloud_auth	ok
can_reach_cloud	ok

Lovelace

dashboards	2
resources	2
error	/volume1/@appstore/homeassistant/var/config/ui-lovelace.yaml not found
views	2
mode	storage

Fails to install with HACS

I'm running HA 2022.4.1 on HAOS 7.6 and using HACS 1.24.3/20220401183545. When I try to install, the blue spinner button spins for some time, but eventually the dialog disappears and the theme does not appear. All I can see under /config/themes/ios-themes are a couple of background jpg files.

Make transparency of cards blurry

Hi, cards in Apple's Home app are making the background (very) blurry, which greatly enhances read-ability of the text on the card. Is that something that can be set already in the theme or added as a future feature?

Dark mode not sticking

Using your automation to switch dark mode on but regularly find it has reset itself, them works perfectly otherwise thank you. Can't find any consistent circumstances for when it happens and it's the same on all devices.

Any ideas or have I just missed something obvious?

How do you change the background color of HA?

No matter what I set for app-header-background-color, the bottom-most layer color (44, 44, 46) is affecting the header color.
For example, if I set the app-header-background-color to rgba(0, 0, 0, 0) which is fully transparent, it still isn't transparent because of HA's default background color which is (44, 44, 46).

Please see the following:

Text color on History Graph

Not sure if this is where I post this, but I love the themes but on History Graph I can't see the graph text. Is there a way to edit this?

The views tabs at the top do not use the theme

Perhaps I am missing something, I'm relatively new to lovelace dashboards but it does not appear the views tabs use the theme like I see in the screenshots. I do use kiosk mode with the following settings:

kiosk_mode:
  user_settings:
    - users:
        - user1
        - user2
      hide_sidebar: true
      hide_overflow: true
      ignore_entity_settings: true

Could that be preventing the tabs from displaying? Is there anything that can be done to make the views tabs use that view?

After latest update I'm not seeing a color change to indicate if a button is on or off.

It used to change the icon to yellow if something was on, now it doesn't change color to show the status.

i get errors copied your instructions

i copy and pasted
frontend:
... # your configuration.
themes: !include_dir_merge_named themes
... # your configuration.

in the configuration.yami
i do a reboot and i get
safe mode
it doesnt like the code something wrong.. how do i get this to work
i still new so instructions have to be for someone thats never used home assistant and trying to learn it
as i dont understand half of the stuff
i just wanna be able to change the background color.. and its like you gotta do hoops and hurdles just to change a color from white or add a picture

Feature Request: Card padding

Hi,

Thanks for this, its awesome.

I would love to see padding intruced to move the cards away from the edge of the screen in panel mode, would just finish it off lovely.

cheers

alternate theme?

Hi, I installed the lovelace ios Themes from HACS and I followed your guide on Github to add also the automation (basnijholt/home-assistant-config/automations/frontend.yaml), but I can't see differences beetwen "regular" and "-alternate" themes. Nothing seems to change.

Calendar Card ugly Day

Hey there,
the calendar card has some hard white (or grey in dark themes) day rows. Can you change them so that they fit nicely?

greetz

sidebar color doesnt change

Using the theme pack installed using hacs.
I have the problem that no matter which theme is loaded, the sidebar remains white all the time. Is there already a suggested solution here?
Image

check out kibibit/kb-frosted-cards

https://github.com/kibibit/kb-frosted-cards

Problem after upgrade to 2022.3.X with black letters on black backround

After the upgrade to new version black background with black letters make reading very difficult. There are more than the ones attached.

What card do you use for the lights with the scrollbars in the first screenshot?

Sorry, I know its not an issue but I didn't know how else to ask. And if you answer, can you tell me what, guest mode and vacation mode do? I'm curious.

Thanks and sorry again!

Compatibility with Home Assistant 2022.11.0

Home Assistant 2022.11.0 adds borders around every card which looks terrible, especially with a nice theme like this.

Could we remove them? Thank you!

Inconsistent transparency in the same card.

Hi!

First, thank you for the theme.
I've been using it for a few months but there's something my OCD cannot stand.

Is there a way I can fix it?

Here's one of the affected cards, in case it helps:

cards:
  - entity: weather.aemet
    type: weather-forecast
  - type: 'custom:fold-entity-row'
    head:
      type: section
      label: Terraza
    entities:
      - entity: sensor.mibt_temperature
        name: Temperatura Terraza
      - entity: sensor.mibt_humidity
        name: Humedad Terraza
      - entity: sensor.salon_pressure
        name: Presión Terraza
type: 'custom:vertical-stack-in-card'

Thanks in advance =)

with that new version of HA (2022.3.0) the entry fields are no longer correct. they are now white

with that new version of HA (2022.3.0) the entry fields are no longer correct. they are now white

the phone changes the color of the curtain and basement

the phone changes the color of the curtain and basement

How to fix it?

Light and switch status no longer works

Hi,

Great theme and thanks.

Since the most recent HA update, lights and switches no longer show the correct colour (formally yellow).

HA version 2023.2.1

All dark themes have an orange header

No matter what dark theme I change the theme to all the headers are orange. In the map, overview, settings, etc. This is the ios-dark-mode-light-blue:

Im using home assistant 0.105.3

all the links and icons are orange too for all themes

[IDEA] Extreme Performance increase by replacing backgrounds

Hy,

i was trying to use the theme pack with my slow Android Tablet (Galaxy Tab A7 Lite) and all themes with a background image has made it unusable.
I found out that switching from a background image to a linear gradient background drastically increased the performance of the dashboards.

Here is the improved code for a red-blue-purple background, replacing the background-image:

  background: linear-gradient(30deg,var(--gradient-bottom),var(--gradient-mid),var(--gradient-top))
  lovelace-background: var(--background)
  gradient-top: "#360128"
  gradient-mid: "#0e0b44"
  gradient-bottom: "#3c0000"

code colors

https://community.home-assistant.io/t/0-115-b-day-release-media-browser-tags-automations-wth/227518/18

stuck on install

So i have HACs installed and this ios-themes under Frontends in HACs.

I am on the step to edit the lovelace-ui.yaml.

I cannot find the "RAW" editor. Or the location of this file...

I have "file editor" installed, but i also cannot find the lovelace-ui.yaml file.

I am kind of lost if i can get some help.

Cards

Hi, I'm pretty new to this topic.

I've installed the theme and can select it. How do I get all the cards as displayed in the screenshots?
Like the Theme and Dark Mode switch? The square temperature card and so on?

Is it something I have to construct by myself? Is there any documentation about this?

Thanks