_common_colors, _common_uixs, etc. as selectable themes in the theme picker

[coarsy]

Hi everyone,

I'm currently migrating my custom theme from card-mod to UIX and I'm using YAML anchors to avoid duplicating common configuration.

_common_colors: &common-colors
  ...

_common_uixs: &common-uixs
  ...

Chris Blue:
  <<: *common-uixs
  uix-theme: "Chris Blue"

Chris Red:
  <<: *common-uixs
  uix-theme: "Chris Red"

Unfortunately, Home Assistant shows _common_colors, _common_uixs, etc. as selectable themes in the theme picker.

I know this is caused by Home Assistant treating every top-level YAML key as a theme, but I was wondering:

Is there a recommended UIX pattern to keep reusable YAML anchors/helper blocks without them appearing in the theme selector?

Or is the recommended approach simply to duplicate the shared configuration and avoid anchors completely?

How are other UIX theme authors solving this?

Thanks!

[Mariusthvdb]

you can check my gists where I have a themes.yaml file and a uix-themes.yaml file

[coarsy]

Hi Marius, thanks a lot for your template files, but I don't see the point. Are macros the thing I need to reuse my common and colors parts everywhere?

[Mariusthvdb]

without having a look at your yaml, I cant tell what you have there.

I use 'generic' settings in my main themes file, so maybe check that out?

I can confirm that the builtin HA theme picker sees these as 'themes'

if you don't want that, you can do 2 things:
1 use a helper select and only list the options you care to choose from:

2 define the anchors differently, with a <<: &generic_colors and inject with <<: *generic_colors
( use an indent under the <<: line )
that way they wont be at the top hierarchy, and not picked up by the theme picker

as a matter of fact, I think I will redo that myself also, because it is just ugly to see that happening.

Ive always had it that way before, and changed only recently, trying to make the first theme that define that anchor more readable (having an 'anchor' section) and all real themes below that. Now that I realize this, I believe that outcome is worse than the fix of nice yaml....

so, instead of section with

generic-theme-anchor: &generic

  # ─────────────────────────────────────────────
  #  UIX in themes
  # https://uix.lf.technology/using/themes/
  # ─────────────────────────────────────────────
  uix-theme: theme-mods

do this in the first theme that uses it

My new theme:

  <<: &generic
    # ─────────────────────────────────────────────
    #  UIX in themes
    # https://uix.lf.technology/using/themes/
    # ─────────────────────────────────────────────
    uix-theme: theme-mods

    primary-color: red

My other theme:

  <<: *generic

[coarsy]

Thanks Marius! I think I understand the first option (using a helper), but I'm very interested in the second one.

Could you show a minimal YAML example of what you mean by:

"define the anchors differently, with a <<: &generic_colors and inject with <<: *generic_colors"

I'm currently doing:

_common_colors: &common-colors
  primary-color: red
  accent-color: blue

My Theme:
  <<: *common-colors

but _common_colors appears as a selectable theme.

I'd love to see the structure you're referring to, because I can't quite picture where the &generic_colors anchor is defined without becoming a top-level theme.

[Mariusthvdb]

see above, just define the anchor inside the first theme that uses it (assuming you have all themes I a single yaml file ..... otherwise this wont work)

[Mariusthvdb]

btw, this yaml in themes has nothing to do with UIX..
my suggestion would be to move to the community for further support on the matter

[coarsy]

Allright, I think I understand the point. Thanks a lot for clarifying and have a nice weekend!

[coarsy]

Hi Marius,

thanks a lot for sharing this simple trick for me. It really works and I'm able to make a complete list of all anchors like this:

Chris Red:
  <<:
    - &common-colors
      # Text Colors
    - $common-modes
      # All Modes

[Mariusthvdb]

I am not familiar with that syntax but cool you got it working.

Thx for reporting back!