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

deviantintegral · May 4, 2023, 2:15am

I tried this theme out for the first time today. First off, this is clearly a ton of work, especially with all of the variants! It makes for a great demo if you build the dashboard with this theme in mind.

However, when applying to real-world dashboards, I noticed a few other legibility issues with the theme that prevent me from using it.

You can’t read names of entity badges in many of the themes. You can see the issue in this screenshot: https://raw.githubusercontent.com/basnijholt/lovelace-ios-themes/media/screenshots/blue-red-light.png
The general header also has contrast issues in many themes.
The “unlock” text for lock entities also is difficult to read.
The semi-transparent entity dialogs are a challenge too: Make transparency of cards blurry · Issue #49 · basnijholt/lovelace-ios-themes · GitHub
Off entity switches have very low contrast against the background cards.

Plus the tile issue reported above:

Improving the above is a lot of work, especially if it was done comprehensively across the theme. Is there any interest in improving this? While from a strict accessibility standpoint these are all issues, given this is not the core theme if users or @basnijholt like the way it is then I think it would be fine to leave it as an aesthetic choice.

SgtBatten · May 4, 2023, 3:39am

I’m fairly sure that HA did a significant revamp of the frontend code which is wat caused all the themes to “break” some time ago. They introduced a large number of new variables, likely these need to be set to improve the legibility issues

maddin84 · July 27, 2023, 9:57am

Hey,

how can I change the color of the icons (Shutter)?

This purple color doesn’t match with the other system colors of this beautiful theme.

Starf1x · August 21, 2023, 1:55pm

Small question, I implemented it Via HACS, added the line in the Raw editor, and the background changes ideally.

But, I do not have the option to change them in my profile to “Backend-selected”.
It doesn’t exist in the list of Themes.

Is there something I can do to fix this?

Vib1240n · August 26, 2023, 8:18am

Hey,

So I do really like the examples you have on your repo but I don’t know what I did wrong. I installed HACS and installed the IOS Dark and light theme. I have the themes directory in my config folder and inside ./config/themes/ios-themes I have all the background images and just a ios-themes.yaml file. I have this line added in my ios-themes.yaml file
background-image: "center / cover no-repeat fixed url('/config/themes/ios-themes/homekit-bg-dark-green.jpg')"

and I went in my dashboard and using RAW UI editor I added the background: var(--background-image)
but the background doesn’t how up. Is there something that I’m missing? I dont know if you have to enable “lovelace ui” anywhere or not.

gravelfreeman · September 19, 2023, 3:30pm

Hello, I don’t know if you’re still replying to messages but I’d like to use custom colors, basically I want to use your theme but change the different accent colors with the dracula colors. Is there any way to achieve some kind of customization to your theme without losing the updates?

Thank you!

marcel.zelman · September 21, 2023, 2:16pm

Good day
I want to get advice about the theme, after some update it stopped showing the background, could anyone tell me how to set it?

GTSMD · September 30, 2023, 4:27pm

All - brand new to HA. I also cant get the lovely backgrounds to show. Can change themes, just no backgrounds. All help appreciated. Thank you. xoxox

witno · October 4, 2023, 8:42pm

Been using this beautifull theme for one and a half year. After the last Hacks upgrade, background image don’t show.
Any ideas?

stemiele · October 7, 2023, 3:45pm

Same problem with the background.
It works with the old “IOS Dark-Mode theme” but with the new “iOS Dark and Light Mode” no background appears.

Manen123 · November 13, 2023, 4:24pm

For me the Same Problem, it does‘nt wir in the iOS Companion App.

phelan · November 15, 2023, 1:47pm

Hi all,

I had the same issue, and this is how i managed to fix it for my instance:

Create an images folder in your www folder. So config/www/images
Open up your HA Terminal
Navigate to /config/themes/ios-themes
Copy all background jpgs into config/www/images
Open up the ios-themes.yaml and update all references to the image files to the new path, so e.g:

(‘/hacsfiles/themes/ios-themes/homekit-bg-dark-green.jpg’)
(‘/local/images//homekit-bg-dark-green.jpg’)

Do this for all the paths you can find, i believe it’s 26 or 28 or something.

Important: reload YAML files

This fixed it for me, i can se all the backgrounds when i select the various IOS themes in my dashboard

Manen123 · November 16, 2023, 12:47pm

I have tried this, but it does‘nt work for me. On my Android Tablett World only the orange background, nothing else. This is how it Looks on my iPhone with the iOS Companion App.
Any solutions?

Matt_Barnes · November 22, 2023, 5:42pm

Hello.

Just getting back into HA after a while out and wanted to change the look of my frontend but run into problems.

I am currently using “transparent” theme
I have this in my configuration file:

frontend:
  themes: !include themes.yaml

I was going to try and use the iOS theme so have downloaded it through HACS

and the instructions say add this:

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

I do this (I actually put this in my config:)

frontend:
  themes: !include_dir_merge_named themes

But when I then try and restart I get the below but that blows my mind I am afraid!

The system cannot restart because the configuration is not valid: Invalid config for [frontend]: expected a dictionary for dictionary value @ data['frontend']['themes']['--banner-card-heading-size']. Got '1em' expected a dictionary for dictionary value @ data['frontend']['themes']['accent-color']. Got '#FFFFFF' expected a dictionary for dictionary value @ data['frontend']['themes']['card-background-color']. Got 'var(--paper-card-background-color)' expected a dictionary for dictionary value @ data['frontend']['themes']['card-mod-more-info-yaml']. Got '$: |\n .mdc-dialog {\n background: none;\n }\n .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {\n background: rgba(58, 79, 82,1); \n }\n' expected a dictionary for dictionary value @ data['frontend']['themes']['card-mod-theme']. Got 'Transparent' expected a dictionary for dictionary value @ data['frontend']['themes']['cch-background']. Got 'rgba(150, 150, 150, 0.1)' expected a dictionary for dictionary value @ data['frontend']['themes']['custom_header-background']. Got 'rgba(150, 150, 150, 0.1)' expected a dictionary for dictionary value @ data['frontend']['themes']['dark-primary-color']. Got 'var(--accent-color)' expected a dictionary for dictionary value @ data['frontend']['themes']['disabled-text-color']. Got '#7F848E' expected a dictionary for dictionary value @ data['frontend']['themes']['divider-color']. Got 'rgba(0, 0, 0, 1)' expected a dictionary for dictionary value @ data['frontend']['themes']['google-green-500']. Got '#39E949' expected a dictionary for dictionary value @ data['frontend']['themes']['google-red-500']. Got '#E45E65' expected a dictionary for dictionary value @ data['frontend']['themes']['ha-card-background']. Got 'rgba(150, 150, 150, 0.1)' expected a dictionary for dictionary value @ data['frontend']['themes']['ha-card-border-radius']. Got '20px' expected a dictionary for dictionary value @ data['frontend']['themes']['label-badge-background']. Got 'rgba(255, 255, 255, 0.1)' expected a dictionary for dictionary value @ data['frontend']['themes']['label-badge-background-color']. Got '#cae2fe' expected a dictionary for dictionary value @ data['frontend']['themes']['label-badge-border-color']. Got 'green' expected a dictionary for dictionary value @ data['frontend']['themes']['label-badge-red']. Got 'var(--accent-color)' expected a dictionary for dictionary value @ data['frontend']['themes']['label-badge-text-color']. Got '#cae2fe' expected a dictionary for dictionary value @ data['frontend']['themes']['light-primary-color']. Got 'var(--accent-color)' expected a dictionary for dictionary value @ data['frontend']['themes']['mini-media-player-base-color']. Got '#cae2fe' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-card-background-color']. Got 'rgba(58, 79, 82,1)' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-card-header-color']. Got '#FFFFFF' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-dialog-background-color']. Got '#434954' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-grey-200']. Got '#414A59' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-grey-50']. Got 'var(--primary-text-color)' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-input-container-color']. Got '#9eb2c9' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-input-label']. Got '#cae2fe' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-item-icon-active-color']. Got '#F9C536' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-item-icon-color']. Got 'var(--primary-text-color)' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-item-icon_-_color']. Got 'green' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-item-selected_-_background-color']. Got '#434954' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-listbox-color']. Got '#cae2fe' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-slider-active-color']. Got 'var(--accent-color)' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-slider-container-color']. Got 'linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-slider-disabled-active-color']. Got 'var(--disabled-text-color)' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-slider-disabled-secondary-color']. Got 'var(--disabled-text-color)' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-slider-knob-color']. Got 'var(--accent-color)' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-slider-knob-start-color']. Got 'var(--accent-color)' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-slider-pin-color']. Got '#434954' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-slider-secondary-color']. Got 'var(--secondary-background-color)' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-tabs-selection-bar-color']. Got 'green' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-toggle-button-checked-bar-color']. Got 'var(--accent-color)' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-toggle-button-checked-button-color']. Got 'var(--accent-color)' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-toggle-button-checked-ink-color']. Got 'var(--accent-color)' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-toggle-button-unchecked-bar-color']. Got 'var(--disabled-text-color)' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-toggle-button-unchecked-button-color']. Got 'var(--disabled-text-color)' expected a dictionary for dictionary value @ data['frontend']['themes']['paper-toggle-button-unchecked-ink-color']. Got 'var(--disabled-text-color)' expected a dictionary for dictionary value @ data['frontend']['themes']['primary-background-color']. Got '#383C45' expected a dictionary for dictionary value @ data['frontend']['themes']['primary-color']. Got '#5294E2' expected a dictionary for dictionary value @ data['frontend']['themes']['primary-text-color']. Got '#FFFFFF' expected a dictionary for dictionary value @ data['frontend']['themes']['secondary-background-color']. Got '#383C45' expected a dictionary for dictionary value @ data['frontend']['themes']['secondary-text-color']. Got '#cae2fe' expected a dictionary for dictionary value @ data['frontend']['themes']['sidebar-background-color']. Got '#383C45' expected a dictionary for dictionary value @ data['frontend']['themes']['table-row-alternative-background-color']. Got '#3E424B' expected a dictionary for dictionary value @ data['frontend']['themes']['table-row-background-color']. Got '#353840' expected a dictionary for dictionary value @ data['frontend']['themes']['text-primary-color']. Got 'var(--primary-text-color)'. (See /config/configuration.yaml, line 22).

j0na553n · June 21, 2024, 6:07am

Hi, i have a Problem with the Background.

I have added the Background image via RAW Editor to my Home Dashboard

But i do not get the Background picutre running. I also have changed the theme in my profile tab.

The Theme is installed via HACS.

Is there somebody who can tell my what is my mistake and what should i do to get get it work?

Kind regards

inseljohn · August 9, 2024, 8:41am

I have the same error

titis14 · August 22, 2024, 7:58pm

Hello everyone,
Following the HA update I have the same thing, I no longer have a blue wallpaper.

titis14 · August 22, 2024, 8:15pm

It has come back in the meantime, probably a cache problem.

DE5013 · September 7, 2024, 11:13pm

Ditto. Everything was working fine with the iOS-dark-mode-blue-red-alternative theme…until I upgraded to the latest version today, then everything went plain black.

I’ll reboot HA to see if it truly was a caching issue, but I did start and stop the HA application and the symptoms remained the same.

Update:

Not a cache issue. It was still there after reboot. I had to change the theme to “iOS-dark-red-blue” to get a similar background, but that seemed to break the following code, which is in all my entity cards on my home page:

    card_mod:
      style: |
        ha-card {
          background-color: transparent;
          border-radius: 20px;
          margin: 0px 0px 0px 0px;
          text-align: left;
          border: solid 1px grey;
          }
        ha-card .card-header {
          display: unset;
          text-align: center;
          font-size: 25px;
          }

This is what it used to look like:

and after the upgrade, I get this

Note the ugly square corners, the lack of thing grey line outlining each section and the background are not truly transparent.

basnijholt · September 8, 2024, 12:25am

The problem with CSS I cannot explain because nothing has changed except the background location. If you check the release notes, you would read that the alternative theme now expects the backgrounds to be stored locally while the normal version downloads them from GitHub.

Perhaps you also upgraded HACS to v2?