basnijholt / lovelace-ios-themes Goto Github PK
View Code? Open in Web Editor NEW❤️📱🏠🤖 Themes inspired by iOS Dark ⬛️ and Light ◻️ Mode for Lovelace Home Assistant with different backgrounds
License: MIT License
❤️📱🏠🤖 Themes inspired by iOS Dark ⬛️ and Light ◻️ Mode for Lovelace Home Assistant with different backgrounds
License: MIT License
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.
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
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?
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.
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
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
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.
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?
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
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 |
GitHub API | ok |
---|---|
Github API Calls Remaining | 4951 |
Installed Version | 1.15.2 |
Stage | running |
Available Repositories | 877 |
Installed Repositories | 4 |
logged_in | false |
---|---|
can_reach_cert_server | ok |
can_reach_cloud_auth | ok |
can_reach_cloud | ok |
dashboards | 2 |
---|---|
resources | 2 |
error | /volume1/@appstore/homeassistant/var/config/ui-lovelace.yaml not found |
views | 2 |
mode | storage |
(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))
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 =)
After the upgrade to new version black background with black letters make reading very difficult. There are more than the ones attached.
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.
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.
theme not work with hassio 0.117
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
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
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?
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:
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 ?
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"
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"
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.
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...
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.
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
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!
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"
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.
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.
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).
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.
It used to change the icon to yellow if something was on, now it doesn't change color to show the status.
Theme wont load anymore since the latest update.
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;
}
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?
deleted
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?
Home assistant is not showing the backgrounds ( black background) when the theme is applied
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.