basnijholt / lovelace-ios-dark-mode-theme Goto Github PK

Hi there,

this is my video guide/tutorial - https://youtu.be/4cOdgW23KCA
If you think that the video is helpful you can put it somewhere in the README.md
Or I if it's easier for you I can do that and create a Pull request

Either way keep up the good work.
Cheers,
Kiril

I have HassIO verstion 0.109.2 and it is hard to read the text in the "Update Available" notification says.

Dear all,

I really love this theme.
I switched to the new original media player (not mini-custom)
I like the look when something is playing.
Problem is, when in idle the player shows orange.
Is there a way to change this?

for the orange top bar

Good morning, just discovered these themes and love them.

One thing I have seen though is I am left with a border (The width of the header / footer) at the bottom of the screen on my 1920x1200 display.

If I enable split mode in Custom Header this goes away as it is filled by the footer (It also goes away if I move the header to the bottom but then can't scroll in certain menus).

Any ideas what I might be doing wrong please?

Followed the steps on installation and used HACS to install but still unable to see the background image. Same for manual installation

It sets the background of

which is good.

But it also sets the Update button of a HACS installed theme to this color when unavailable:

Does anyone know how to change the color in css for a paper-button disabled, like this one (the grey text indicated by the arrow) I found thes issues: PolymerElements/paper-icon-button#74 and Polymer/polymer#3205 and I am not sure if it is related. It's for my theme: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/tree/master/backgrounds

I use vertical-stack-in-card to join glance and entities cards. Your theme colors are wrong with that configuration. There is difference between title background color and card background color. And the color of the gap between glance and entities card is wrong.

         - type: custom:vertical-stack-in-card
            title: "Sypialnia"
            cards:
              - type: glance
                show_name: false
                entities:
                  - sensor.temperature_sypialnia
                  - sensor.humidity_sypialnia
                  - sensor.illumination_sypialnia
              - type: entities
                style: |
                  .card-content {
                    padding-top: 0px;
                  }
                show_header_toggle: false
                entities:
                  - binary_sensor.window_sypialnia
                  - binary_sensor.balcony_door_sypialnia
                  - entity: binary_sensor.motion_sypialnia
                    secondary_info: last-changed
                  - climate.thermostat_sypialnia
                  - light.lightstrip_sypialnia
                  - switch.christmas_lights_sypialnia

I'm by no means proficient in any of this, but if it is possible, having HACS handle background images separate from themes would be ideal.

Hi,

Just wanted to check if there will be a fix for entity buttons changing colour? When in default theme they change from blue to yellow for when they are on, however, in the iOS theme, they just stay white.

WIll there be an update to make them change colour?

I created two cards to demonstrate, one with switches and one with the entity button. The switch shows on, but the entity isn't changing colour

By the way, this is my favourite theme and looks great on a tablet.

I chose homekit-bg-4.css-base64 https://gist.github.com/basnijholt/8bd2954969a75ca2e4a70d27e38418e4

as the background. I wish this didn't change every time I update.

Get the following error:

Error executing query: (MySQLdb._exceptions.DataError) (1406, "Data too long for column 'event_data' at row 1") [SQL: INSERT INTO events (event_type, event_data, origin, time_fired, created, context_id, context_user_id) VALUES (%s, %s, %s, %s, %s, %s, %s)] [parameters: ('themes_updated', '{"themes": {"ios-dark-mode": {"background-image": "center / cover no-repeat fixed url(\'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZg ... (556738 characters truncated) ... -font-display3_-_font-weight": "500", "mini-media-player-base-color": "white", "mini-media-player-icon-color": "white"}}, "default_theme": "default"}', 'LOCAL', datetime.datetime(2019, 11, 19, 21, 27, 13, 58131, tzinfo=<UTC>), datetime.datetime(2019, 11, 19, 21, 29, 16, 933604), 'e823a74ee94e4ad68236cbe4e5c43f6f', None)] (Background on this error at: http://sqlalche.me/e/9h9h)

Looks like the background image is encoded as text.

Hi,
redefine label-badge-red on the theme change red color also for gauge card.

Thanks
Alessandro

Using this theme, lines on the sensor card are not visible.

Hi,

Amazing theme! Everything works as it should except the custom backgrounds feature, I can't get any of the 4 to load. I'm following this method: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/tree/master/backgrounds

Getting this error in Home Assistant:

Error loading /config/configuration.yaml: while parsing a block mapping
  in "/config/themes/ios-dark-mode.yaml", line 7, column 3
expected <block end>, but found '<scalar>'
  in "/config/themes/ios-dark-mode.yaml", line 7, column 76143

Hello,
I'd like to raise an issue with colours of History Card. The grid and device labels are very dark almost unreadable (marked on screenshots below).
Can you update them to some bright colours?

Regards,

I followed what is wrote but doesn't work, the background image is the same.
i tried with the green image.

Hi, i changed background from default to homekit-bg-4.css-base64 in ios-dark-mode.yaml, but home assistant keep default background, I cleaned the cache and reloaded the page but nothing.

Hi,
I have changed primary color but, on Android, if I add the Chrome Page on Home screen I have an orange bar at the top.
Do you know how I can change it ?

Thanks

Since cch was replaced with Custom Header, step 4 needs to be updated from cch to custom_header.

Edit, clock didn't work either so I have updated code to fix.

Change

cch:
  background: rgba(155, 155, 155, 0.25)
  clock_format: 24
  options: clock
  swipe_animate: fade
  swipe_prevent_default: true

to

custom_header:
  background: 'rgba(155, 155, 155, 0.25)'
  swipe_animate: fade
  swipe_prevent_default: true
  compact_mode: true
  button_text:
    options: '{{ hours12 }}:{{ minutesLZ }}'

The theme looks great and works as advertised when connected locally, but over the remote ui (nabu casa) connection it doesn’t show. Is this maybe because of directory permissions?

Hi,
I have Home Assistant 0.107.6 with your plugin installed via HACS:

and I obtained this result:

but I'm not able to obtain result reported on your wiki:

how I can do it?

Please add this code to your theme to make icon of entities display active/off status.
paper-item-icon-active-color: "#F9C536"

Light bulbs in Glance cards don't change colour when turned on . Solid white in both on and off state

hi

it seems I am not able to locate this theme in HACS - community store's plugins section search on "ios" does not yield any results. have you removed the integration?

regards,
Pavel

Hi there,

I am not able to create an automation to switch the theme after boot. Please help...

Regards

Hi
When i add a new view bg color dosen´t follow ? How to add this. Works flawless in the first view

Within most cards (tested just with light and glance) the icons doesn't change their color to representate their status.

in the default theme a light (who is off) is colored in blueish tint. as activated it turn to yellowish. this does not happen in iosdarkmode - the light icons stays white. espacially in dark mode this behaviour would be very nice.

Love these themes, they look absolutely amazing, but in my opinion the opacity is too much and clashes sometimes. When I open up an entity for finer control (for example, I click on a light entity's icon to see the pop-up menu, so I can change brightness), the text regularly clashes with the background and it's hard to read sometimes.

The fix is super simple: just a little bit less opacity would fix it. But since I installed this through HACS, I feel like if I manually change these, it'll get reset the next time an update comes out for these themes.

Is there a way to toggle a global opacity for all your themes (which are great) so that it won't be reset in future updates?

Hello,
switches in Horizontal stack are white even they are On. How can I fix it?

Thank you.

Anybody had any luck with overriding these? or is it due to it being an SVG?
If it's the SVG, can we replace the SVG somehow?

Margins should look more like this but that is with me changing the root > * manually in dev tools.

Please add this code to your theme to make “show entries for” and “period” text in log and history panels match theme primary text colour.

lumo-body-text-color: "var(--primary-text-color)"

I want to change the background from green to homekit-bg-4.css-base64.
In the readme it says replace the line but im unsure of which part of the line im supposed to replace. Havent figured it out yet, can you clairfy for me? Love the theme

I have noticed in the Supervisor tab there is black text & icon on a dark background making it hard to read. Not sure if it is also in other locations.

eg: the text displaying which version is available in the below screenshot, also the icon

This might be a personal flavour but I noticed that the app header background color is light gray.

changing the app header background color to the same background color of the sidebar menu looks better in my opinion.

What do you think?

When using default theme, the severity colors are correct.
But in ios dark theme, they don't show the correct colors (12-13 / 13-14 / 18-19 should be red, not orange)

Hi,
great theme, thanks for making it!
I have a question regarding the top bar color on iPhone HA app. Should it be orange as well, or it's not possible change?

Add all 4 background files to them to be able to use them simultaneously on different Lovelace tabs.

Something like this
background-image: "center / cover no-repeat fixed url('data:image/jpeg;base6....
background-image-r: "center / cover no-repeat fixed url('data:image/jpeg;bas....
background-image-g: "center / cover no-repeat fixed url('data:image/jpeg;bas....
background-image-b: "center / cover no-repeat fixed url('data:image/jpeg;bas.....

I modified the settings for state-icon-active-color so that the icons will be yellow when active but i have noticed that this only works for my entities of type = light. Entities of type = switch do not change colors at all. Just as an FYI, I only use lutron caseta light switches. Thanks for all the work, I really like the way this theme looks.

Good morning,

Not really an issue so sorry if there is a better place to ask this.

Is it Possible to get your dark and light themes to work on the Configurator Add-On and also how do I get the hass.io tab as seen in your second Overview screenshot please (It looks great)?

Hi,

I get this message even if I have uninstalled when I try to reinstall:

/config/themes/ios-dark-mode/ios-dark-mode.yaml already exists
Doing this will overwrite it.
Are you sure you want to continue?

Have checked if I still have the file but I'm not. Not a big deal just curious why? Some logs or history need to be deleted?

I'm on Ubuntu 16.04 with HA in Docker container version 108.3

Hey Bas, great theme, love it!!! BUT, after every update the background (my favorite: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/blob/master/backgrounds/homekit-bg-4.jpeg) restores to the original green one. Is there a solution to keep that setting saved after every update?

Gr uit Brabant ;)

Black color on dark grey background is almost not visible.
Needs adjustment please.

Thank you!

According to the theme (and mini-media-player) it should become rounded. However, for some reason this isn't happening for me.

Is there anything specific required to get it rounded?

Is it only for me the background image isn't shown up in the gui? I check the inspect in chrome and the background is there as

--background-image: center / cover no-repeat fixed url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAASABIAAD/4QBMRXhpZgAATU0AKgAAAAgA…48SQAE4dmOH+rAAsbCNgAEbCNgALw49EOHHou4ADhx6PuOHHoABeHYcIAFgJVAAqXjVIAAH//Z);

And if I right-click and "show in new tab" the image is loaded correctly. But Its not shown up in home assistant. Any ideas?

Anyway, a VERY nice them!

The plant-status can contain an image (via customize) However, when it does have an image the top corners aren't rounded (the bottom is).

As a test I've added border-top-left-radius: 20px (and right) to .has-plant-image .banner in the console which makes the borders nicely rounded.

Not sure if this theme can alter this or whether this requires a change in the HASS Frontend to get be able to apply themes to it.

Quickfix via card-mod:

    style: |
      .banner {
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
      }

Would be nice though to be able to do this without other plugins ;-)

Hi, if I use this theme I can't see the text inside the Token box.

How can I solve it?
Thanks

Hi,
you make a very good job, the only thing I didn't understand is how to change the background.

Thanks
Alessandro