More-info dialog background color

Hi All! I’m hoping someone smarter than me can help me out.

I’ve been using a theme since before 0.100… and with 0.113 I ran into a theme issue.

The More-Info dialog box is basically unreadable, and I can’t seem to change the background color for it.

The variable in the theme.yaml, I think, is

paper-dialog-background-color: '#434954'  

And no matter which way I edit it (I’ve tried “ha-dialog-background-color”, and I’ve tried “markdown-code-background-color”), I can’t seem to get it to change the more-info dialog color.

Am I missing something? Or am I just dense? (Which is always a possibility. LOL.)

Here’s the entire theme in case I’m completely looking in the wrong place.

PmxMononight:
  # Main colors #5294E2 #363941
  primary-color: '#39679e'                                                        # Header
  accent-color: '#919191'                                                         # Accent color
  dark-primary-color: 'var(--accent-color)'                                       # Hyperlinks
  light-primary-color: 'var(--accent-color)'                                      # Horizontal line in about

  # Text colors
  primary-text-color: '#FFFFFF'                                                   # Primary text colour, here is referencing dark-primary-color
  text-primary-color: 'var(--primary-text-color)'                                 # Primary text colour
  secondary-text-color: '#5294E2'                                                 # For secondary titles in more info boxes etc.
  disabled-text-color: '#7F848E'                                                  # Disabled text colour
  label-badge-border-color: 'green'                                               # Label badge border, just a reference value

  # Background colors
  primary-background-color: '#383C45'                                             # Settings background
  secondary-background-color: '#656e82'                                           # Main card UI background
  divider-color: 'rgba(0, 0, 0, .12)'                                             # Divider

  # Table rows
  table-row-background-color: '#353840'                                           # Table row
  table-row-alternative-background-color: '#3E424B'                               # Table row alternative

  # Nav Menu
  paper-listbox-color: 'var(--accent-color)'                                      # Navigation menu selection hoover
  paper-listbox-background-color: '#2E333A'                                       # Navigation menu background
  paper-grey-50: 'var(--primary-text-color)'
  paper-grey-200: '#414A59'                                                       # Navigation menu selection

  # Paper card
  paper-card-header-color: 'var(--accent-color)'                                  # Card header text colour
  ha-card-background: '#434954'                                                   # Card background colour
  markdown-code-background-color: '#434954'                                           # Card dialog background colour
  paper-item-icon-color: 'var(--primary-text-color)'                              # Icon color
  paper-item-icon-active-color: '#F9C536'                                         # Icon color active
  paper-item-icon_-_color: 'green'
  paper-item-selected_-_background-color: '#434954'                               # Popup item select
  paper-tabs-selection-bar-color: 'green'
  ha-card-border-radius: 5px

  # Labels
  label-badge-red: 'var(--accent-color)'                                          # References the brand colour label badge border
  label-badge-text-color: 'var(--primary-text-color)'                             # Now same as label badge border but that's a matter of taste
  label-badge-background-color: '#2E333A'                                         # Same, but can also be set to transparent here

  # Switches
  paper-toggle-button-checked-button-color: 'var(--accent-color)'
  paper-toggle-button-checked-bar-color: 'var(--accent-color)'
  paper-toggle-button-checked-ink-color: 'var(--accent-color)'
  paper-toggle-button-unchecked-button-color: 'var(--disabled-text-color)'
  paper-toggle-button-unchecked-bar-color: 'var(--disabled-text-color)'
  paper-toggle-button-unchecked-ink-color: 'var(--disabled-text-color)'

  # Sliders
  paper-slider-knob-color: 'var(--accent-color)'
  paper-slider-knob-start-color: 'var(--accent-color)'
  paper-slider-pin-color: 'var(--accent-color)'
  paper-slider-active-color: 'var(--accent-color)'
  paper-slider-container-color: 'linear-gradient(var(--primary-background-color), var(--secondary-background-color)) no-repeat'
  paper-slider-secondary-color: 'var(--secondary-background-color)'
  paper-slider-disabled-active-color: 'var(--disabled-text-color)'
  paper-slider-disabled-secondary-color: 'var(--disabled-text-color)'

  # Google colors
  google-red-500: '#E45E65'
  google-green-500: '#39E949'

  #Sidebar
  sidebar-background-color: '#b0b0b0'
  sidebar-icon-color: var(--state-icon-color)
  sidebar-text-color: var(--sidebar-icon-color)
  sidebar-selected-background-color: var(--app-header-background-color)
  sidebar-selected-icon-color: 'var(--accent-color)'
  sidebar-selected-text-color: 'var(--accent-color)'

mdc-theme-surface: is the theme variable you want.

3 Likes

Awesome! Thank you!

One more question… what about the more-info header? (The dialog box changed as it should… but the header is still wrong.)

wait, is this mdc color the solution for this:

which would be odd, since I have only 1 theme with this issue, and no them at all using the mdc-theme-surface: variable…

seems there was this:

card-background-color: 'var(--background-card-color, 0.6)'

in my theme, pointing to an unexisting --background-card-color
commented the line and now the more-info shows fine.

Not really sure how this more-info works, does clicking any more-info simply blurs the background, instead of setting a crd for the more-info?

If I remember correctly both card-background-color and mdc-theme-surface: affect the more info pop up background colour. Only card-background-color affects the pop-up card header though.

1 Like