Set sidebar selected menu item background color

Configuration Frontend
1

Hi All

Hope someone smarter than me can help with a problem I have. I have been trying to change the background color of a selected menu item, but seems not to be able to affect it at all. I expected the sidebar-selected-background-color to be the right place to change it, but apparently not. What I want is
image

This is what I have in the theme file:

Agilent:

primary-color: "#384350" # AT Dark Navy
light-primary-color: '#FFBA00' # AT Yellow
primary-background-color: "#E2EEF5" # AT Blue - Luminous
secondary-background-color: "#FFFFFF" # AT White
card-background-color: "#ffffff" # AT White
paper-item-icon-color: "#384350" # AT Dark Navy

primary-text-color: "#384350" # AT Dark Navy
text-primary-color: "#FFFFFF" # AT White
secondary-text-color: "#384350" # AT Dark Navy
disabled-text-color: '#FFE2C2' # AT Orange Pale
label-badge-text-color: "#384350" # AT Dark Navy

divider-color: "#EAEBED" # AT Pale Gray
paper-card-header-color: "#fbceb1" # Tan - This is the text at the top of some cards in the config menu
border-color: '#C1C6C8' #AT Gray

paper-listbox-color: "#384350" # AT Dark Navy - This only shows up in a few drop down menus
paper-listbox-background-color: '#384350' # AT Dark Navy
#paper-grey-200: "#e7feff" # Very Light Blue
sidebar-icon-color: "#384350" # AT Dark Navy
sidebar-selected-icon-color: "#ffffff" # AT White
sidebar-text-color: "#384350" # AT Dark Navy
sidebar-selected-text-color: "#ffffff" # AT White
sidebar-selected-background-color: "var(--primary-color)"
sidebar-background-color: "#EAEBED" # AT Pale Gray
sidebar-selected-background-color: 'var(--paper-listbox-background-color)' #backward compatible with existing themes

################################# # CARDS #################################
ha-card-border-radius: "10px"
ha-card-box-shadow: "inset 0px 0px 2px 1px var(--border-color)"
ha-card-header-color: 'var(--primary-text-color)'

paper-toggle-button-checked-ink-color: "#5d8aa8" # Not sure about this
paper-toggle-button-checked-button-color: "#03c03c" # The button color when to the right "on"
paper-toggle-button-checked-bar-color: "#8fbc8f" # This is the bar color when in on position
paper-toggle-button-unchecked-bar-color: "#4780EA" # AT Periwinkle
paper-toggle-button-unchecked-button-color: "#75C335" # AT Green

paper-slider-knob-color: "#daa520" # Color of the Knob when in any "on" position
paper-slider-knob-start-color: "#996515" # Color of the know only when all the way off
paper-slider-pin-color: "#b2beb5" # Not sure about this
paper-slider-active-color: "#00ff00" # Line to the left of the knob
paper-slider-secondary-color: "#6699cc" # Line to the right of the knob

table-row-background-color: "#efdecd" # Almond
table-row-alternative-background-color: "#fbceb1" # Apricot
2

sidebar-selected-icon-color is the highlight color. There is no separation for background selected color and the background color. sidebar-selected-icon-color and sidebar-selected-text-color are the only colors that change based on selection. sidebar-selected-background-color is a variable you made up it seems.

3

@petro thanks for the quick reply. So I will not be able to achieve what I wanted? :worried: Anyway I can tweek it?

4

sidebar-selected-icon-color changes the highlight color for the whole item. That’s all you can do.

5

OK. Thanks.