Need help making a theme perfect for me

Hi, I’m far from an expert in theme so I do what a lot must do and grab the good work others created :wink:
I had a hard time finding docs or information about the theme parameters and always end up lost…

So I found the perfect theme for me (bluenight) but there is one thing that annoys me; the icon don’t change color when turned on and folow the brigthness.
The binary sensors as well have this issue…
The only ones working are the RGB lights.

When the lights, binary sensors, etc… are off, I would like them to stay like they are now but when on, I would like them to act 100% like the default theme… everything else (including when they’re off) would stay like it is in the BlueNight theme…
Simple or not?

I would appreciate it so much if someone could help me out (and it would help me understand better the theming in HA.

Here are some examples of what I mean:
default:


theme%20ok2

bluenight:


theme%20not%20ok2

***Other themes acts like this so I didn’t think it was specific to this theme…

Here is the theme code:

BlueNight:
  # MyVariables
  base-hue: '220' #Controls the base (and accent) color hue (0-360) | 0=Red 60=Yellow 120=Green 180=Cyan 240=Blue 300=Magenta 360=Red
  base-sat: '5%' #Controls the saturation of the theme (0%-100%) | 0%=Grey 100%=Full Saturation
  # MyVar
  huesat: 'var(--base-hue), var(--base-sat),'
  # Primary Color
  primary-color: '#2581ab' #hsl(var(--huesat) 50%)' #header colors and some text colors
  dark-primary-color: 'hsl(var(--huesat) 60%)'
  light-primary-color: 'hsl(var(--huesat) 30%)'
  accent-color: 'hsl(var(--huesat) 30%)'
  # Backgrounds
  primary-background-color: 'hsl(var(--huesat) 16%)'
  secondary-background-color: 'hsl(var(--huesat) 16%)' # background behind cards
  paper-listbox-background-color: 'hsl(var(--huesat) 16%)'
  paper-card-background-color: 'hsl(var(--huesat) 12%)'
  paper-dialog-background-color: 'var(--paper-card-background-color)'
  table-row-background-color: 'hsl(var(--huesat) 12%)'
  table-row-alternative-background-color: 'hsl(var(--huesat) 10%)'
  # Divider
  divider-color: 'hsla(0, 0%, 0%, 0)'
  dark-divider-opacity: '0'
  light-divider-opacity: '0'
  dark-secondary-opacity: '1'
  # Text colors
  primary-text-color: 'hsl(var(--huesat) 90%)'
  text-primary-color: 'hsl(var(--huesat) 90%)'
  secondary-text-color: 'hsl(var(--huesat) 80%)'
  disabled-text-color: 'hsl(var(--huesat) 70%)'
  sidebar-text_-_color: 'hsl(var(--huesat) 90%)'
  sidebar-text-color: 'hsl(var(--huesat) 90%)'
  paper-card-header-color: 'hsl(var(--huesat) 90%)'
  paper-button-ink-color: 'hsl(var(--huesat) 50%)'
  # Text Adjustments
  paper-font-headline_-_letter-spacing: '-0.5px'
  paper-font-headline_-_font-weight: '400'
  paper-font-body1_-_font-weight: '300'
  # Nav Menu
  paper-listbox-color: 'hsl(var(--huesat) 50%)'
  paper-grey-50: 'hsl(var(--huesat) 50%)'
  paper-grey-200: 'hsl(var(--huesat) 10%)' #active menu item
  sidebar-icon-color: 'hsl(var(--huesat) 50%)' #iron-icon-fill-color
  # Paper card
  paper-item-icon-color: 'hsl(var(--huesat) 40%)'
  paper-item-icon-active-color: 'var(--paper-item-icon-color)'
  paper-item-icon_-_color: 'var(--paper-item-icon-color)'
  paper-item-selected_-_background-color: 'hsla(0, 0%, 0%, 0.2)'
  paper-item-selected_-_color: 'hsl(var(--huesat) 20%)' #?
  paper-tabs-selection-bar-color: 'hsla(0, 0%, 0%, 0.2)'
  paper-tab-ink: 'hsl(var(--huesat) 70%)'
  paper-input-container-color: 'hsl(var(--huesat) 60%)'
  # Labels
  label-badge-red: 'var(--paper-card-background-color)'
  label-badge-border-color: 'var(--label-badge-red)'
  label-badge-background-color: 'var(--paper-card-background-color)'
  label-badge-text-color: 'var(--primary-text-color)'
  # Shadows
  shadow-elevation-2dp_-_box-shadow: '0px 0px 0px 0px hsl(var(--huesat) 10%)'
  shadow-elevation-16dp_-_box-shadow: '0px 0px 0px 0px hsl(var(--huesat) 25%)'
  # Switches
  paper-toggle-button-checked-button-color: 'hsl(var(--base-hue), 90%, 50%)'
  paper-toggle-button-checked-bar-color: 'hsl(var(--huesat) 25%)'
  paper-toggle-button-unchecked-button-color: 'hsl(var(--huesat) 25%)'
  paper-toggle-button-unchecked-bar-color: 'hsl(var(--huesat) 5%)'
  # Sliders
  paper-slider-knob-color:  'hsl(var(--base-hue), 90%, 50%)'
  paper-slider-knob-start-color: 'hsl(var(--base-hue), 80%, 25%)'
  paper-slider-pin-color:  'hsl(var(--base-hue), 90%, 50%)'
  paper-slider-active-color:  'hsl(var(--base-hue), 90%, 50%)'
  paper-slider-container-color: 'hsl(var(--huesat) 28%)'
  paper-slider-secondary-color: 'hsl(var(--huesat) 90%)'
  paper-slider-disabled-active-color: 'hsl(var(--base-hue), 80%, 25%)'
  paper-slider-disabled-secondary-color: 'hsl(var(--base-hue), 80%, 25%)'
  paper-dialog-color: 'hsl(var(--base-hue), 20%, 80%)'      

I thank you in advance to help me out… I promess, I really try to get better at this :wink:

Your paper item icon color and your active item color are the same. One points to the other.

Change the active color to a yellow color to match the default theme.

Thank you so much, now I understand better…
I thought there was a special parameter to get the color change based on the brightness but now I understand it’s a percentage based on the specified color (as 100%)

Very helpful for me :slight_smile:
Took me a while but I’m getting it…
The HLS way confused me more also on top of that…