Fix background `theme-color` on iOS Themes

[phairplay]

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?

[Gh61]

Thank you for kind words.

You mean set custom theme just for single card? Like this theme setting? Entity card - 'theme' option

[phairplay]

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

[Gh61]

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.

[phairplay]

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

[Gh61]

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.

[phairplay]

Hi, No it's not changed anything I'm using offColor: theme-color