iOS Dark Mode Theme

Share your Projects! Themes
83

Hello @basnijholt , I think you made a version of your theme that is the light counterpart to this theme.
Thanks it’s awesome!

My only comment is the user avatar, the letter is very dark.
image

Is there a way to change that text and not text on the rest of the interface?

Thanks again!

84

Struggling with the basics here.

  • I have HACS
  • I’ve installed the theme via HACS
  • Config is updated with this code:
#frontend
frontend:
  themes: !include_dir_merge_named themes
  • I’ve confirmed that the yaml file is present within my config file
  • Background information added via RAW editor

Theme is not changing for me, this is my first attempt at a lovelace theme, so if there are any tips you can throw my way, I’d appreciate it.

86

Did you select the theme by clicking on your initials in the left bottom and then selecting the theme?

1 Like
87

Thanks, that was easy. I spent about a half hour screwing around with it last night. Feel kinda stupid, but really appreciate it!

1 Like
88

Is it possible to change the notification counter color and the script “execute” button colors without changing the primary background color?

21 AM
21 AM1346×654 81.6 KB

91

great theme, thank you.

92

seems the light card is darker then what you guys posted above? see below, the circle for brightness is done, any setting needs to be changed? I’m using background 2.

48 AM

93

Hello @basnijholt!
This is a great piece of work. Thanks for that.
I’ve got a question regarding custom header - while I think it’s great for a desktop mode or tablet - I think it’s not so great anymore for a mobile view.
Basically it shrinks the area of tab names dramatically, so there’s even less visible tabs in a mobile than withthout a Custom Header. I always wanted to maximize this area instead of shrinking it.

Screenshot_20200205_082823
Screenshot_20200205_0828231080×314 36 KB

Do you know if this can be done? I can disable tab shevrons of course, but I still want to have them.
Any ideas here?
Basically the only thing which I like in Custom Header is making the header transparent (if there’s a way for this without Custom Header - I’d appreciate some solution).

Thanks!

94

I installed the theme but I can’t tell if the devices are on or off. I can differentiate if the device is connected or not, but the color does not change if the device is on. Any ideas? Thanks,

1 Like
95

Hi
Same issue for me. I’m using own-hosted version as Home Assistant 0.103.6 (no docker version)
All plugins, lovelace addons are activated by the webUI.
Many changes on some yaml file aren’t used on this version…

So actually, how to use the backgrounds ?

96

Could be that change.

97

Hi,

Can not get the background image to change for the life of me.
The theme enables okay, but no background comes up.

I have background: var(--background-image) at the top of my lovelace config file.
I have installed this through HACS.

I note that the background-image variable in the ios-themes.yaml is looking for the background images here background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-dark-blue.jpg')" but they are located in /config/themes/homekit-bg-dark-blue.jpg

I have restarted a few times no change, have tried incognito mode in chrome as well.

1 Like
98

You need HACS v0.21.2+ for that to work

99

Thank you, upgrading fixed it.

101

Hi, Thank you very much for this very nice theme! :slight_smile:
On this screen what have you used to have the system information? Like CPU temp, Memory usage an so on?
Thank you again!

theme-overview-2
theme-overview-23020×2301 509 KB

P.S. How do you add the “house” icon near the Home tab?

Simone

103

Please could you share with us how to also include the date for the custom header?

Thanks

104

Hi

Just edir the home and under ICON type => mdi:home
icon_home
Also please could you share with me the configuration for the graph about Processor Ussage CPU and Memory?

Thanks

105

To make the heading transparent, you just use and RGBA code in the theme’s .yaml file. here is the code for my exact header. This assumes that you are now using customer header instead of compact custom header.

ch-background: rgba(137, 156, 170, 0.8)

In order to get time and date instead of the menu button in top right, you need to have custom header installed. Then click on the top right ellipsis>configure IU>raw configuration editor. Then under customer header add this code (I have since changed up my date and time display a little):

custom_header:
  button_text:
    options: >-
      {{ hours12 }}:{{ minutesLZ }} {{ ampm }} <br> {{ dayNameShort }}, {{
      monthNameShort }} {{ dayNum }}
106

It´s work!! thanks apreciated :smiley:

107

Hello everyone!

Thank you for this very successful theme.
I have a question, I can’t get the dark sidebar… Should it be automatic?
On the other hand, how to make the other pages of HA be modified too (map, history…)

Thanks to you and take care of yourself !

image
image740×804 64.7 KB