Changing colour of template editor background

PodPerson · March 6, 2022, 5:50am

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

tom_l · March 6, 2022, 6:50am

The two variables are:

code-editor-background-color: # (main code page background)

code-editor-gutter-color: # (line numbers column background)

PodPerson · March 6, 2022, 6:56am

Thank you!

martygubow · March 27, 2022, 7:27pm

Where do I place these variables? Which file? Please give an example

tom_l · March 27, 2022, 10:11pm

https://www.home-assistant.io/integrations/frontend/#defining-themes

Simon_Bunn · February 23, 2023, 1:57am

I tried editing this using the example shown and get an error so cannot restart HA.

The system cannot restart because the configuration is not valid: Invalid config for [frontend]: [code-editor-background-color] is an invalid option for [frontend]. Check: frontend->frontend->code-editor-background-color. (See /config/configuration.yaml, line 50).

my code is

frontend:
  code-editor-background-color: "#000000"
  code-editor-gutter-color: "#000000"

tom_l · February 23, 2023, 1:59am

You are missing the themes integration and theme name. Have another look at the linked example.

frontend:
  themes:
    happy:
      primary-color: pink
      accent-color: orange

Simon_Bunn · February 23, 2023, 2:06am

I removed my themes link since it never worked anyway. At some point all of my themes got moved into a root folder, and my configuration.yaml got updated to

themes: !include merged_themes_folder

Now my theme is white (used to be black) and it looks like it has reverted to using the default HA theme. I used to be able to switch themes but this stopped when they all got moved into a sub-folder. Looks like I might have to revert to a saved version of HA so I can get back to my dark theme