Theme Issue - Cant see code/hassio docs etc

Hey,

Can someone tell me what setting i need to change in my theme to fix this issue? Currently im using the Google Dark Theme but it also happens for midnight as well.

# Theme based on Google app dark theme
# Creator: Juan - @juanmtech
# Website: https://www.juanmtech.com
# YouTube Channel: https://youtube.com/juanmtech
# My Home Assistant Config files: https://github.com/JuanMTech/Home_Assistant_files
#
#
Google Dark Theme:
  # Header:
  app-header-background-color: "#171717"
  app-header-text-color: "#BDC1C6"
  # Main Interface Colors
  primary-color: "#5F9BEA"
  light-primary-color: var(--primary-color)
  primary-background-color: "#171717"
  secondary-background-color: "#202124"
  divider-color: var(--primary-background-color)
  # Text
  primary-text-color: "#BDC1C6"
  secondary-text-color: "#BDC1C6"
  text-primary-color: "#FFFFFF"
  disabled-text-color: "#717171"
  # Sidebar Menu
  sidebar-icon-color: var(--app-header-text-color)
  sidebar-text-color: '#BDC1C6'
  sidebar-background-color: "#202124"
  sidebar-selected-background-color: var(--primary-background-color)
  sidebar-selected-icon-color: "#5F9BEA"
  sidebar-selected-text-color: var(--sidebar-selected-icon-color))
  # States and Badges
  state-icon-color: "#5F6267"
  state-icon-active-color: "#5F9BEA"
  state-icon-unavailable-color: var(--disabled-text-color)
  # Sliders
  paper-slider-knob-color: "#5F9BEA"
  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: "#202124"
  label-badge-text-color: "#BDC1C6"
  label-badge-red: "#D06568"
  label-badge-green: "#80C884"
  label-badge-blue: "#5F9BEA"
  label-badge-yellow: "#DFC271"
  label-badge-gray: "#5F6267"

  # Cards
  ha-card-border-radius: "10px"
  ha-card-box-shadow: 1px 1px 5px 0px rgb(12, 12, 14)
  paper-dialog-background-color: "#202124"
  paper-card-background-color: var(--paper-dialog-background-color)
  paper-listbox-background-color: var(--paper-dialog-background-color)
  # Switches
  switch-checked-button-color: "#5F9BEA"
  switch-checked-track-color: "#404D64"
  switch-unchecked-button-color: "#636466"
  switch-unchecked-track-color: "#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)

Thanks

This is the key you are looking for:

  markdown-code-background-color: '#39679e'

Make it something that contrasts with both your primary-text-color and your paper-card-background-color

EDIT: Yours was a mild case compared to mine. It looked like a redacted top secret document before I fixed it:

1 Like