Help with CSS-theme

Configuration Frontend
1

Hey

One little problem for you CSS-folks out there.

How can I somehow remedy this: I cant see the text on sidemenu, all white! =(
why

I got my own themes.yaml and somewhere I made a misstake but cant figure out where. On a side note the CSS-documentation isnt very complete.

pimproad9:
  # Background image
  lovelace-background: 'center / cover no-repeat url("/local/lovelace/background_19.png") fixed'

  # Colors
  text-color: '#fafafa'                                                           # White text
  text-medium-light-color: '#A0A2A8'                                              # Medium-light grey text
  text-medium-color: '#fafafa'                                                    # Medium grey text
  text-dark-color: '#fafafa'                                                      # Dark grey text
  accent-color: '#008bef'                                                         # Blue
  accent-medium-color: '#2686c1'                                                  # Decent blue
  background-color: '#3b4049'                                                     # Dark grey background
  background-color-2: '#484E59'                                                   # Light grey background
  background-card-color: '#434952'                                                # Grey background
  border-color: '#383C46'                                                         # Grey border

  # Header
  #primary-color: 'var(--background-color)'                                        # Background color
  #text-primary-color: 'var(--text-color)'                                         # Text
  # Header:
  app-header-background-color: 'center / cover no-repeat url("/local/lovelace/background_19.png") fixed'
  app-header-text-color: 'var(--text-color)'

  # Left Menu
  paper-listbox-background-color: 'var(--background-color)'                       # Background
  sidebar-background-color: 'center / cover no-repeat url("/local/lovelace/background_19.png") fixed'
  sidebar-icon-color: 'var(--accent-color)'                                       # icons
  sidebar-selected-icon-color: 'var(--text-color)'                                # Selected row icon and background (15%)
  sidebar-selected-text-color: 'var(--text-color)'                                # Selected row label

  # UI
  paper-card-header-color: 'var(--text-color)'                                    # Title in settings
  primary-background-color: 'var(--background-color)'                             # Background (also title background in left menu)
  mdc-theme-primary: 'var(--accent-medium-color)'                                 # Action Buttons (save, restart etc.)
  card-background-color: 'var(--background-card-color)'                           # Entity Registry Background

  # Card
  ha-card-background: '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-dark-color)'
  secondary-text-color: 'var(--text-medium-color)'
  disabled-text-color: 'var(--text-dark-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-color)'                                      # Off
  paper-item-icon-active-color: 'var(--accent-color)'                             # On

  # Switches
  switch-checked-button-color: 'var(--text-medium-color)'                         # Knob On
  switch-unchecked-button-color: 'var(--text-medium-color)'                       # Knob Off
  switch-checked-track-color: '#009FFF'                                           # Background On / Ikon Lampa På
  switch-unchecked-track-color: '#A0A2A8'                                         # Background Off / Ikon Lampa Av

  # Slider
  paper-slider-active-color: 'var(--accent-color)'                                # Line On
  paper-slider-knob-color: 'var(--text-color)'                                    # Knob On
  paper-slider-container-color: 'var(--text-color)'                               # Line Off
  paper-slider-knob-start-color: 'var(--text-medium-light-color)'                 # Knob Off
  
  # Divider
  divider-color: rgba(0, 0, 0, .4);                                               # Divider

  # Shadows
  ha-card-box-shadow: 'inset 0px 0px 0px 1px var(--border-color)'

  # HACS
  hacs-badge-color: 'var(--accent-color)'                                         # New Badge
  hacs-status-installed: 'var(--text-color)'                                      # Installed Icon
  hacs-status-pending-restart: 'var(--text-dark-color)'                           # Restart Icon
  hacs-status-pending-update: 'var(--accent-color)'                               # Update Icon
2

Plz help! :+1:

3

Is there a full list of Home Assistant CSS anywhere? Fully documented!

4

Check vars:

  • sidebar-text-color
  • sidebar-background-color

Usually i use chrome devTools to find all CSS vars. You can try to change colors from devTools and check immediately what it gives.
You can also use the great tool Theme-maker - a tool for designing themes

5

Thanks!
DevTools worked great!

1 Like
6

This gray wood texture looks awesome. Is that somewhere freely available?

7

I have the picture on my computer. I took it from the internet somewhere.
I could share it somewhere.