Sidebar colour after updating

Share your Projects! Dashboards & Frontend
1

So my sidebar running my theme looks like this now after my most recent update in HA.

image

I thought one of these would change it to a dark background but they havent.
Can anyone help?



# Main colors
primary-color: '#5294E2'                                                        # Header
accent-color: '#E45E65'                                                         # Accent color
dark-primary-color: 'var(--accent-color)'                                       # Hyperlinks                                         
light-primary-color: 'var(--accent-color)'                                      # Horizontal line in about
ha-card-border-radius: '20px'   
ha-card-background: 'rgba(150, 150, 150, 0.1)'
cch-background: 'rgba(150, 150, 150, 0.1)'                                      #Attempt at changes Custom Compact Header to transparent
custom_header-background: 'rgba(150, 150, 150, 0.1)'                                      
card-background-color: "var(--paper-card-background-color)"                     
sidebar-background-colour: '#383C45'
paper-listbox-color: 'var(--primary-color)'                                     # Navigation menu selection hoover
paper-listbox-background-color: 'var(--primary-background-color)'                                          
material-background-color: 'var(--primary-background-color)' 
data-table-background-color: 'var(--primary-background-color)' 
paper-grey-50: 'var(--primary-text-color)'                                   
paper-grey-200: '#414A59'
2

I haven’t updated yet to test but in another thread I saw this was needed in your theme:

  sidebar-icon-color: '#777777'
  sidebar-background-color: "var(--paper-listbox-background-color)"
  sidebar-selected-icon-color: "var(--primary-color)"
  sidebar-selected-text-color: "var(--primary-text-color)"
  sidebar-text-color: "var(--primary-text-color)"
  slider-bar-color: "var(--disabled-text-color)"
  slider-color: "var(--primary-color)"
  slider-secondary-color: "var(--light-primary-color)"

Obviously you’ll need to change the colors as desired.

3

@Matt_Barnes Have you been able to solve this? We seen to have the same theme and I’m facing the same issue

4

Hi.

I had changed mine before seeing this post and changes it with sidebar-background-color but have noticed some other bits like the search box on the entities tab is invisible now as its the same colour so may add all of the above and see.