basnijholt / lovelace-ios-dark-mode-theme Goto Github PK
View Code? Open in Web Editor NEW🏠🤖 Theme by @basnijholt based on iOS Dark Mode for Lovelace Home Assistant
License: MIT License
🏠🤖 Theme by @basnijholt based on iOS Dark Mode for Lovelace Home Assistant
License: MIT License
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.
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
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
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 ;-)
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)?
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?
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
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
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?
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)"
Followed the steps on installation and used HACS to install but still unable to see the background image. Same for manual installation
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 followed what is wrote but doesn't work, the background image is the same.
i tried with the green image.
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!
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.
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.
Light bulbs in Glance cards don't change colour when turned on . Solid white in both on and off state
Hi there,
I am not able to create an automation to switch the theme after boot. Please help...
Regards
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.
Hello,
switches in Horizontal stack are white even they are On. How can I fix it?
Thank you.
Hi
When i add a new view bg color dosen´t follow ? How to add this. Works flawless in the first view
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
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
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.
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 }}'
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 ;)
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
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?
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
Hi,
redefine label-badge-red on the theme change red color also for gauge card.
Thanks
Alessandro
for the orange top bar
Please add this code to your theme to make icon of entities display active/off status.
paper-item-icon-active-color: "#F9C536"
Hi,
you make a very good job, the only thing I didn't understand is how to change the background.
Thanks
Alessandro
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?
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.
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.....
Using this theme, lines on the sensor card are not visible.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.