Need a small starter to release new themes

Configuration Frontend
1

Hello all together,

I’m currently creating a new set of themes. The finetuning of single values I will do after release.

As I wanted to start with the recommended structure for theme sets I tried this structure (stub):

frontend:
  themes:
    glass-magentaX:
      maincolor1: "#e60073"
      modes:
        light:
          maincolor2: "#00334d"
          highlight_color: "#ddd"
          contrast-color1: "#eee"
          texture-color1: "#2d8659"
          texture-color2: "#00334d"
          background-color: "#2d8659"
        dark:
          maincolor2: "#000"
          highlight_color: rgba(51, 204, 255, 1)
          contrast-color1: "#ddd"
          texture-color1: "#333"
          texture-color2: "#000"
          background-color: "#222"

  backgroundeffect: radial-gradient(farthest-corner at 50% 100%, var(--maincolor1) 30%, var(--maincolor2) 90%)
  styleeffect: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.15) 10%, rgba(255, 255, 255, 0.15) 50%, rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.25))
  totaleffect: var(--styleeffect), var(--backgroundeffect)

My problem is here, I want to define the main colors as they define the single themes. But after the “tree” of basic colors I want to go over to the common values. And then I got an configuration error as values like backgroundeffect ff are not in a tree but as values line by line.

When I can’t fix this I think about

  1. duplicate the whole code for every theme (as it is working now)
  2. copying the common values into the tree

Both solutions will blow up the themes and will make it hard to read.
So I’m happy to get a little help on start to configure the yaml. I will not write the code into the configuration yaml, so I already created the themes in the theme folder. This was easy as there were other HACS themes installed before.

2

So after a while i found enough settings to make a theme whole.

While I separated most of the variables i found out that the admin panel and the dashboards/user frontend use so much common variables that it is hard to make user friendly dashboard without crushing the admin panel. Or they are connected in a weird way.

This is a very hard example.
mdc-data-table {
background-color: var(–mdc-theme-surface, #fff);
When you style a table or list on a card, in the admin panel the hovered selectlist comes up with a transparent background and you can’t read it anymore.
I also don’t know why the style from the table background crushes the selection panel background so hard that it can’t show a default background color anymore.

I recommend to split up the configuration that you can reference variables (like var(–xy-background) from the admin panel to the frontend but keep the possibility to have them independent.

Also I found out that you can’t choose between light and dark for a theme in the cards menu.