Certain cards not displayed correctly using the view theme

[kaizersoje]

Checklist

• [X] I have updated to the latest available Home Assistant version.
• [X] I have cleared the cache of my browser.
• [X] I have tried a different browser to see if it is related to my browser.

Describe the issue you are experiencing

Since upgrading to 2021.12.x, I have noticed that if a view is set with a different theme, certain cards like entities is being displayed incorrectly where the text is using the color from the theme set for the user profile.

I have set the theme for a view to a dark theme, where the card background is a dark color and the text color is a light one. The theme for the rest of the views is set depending on the state of the sun. The issue occurs when the user profile theme is a light one where the text is dark. So hence the card background as well as the text colors are both dark and the text becomes unreadable.

If I remove the theme for the view, the background color now uses the color from the user theme.

Describe the behavior you expected

All cards should reflect the theme defined in the view that it is defined.

Steps to reproduce the issue

1. Create a view and set it to a dark theme
2. Add an entities or glance card
3. The text and icons in the card ignores the colors from the theme set in the view and uses the theme from the profile. ...

What version of Home Assistant Core has the issue?

2021.12.2

What was the last working version of Home Assistant Core?

2021.11.4

In which browser are you experiencing the issue with?

Chrome Version 96.0.4664.93 (Official Build) (64-bit)

Which operating system are you using to run this browser?

Windows 10 Enterprise 20H2

State of relevant entities

No response

Problem-relevant frontend configuration

No response

Javascript errors shown in your browser console/inspector

No response

Additional information

No response

[idoaflalo]

This problem happens to me too

[idoaflalo]

Please help!

[Sian-Lee-SA]

This is a serious outstanding issue that I can't understand how the bug found it's way into the source code to begin with...

The issue is simply a matter of the cards are now rendering the base theme in their own style attribute's giving it precedence over the view theme! Simply put, this now makes view themes completely irrelevant and redundant.

The cards that don't have a theme set to them should not be rendering a style attribute in the element with the core themes variables. This is also a waste of resource's as it renders the document with many irrelevant style attributes causing a larger download and unneeded processing.

[bramkragten]

Please share the themes used, I am not able to reproduce this.

[idoaflalo]

Please share the themes used, I am not able to reproduce this.

Google - Light:
  ### Fonts ###
  primary-font-family: "'Open Sans','Rubik',Roboto,sans-serif"
  paper-font-common-base_-_font-family: "var(--primary-font-family)"
  paper-font-common-code_-_font-family: "var(--primary-font-family)"
  paper-font-body_-_font-family: "var(--primary-font-family)"
  paper-font-subhead_-_font-family: "var(--primary-font-family)"
  paper-font-headline_-_font-family: "var(--primary-font-family)"
  paper-font-caption_-_font-family: "var(--primary-font-family)"
  paper-font-title_-_font-family: "var(--primary-font-family)"

  ha-card-border-radius: "8px"
  ha-card-header-color: "#757575"
  ha-card-box-shadow: "0px 0px 1px #eeeeee"

  ### Main Interface Colors ###
  app-header-background-color: "#ffffff"
  primary-color: "#000000"
  light-primary-color: "#c1c1c1"
  primary-background-color: "#F7F9FB"
  secondary-background-color: "#ffffff"
  divider-color: "#e7e7e7"
  ### Text ###
  primary-text-color: var(--primary-color)
  secondary-text-color: "#757575"
  text-primary-color: "#061014"
  disabled-text-color: "#a1a1a1"
  ### Sidebar Menu ###
  sidebar-background-color: "#ffffff"
  sidebar-icon-color: "#757575"
  sidebar-text-color: "#212121"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#4284F4"
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  ### States and Badges ###
  state-icon-color: "#606367"
  state-icon-active-color: "#ffb750"
  state-icon-unavailable-color: var(--disabled-text-color)
  ### Sliders ###
  paper-slider-knob-color: "#4284F4"
  paper-slider-knob-start-color: "#8eb8ff"
  paper-slider-pin-color: "#8eb8ff"
  paper-slider-active-color: "#8eb8ff"
  paper-slider-secondary-color: var(--light-primary-color)
  paper-slider-container-color: "#e7e7e7"
  ### Labels ###
  label-badge-background-color: "#252B36"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: "#6C7B9B"
  ### Cards ###
  paper-card-background-color: "#ffffff"
  paper-listbox-background-color: "#ffffff"
  ### Toggles ###
  paper-toggle-button-checked-button-color: "#4284F4"
  paper-toggle-button-checked-bar-color: "#4284F4"
  paper-toggle-button-unchecked-button-color: "#606367"
  paper-toggle-button-unchecked-bar-color: "#c1c1c1"

  ### Dialog ###
  paper-dialog-background-color: "#ffffff"

  ### Table row ###
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)

  iron-overlay-backdrop-background-color: "#ffffff"
  mdc-theme-primary: "#4284F4"
  mdc-theme-on-secondary: "#ffffff"
  mdc-checkbox-ink-color: "#ffffff"
  mdc-checkbox-unchecked-color: "#cacaca"

  switch-checked-color: "var(--paper-toggle-button-checked-button-color)"
  switch-unchecked-button-color: "var(--paper-toggle-button-unchecked-button-color)"
  switch-unchecked-color: "var(--paper-toggle-button-unchecked-bar-color)"
  switch-unchecked-track-color: "var(--paper-toggle-button-unchecked-bar-color)"

  st-mode-active-background: "#eeeeee"

  card-mod-theme: "Google - Light"

  card-mod-more-info-yaml: |
    $: |
      .mdc-dialog .mdc-dialog__scrim {
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        background: rgba(0,0,0,.6);
      } 
      .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
        box-shadow: none !important;
        border-radius: var(--ha-card-border-radius);
      }
    .: |
      :host {
        --ha-card-box-shadow: none;
      }

Google - Dark:
  ### Fonts ###
  primary-font-family: "'Open Sans','Rubik',Roboto,sans-serif"
  paper-font-common-base_-_font-family: "var(--primary-font-family)"
  paper-font-common-code_-_font-family: "var(--primary-font-family)"
  paper-font-body_-_font-family: "var(--primary-font-family)"
  paper-font-subhead_-_font-family: "var(--primary-font-family)"
  paper-font-headline_-_font-family: "var(--primary-font-family)"
  paper-font-caption_-_font-family: "var(--primary-font-family)"
  paper-font-title_-_font-family: "var(--primary-font-family)"

  ha-card-border-radius: "8px"
  ha-card-header-color: "#d7d7d7"
  ha-card-box-shadow: "0px 0px 1px #000000"

  ### Main Interface Colors ###
  app-header-background-color: "#000000"
  primary-color: "#ffffff"
  light-primary-color: "#2b2b2b"
  primary-background-color: "#000000"
  secondary-background-color: "#2b2b2b"
  divider-color: "#2b2b2b"
  ### Text ###
  primary-text-color: var(--primary-color)
  secondary-text-color: "#d7d7d7"
  text-primary-color: "#ffffff"
  disabled-text-color: "#a1a1a1"
  ### Sidebar Menu ###
  sidebar-background-color: "#000000"
  sidebar-icon-color: "#ffffff"
  sidebar-text-color: "#ffffff"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#4284F4"
  sidebar-selected-text-color: var(--sidebar-selected-icon-color)
  ### States and Badges ###
  state-icon-color: "#ffffff"
  state-icon-active-color: "#ffb750"
  state-icon-unavailable-color: var(--disabled-text-color)
  ### Sliders ###
  paper-slider-knob-color: "#4284F4"
  paper-slider-knob-start-color: "#8eb8ff"
  paper-slider-pin-color: "#8eb8ff"
  paper-slider-active-color: "#8eb8ff"
  paper-slider-secondary-color: var(--light-primary-color)
  paper-slider-container-color: "#a1a1a1"
  ### Labels ###
  label-badge-background-color: "#252B36"
  label-badge-text-color: "#F1F1F1"
  label-badge-red: "#6C7B9B"
  ### Cards ###
  paper-card-background-color: "#2b2b2b"
  card-background-color: var(--paper-card-background-color)
  paper-listbox-background-color: "#000000"
  ### Toggles ###
  paper-toggle-button-checked-button-color: "#4284F4"
  paper-toggle-button-checked-bar-color: "#4284F4"
  paper-toggle-button-unchecked-button-color: "#383838"
  paper-toggle-button-unchecked-bar-color: "#c1c1c1"

  ### Dialog ###
  paper-dialog-background-color: "#2b2b2b"

  ### Table row ###
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)

  iron-overlay-backdrop-background-color: "#000000"
  mdc-theme-primary: "#4284F4"
  mdc-theme-on-secondary: "#000000"
  mdc-checkbox-ink-color: "#000000"
  mdc-checkbox-unchecked-color: "#cacaca"

  switch-checked-color: "var(--paper-toggle-button-checked-button-color)"
  switch-unchecked-button-color: "var(--paper-toggle-button-unchecked-button-color)"
  switch-unchecked-color: "var(--paper-toggle-button-unchecked-bar-color)"
  switch-unchecked-track-color: "var(--paper-toggle-button-unchecked-bar-color)"

  st-mode-active-background: "#424242"

  card-mod-theme: "Google - Dark"

  card-mod-more-info-yaml: |
    $: |
      .mdc-dialog .mdc-dialog__scrim {
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        background: rgba(0,0,0,.6);
      }
      .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
        box-shadow: none !important;
        border-radius: var(--ha-card-border-radius);
      }
    .: |
      :host {
        --ha-card-box-shadow: none;
      }

Try switching between them.

[Sian-Lee-SA]

@bramkragten

Core Theme:-

clear:
  # Background / Header !! Use header layout here as love assign theme within the lovelace tag
  lovelace-cc-header-background: 'linear-gradient(45deg, #62c6e042, #ffffff00)'
  lovelace-cc-elements: '#84a3ca'
  lovelace-cc-tab-indicator: '#68cccc'
  lovelace-cc-active-tab: var(--lovelace-cc-tab-indicator)

  # Colors
  text-color: '#636B75'                                                           # Grey text
  text-medium-color: '#8c96a5'                                                    # Medium grey text
  text-light-color: '#BAC0C6'                                                     # Light grey text
  accent-color: '#00a1ff'                                                         # Blue
  background-color: '#F7F8F9'                                                     # Light grey background
  background-color-2: '#F4F5F6'                                                   # Light grey background
  background-card-color: 'rgba(255,255,255,0.65)'                                  # White background
  border-color: '#EAEAEA'                                                         # Light grey border

  # Header
  primary-color: 'var(--text-color)'                                              # Background
  text-primary-color: '#FFF'                                                      # Text

  # Left Menu
  paper-listbox-background-color: 'var(--background-color)'                       # Background

  # UI
  paper-card-header-color: 'var(--text-color)'                                    # Title in settings
  primary-background-color: 'var(--background-color)'                             # Background (also title background in left menu)

  # Card
  paper-card-background-color: 'var(--background-card-color)'                     # Background
  dark-primary-color: 'var(--text-color)'
  primary-text-color: 'var(--text-color)'
  paper-listbox-color: 'var(--text-color)'
  light-primary-color: 'var(--text-light-color)'
  secondary-text-color: 'var(--text-medium-color)'
  disabled-text-color: 'var(--text-light-color)'
  paper-dialog-button-color: 'var(--text-color)'
  secondary-background-color: 'var(--background-color-2)'                         # Background more info title

  # Icons
  paper-item-icon-color: 'var(--text-light-color)'                                # Off
  paper-item-icon-active-color: 'var(--accent-color)'                             # On

  # Switches
  paper-toggle-button-checked-button-color: '#FFF'                                # Knob On
  paper-toggle-button-checked-bar-color: '#0077FF'                                # Background On
  paper-toggle-button-unchecked-button-color: '#FFF'                              # Knob Off
  paper-toggle-button-unchecked-bar-color: 'var(--disabled-text-color)'           # Background Off

  # Shadows
  shadow-elevation-2dp_-_box-shadow: 'inset 0px 0px 0px 1px var(--border-color)'
  shadow-elevation-4dp_-_box-shadow: 'var(--shadow-elevation-2dp_-_box-shadow)'
  shadow-elevation-6dp_-_box-shadow: 'var(--shadow-elevation-2dp_-_box-shadow)'
  shadow-elevation-8dp_-_box-shadow: 'var(--shadow-elevation-2dp_-_box-shadow)'
  shadow-elevation-10dp_-_box-shadow: 'var(--shadow-elevation-2dp_-_box-shadow)'
  shadow-elevation-12dp_-_box-shadow: 'var(--shadow-elevation-2dp_-_box-shadow)'
  shadow-elevation-14dp_-_box-shadow: 'var(--shadow-elevation-2dp_-_box-shadow)'
  shadow-elevation-16dp_-_box-shadow: '0px 0px 0px 3px var(--light-color)'

  # Others
  ha-card-box-shadow: '0 1px 1px 0 rgba(0,0,0,.1)'
  dark-secondary-opacity: '.7'

Lovelace View Theme:-

lovelace-blue-blur:
  theme-color: '#62c6e042'
  primary-color: '#0000005c'
  accent-color: '#68ebf3'

  # BACKGROUND & HEADER

  lovelace-background: top right no-repeat url(/local/images/background-blue-blur.jpg) fixed
  lovelace-cc-header-background: 'linear-gradient(45deg, #62c6e042, #ffffff00)'
  lovelace-cc-elements: '#84a3ca'
  lovelace-cc-tab-indicator: '#68cccc'
  lovelace-cc-active-tab: var(--lovelace-cc-tab-indicator)

  secondary-background-color: 'transparent'
  primary-background-color: '#1f6275'

  # TEXT
  primary-text-color: '#FFFFFF'
  secondary-text-color: '#acd1eccf'
  ha-card-header-color: '#b9ecec'

  # CARD
  paper-card-background-color: '#75889042'
  paper-card-active-background-color: '#3baad696'
  paper-card-header-color: '#97d3ff'
  card-background-color: '#ffffff29'

  # HONEYCOMB
  honeycomb-menu-icon-color: '#29343c'
  honeycomb-menu-icon-active-color: '#3e6e8c'
  honeycomb-menu-background-color: 'linear-gradient(45deg, #98a6c5, #67899e9c)'
  honeycomb-menu-active-background-color: 'linear-gradient(45deg, #8eafd2, #d0e9fd)'
  honeycomb-name-background: rgba(52, 98, 132, 0.58)

  # BUTTONS & TOGGLES
  paper-toggle-button-checked-bar-color: '#739bc3'
  paper-toggle-button-checked-button-color: '#000'
  paper-toggle-button-unchecked-button-color: '#000'
  paper-toggle-button-unchecked-bar-color: 'var(--disabled-text-color)'

  switch-checked-color: '#1b485f'
  switch-checked-button-color: 'var(--switch-checked-color)'
  switch-checked-track-color: 'var(--switch-checked-color)'

  paper-slider-active-color: '#d092c8'
  paper-slider-knob-color: '#d092c8'

  # ICONS
  state-icon-color: '#d7dada'
  state-icon-active-color: '#6ddada'
  paper-item-icon-active-color: 'var(--state-icon-active-color)'
  tiles-card-padding: 0

  # CUSTOM
  grid-card-gap: 2px

The Results

The html tag is assigned the correct core theme:-

Then the lovelace view container is set to the correct view theme (hui-view):-

The problem comes when the following cards start injecting the core themes styles all over again:-

As you can see in their tags and the styles assigned, it seems to put the base theme into them which was not present prior to the 2021.12 release. I have not used the theme property in anything else other than in the view settings

[bramkragten]

Are you using card mod? Can you try if this also happens without any custom js loaded?

[Sian-Lee-SA]

I am using card mod and that was one of the first thing's I disabled to see if it was the culprit but it wasn't. I had disabled every module resource one by one and even browser mod yet none of them seem to be the cause.

It also seems to be affecting hui-{card-name} cards where as other card elements don't seem to be affected

[github-actions[bot]]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[kaizersoje]

Bumping this

[github-actions[bot]]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[kaizersoje]

Bumping this

[github-actions[bot]]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[kaizersoje]

Bumping this

[corintho]

Today I was trying to figure out some theme problems when I found this issue that showed me where the problem lies in. I have the latest frontend right now: "Frontend 20230309.1 - latest", and this is still an issue. I'm glad I found this ticket, or else I would be hunting for a solution in the wrong place.

[github-actions[bot]]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.