Changing colour of template editor background

I’m not sure why, but the background of the template editor and the services input boxes have gone white with some of the text being really pale green (primary text colour), which makes it unreadable. I think this happened after the latest update, but I don’t know how to fix it. What variable do I use to change the background of the boxes to something darker? Or if that’s not possible, can I change the text of just that box, while keeping the primary text colour as pale green as it looks good in other sections? I’ve tried looking at the console but can’t figure it out.

green_dark:
  primary-font-family: 'Poppins Regular, sans-serif'
  paper-font-common-base_-_font-family: "var(--primary-font-family)"
  paper-font-common-code_-_font-family: "var(--primary-font-family)"
  paper-font-body1_-_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)"
  # Header:
  app-header-background-color: var(--primary-color)
  app-header-text-color: var(--secondary-background-color)
  # Main Interface Colors
  primary-color: 'rgb(91, 237, 54)'
  light-primary-color: var(--primary-color)
  primary-background-color: 'rgb(0, 0, 0)'
  secondary-background-color: 'rgb(32, 33, 32)'
  divider-color: var(--primary-text-color)
  # Text
  primary-text-color: 'rgb(201, 239, 191)'
  secondary-text-color: var(--primary-text-color)
  text-primary-color: var(--primary-text-color)
  disabled-text-color: var(--primary-text-color)
  # Sidebar Menu
  sidebar-icon-color: var(--primary-color)
  sidebar-text-color: var(--primary-color)
  sidebar-background-color: var(--primary-background-color)
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: var(--secondary-button-colour) 
  sidebar-selected-text-color: var(--primary-text-color)
  # States and Badges
  state-icon-color: var(--primary-color)
  state-icon-active-color: var(--secondary-button-colour)
  state-icon-unavailable-color: var(--disabled-text-color)
  # Sliders
  paper-slider-knob-color: "#45AA79"
  paper-slider-knob-start-color: var(--paper-slider-knob-color)
  paper-slider-pin-color: var(--paper-slider-knob-color)
  paper-slider-active-color: var(--paper-slider-knob-color)
  paper-slider-secondary-color: var(--light-primary-color)
  # Labels
  label-badge-background-color: var(--secondary-background-color) #"#202124"
  label-badge-text-color: var(--primary-text-color)
  label-badge-red: "#D06568"
  label-badge-green: "#80C884"
  label-badge-blue: "#5F9BEA"
  label-badge-yellow: "#DFC271"
  label-badge-gray: "#5F6267"


# Lovelace Colours #
  primary-button-colour: var(--primary-color)
  secondary-button-colour: 'rgb(221, 232, 6)'
  low-colour: 'rgb(14, 245, 249)'
  mid-colour: 'rgb(153, 102, 204)'
  high-colour: 'rgb(211, 97, 106)'
  light-bright: 'rgb(255,215,184)'
  light-soft: 'rgb(255,180,115)'
  light-dim: 'rgb(255,120,0)'
  light-dark: 'rgb(255,16,0)'

  # Cards
  card-background-color: var(--secondary-background-color)
  ha-card-border-radius: "10px"
  ha-card-box-shadow: 0px
  paper-dialog-background-color: var(--card-background-color)
  paper-card-background-color: var(--card-background-color)
  paper-listbox-background-color: 'rgb(53, 56, 53)'
  # Switches
  switch-checked-button-color: var(--primary-button-colour) #"#45AA79"
  switch-checked-track-color:  'rgb(52, 127, 90)'
  switch-unchecked-button-color: var(--secondary-button-colour) 
  switch-unchecked-track-color: 'rgb(223, 230, 96)' #"#636466"
  # Toggles
  paper-toggle-button-checked-button-color: var(--switch-checked-button-color)
  paper-toggle-button-checked-bar-color: var(--switch-checked-track-color)
  paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color)
  paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color)
  # Table
  table-row-background-color: var(--primary-background-color)
  table-row-alternative-background-color: var(--secondary-background-color)
  data-table-background-color: var(--primary-background-color)
  # Dropdowns
  material-background-color: var(--secondary-background-color)
  material-secondary-background-color: var(--primary-background-color)
  mdc-theme-surface: var(--secondary-background-color)
  # HACS
  hacs-chip-background-color: var(--primary-color)
  # Mini-media-player
  mini-media-player-button-color: var(--primary-button-colour)
  mini-media-player-name-font-weight: 500

3 posts - 2 participants

Read full topic