Fix background `theme-color` on iOS Themes
phairplay opened this issue · 6 comments
Hi,
I've just come across your great card. I'm slowly moving away from hue hub and moving all my lights to Z2M and this really helps keep my wife happy :) .
I noticed you allow us to have the offColor to be the HA theme, would it be possible to have an option for it to use a custom theme you maybe using?
Thank you for kind words.
You mean set custom theme just for single card?
Like this theme
setting? Entity card - 'theme' option
it was more of visually looking like all the other cards when off, as I really do like the colour changing when on.
here are my current downstairs lights
and here are the ones using your card. is it possible have them look the same when off.
as you can see in the Landing card, using theme-color doesn't use my theme
I hope this makes sense
What theme are you using?
I can look into what's causing it to not use the background from your theme.
Are you using this values in settings?:
...
offColor: theme-color
hueScreenBgColor: theme-color
disableOffShadow: true
hueBorders: false
...
The option theme-color
should cause it to use the background color from your theme.
thank you I appericate the support
I have two themes I use day n Night
Day Theme
##########Day Time Theme##########
ios-dark-mode-light-blue-alternative:
# Global
background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-light-blue.jpg')"
lovelace-background: var(--background-image)
primary-color: "#ff9f09" # from Apple systemOrange dark mode
light-primary-color: "#B6B6C1" # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX)
primary-background-color: "#2c2c2e" # systemGray5 dark mode
secondary-background-color: rgba(25, 25, 25, 0.9)
divider-color: "#98989d" # from Apple systemGray dark mode
accent-color: rgba(255, 159, 9, 1)
# Text
primary-text-color: "#FFF"
secondary-text-color: "#d3d3d3"
text-primary-color: "#FFF"
disabled-text-color: "#555" # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
text-dark-color: "#FFF"
# Sidebar Menu
sidebar-background-color: var(--primary-background-color)
sidebar-icon-color: var(--light-primary-color)
sidebar-text-color: "#F1F1F1"
sidebar-selected-background-color: var(--primary-background-color)
sidebar-selected-icon-color: "#FFF" # (light: systemGray5 from iOS light mode, dark: XXX)
sidebar-selected-text-color: var(--sidebar-selected-icon-color)
# States and Badges
state-icon-color: "#FFF"
state-icon-active-color: "#FFF" # or make light icons yellow when active: rgba(255, 214, 10, 1)
state-icon-unavailable-color: var(--disabled-text-color)
paper-item-icon-active-color: "#FFF" # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30
# Sliders
paper-slider-knob-color: "#FFF"
paper-slider-knob-start-color: var(--paper-slider-knob-color)
paper-slider-pin-color: var(--paper-slider-knob-color)
paper-slider-active-color: "#0984ff" # from Apple systemBlue dark mode
paper-slider-secondary-color: var(--paper-slider-knob-color)
paper-slider-container-color: rgba(255, 255, 255, 0.5)
paper-slider-font-color: "#000"
ha-slider-background: none !important
# Labels
label-badge-background-color: "#23232E"
label-badge-text-color: "#F1F1F1"
label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode
# Cards
card-background-color: var(--secondary-background-color) # Unused entities table background
paper-listbox-background-color: var(--primary-background-color)
ha-card-border-radius: 20px
ha-card-background: rgba(10, 10, 10, 0.4)
paper-card-background-color: var(--ha-card-background)
# Toggles
paper-toggle-button-checked-button-color: "#484848"
paper-toggle-button-checked-bar-color: "#484848"
paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
# Table row
table-row-background-color: var(--primary-background-color)
table-row-alternative-background-color: var(--secondary-background-color)
# Switches
switch-checked-color: "#30d257" # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode
switch-checked-button-color: "#FFF"
# Other
paper-dialog-background-color: rgba(55, 55, 55, 0.8) # e.g., background of more-info
paper-item-icon-color: white # also should mini-media-player icon white (but doesn't work by itself)
more-info-header-background: rgba(25, 25, 25, 0.5)
lumo-body-text-color: var(--primary-text-color) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42
app-header-background-color: rgba(1, 133, 162, 0.4)
markdown-code-background-color: "#464646"
code-editor-background-color: "#161616"
# Custom
mcg-title-letter-spacing: .15em
mini-media-player-base-color: white
mini-media-player-icon-color: white
#new addition
input-ink-color: var(--primary-text-color)
input-label-ink-color: var(--secondary-text-color)
input-disabled-ink-color: var(--secondary-text-color)
input-fill-color: rgba(0, 0, 0, 0)
input-dropdown-icon-color: var(--primary-text-color)
input-idle-line-color: var(--secondary-text-color)
input-hover-line-color: var(--primary-text-color)
Night Theme
##########Night time Theme##########
ios-dark-mode-blue-red-alternative:
# Global
background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-blue-red.jpg')"
lovelace-background: var(--background-image)
primary-color: "#ff9f09" # from Apple systemOrange dark mode
light-primary-color: "#B6B6C1" # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX)
primary-background-color: "#2c2c2e" # systemGray5 dark mode
secondary-background-color: rgba(25, 25, 25, 0.9)
divider-color: "#98989d" # from Apple systemGray dark mode
accent-color: rgba(255, 159, 9, 1)
# Text
primary-text-color: "#FFF"
secondary-text-color: "#d3d3d3"
text-primary-color: "#FFF"
disabled-text-color: "#555" # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
text-dark-color: "#FFF"
# Sidebar Menu
sidebar-background-color: var(--primary-background-color)
sidebar-icon-color: var(--light-primary-color)
sidebar-text-color: "#F1F1F1"
sidebar-selected-background-color: var(--primary-background-color)
sidebar-selected-icon-color: "#FFF" # (light: systemGray5 from iOS light mode, dark: XXX)
sidebar-selected-text-color: var(--sidebar-selected-icon-color)
# States and Badges
state-icon-color: "#FFF"
state-icon-active-color: "#FFF" # or make light icons yellow when active: rgba(255, 214, 10, 1)
state-icon-unavailable-color: var(--disabled-text-color)
paper-item-icon-active-color: "#FFF" # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30
# Sliders
paper-slider-knob-color: "#FFF"
paper-slider-knob-start-color: var(--paper-slider-knob-color)
paper-slider-pin-color: var(--paper-slider-knob-color)
paper-slider-active-color: "#0984ff" # from Apple systemBlue dark mode
paper-slider-secondary-color: var(--paper-slider-knob-color)
paper-slider-container-color: rgba(255, 255, 255, 0.5)
paper-slider-font-color: "#000"
ha-slider-background: none !important
# Labels
label-badge-background-color: "#23232E"
label-badge-text-color: "#F1F1F1"
label-badge-red: rgba(255, 159, 9, 0.7) # from Apple systemOrange dark mode
# Cards
card-background-color: var(--secondary-background-color) # Unused entities table background
paper-listbox-background-color: var(--primary-background-color)
ha-card-border-radius: 20px
ha-card-background: rgba(10, 10, 10, 0.4)
paper-card-background-color: var(--ha-card-background)
# Toggles
paper-toggle-button-checked-button-color: "#484848"
paper-toggle-button-checked-bar-color: "#484848"
paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
# Table row
table-row-background-color: var(--primary-background-color)
table-row-alternative-background-color: var(--secondary-background-color)
# Switches
switch-checked-color: "#30d257" # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode
switch-checked-button-color: "#FFF"
# Other
paper-dialog-background-color: rgba(55, 55, 55, 0.8) # e.g., background of more-info
paper-item-icon-color: white # also should mini-media-player icon white (but doesn't work by itself)
more-info-header-background: rgba(25, 25, 25, 0.5)
lumo-body-text-color: var(--primary-text-color) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42
app-header-background-color: rgba(63, 36, 75, 0.4)
markdown-code-background-color: "#464646"
code-editor-background-color: "#161616"
# Custom
mcg-title-letter-spacing: .15em
mini-media-player-base-color: white
mini-media-player-icon-color: white
input-ink-color: var(--primary-text-color)
input-label-ink-color: var(--secondary-text-color)
input-disabled-ink-color: var(--secondary-text-color)
input-fill-color: rgba(0, 0, 0, 0)
input-dropdown-icon-color: var(--primary-text-color)
input-idle-line-color: var(--secondary-text-color)
input-hover-line-color: var(--primary-text-color)
both are structured the same
Please try installing New Release - v1.2.1 and let me know if the problem still occurs.
I made some changes in handling theme colors, so i think, this may be fixed now.
Hi,
No it's not changed anything
I'm using
offColor: theme-color