Manifest theme-color issue based on Matrix theme

Configuration Frontend
1

Hi,
Using the Matrix theme for years now, modern Lovelace throws an error because

Manifest: property 'theme_color' ignored, 'hsl(var(--huesat) 20%)' is not a valid color.

I’ve asked Bram, and he educated me that the primary-color is automatically set in the manifest as theme-color, and that that should be a string.

see:https://github.com/home-assistant/home-assistant-polymer/issues/4358#issuecomment-572929111

fyi the theme starts like:

matrix:
  name: 'Matrix'
  # MyVariables
  base-hue: '120' #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: '16%' #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: 'hsl(var(--huesat) 20%)'

and works fine. or so it seems.

how can I set primary-color to a string and still use the rest of the theme as is? Anyone of you fellow members please help?
I am not familiar enough with the hsl colors using these --base-hue and --base-sat variables to start changing things.

please have a look?

2

Hey there!

I don’t know the answer to your query, but if you might entertain me, I have a few questions:

  1. Did you find an answer? I wonder if it might be worth asking Bram or others on discord.

  2. I had lost track of where I got the Matrix theme - thank you for it! Have you tuned it at all during the Lovelace changes/improvements over the past however-many months? If so, would you mind re-posting, either here or on github? I’ve added a few of the changes, but I know there are more (most recent, I think, is material-background-color). If not, I may take a stab at adding the missing elements.

  3. Seems like you mess with theme’s at least a little more than most people. Are you aware of any cheat-sheet’s or hints on finding which variable controls which item(s)? I’ve tried the inspector in Chrome and am sometimes successful, but more often than not, I’m unable to figure out which color in the sea of variables it is. I try dynamically changing the likely ones, but frequently still can’t find it.

Again, thank you for the Matrix theme… it’s my favorite one. I have it activate in the evening before bedtime on my large wall panel touchscreen and I use a motion gif in the background of the “raining code,” which I think looks pretty cool.

3

well, yes I did. And that’s what I’ve written above…didn’t you click the link I posted?

not really. only this I think:

  # Primary Color
  primary-color: '#2e3a2c' # 'hsl(var(--huesat) 20%)'
  # Backgrounds
  card-background-color: 'var(--paper-card-background-color)'
  sidebar-background-color: 'var(--paper-listbox-background-color)'

the bottom 2 were necessary to make the entities readable, as is an issue with all dark colored themes.
(I think those were the 2, to even sure anymore, please check before you copy)

no cheet sheets… just check the core code :wink:

4

LOL - those are the only two additions I’ve made as well. Over time, I may try to take a crack at bringing it up-to-date. Are you the original developer of the theme?

5

no Sir, not at all. Only use it in my ‘Developer’ mode