Help simplifying code for theme element

Configuration Frontend
1

I use quite a few dividers in my ui-lovelace.yaml, and wondered if I could simplify the code by adding some of the parameters to my themes.yaml file instead of ui-lovelace.yaml

Here’s the code I use in ui-lovelace.yaml

      - type: divider
        style:
          height: 1px
          width: 80%
          margin-left: auto
          margin-right: auto
          margin-top: 5px
          margin-bottom: 5px
          background: "var(--divider)"

And here's the code I use in themes.yaml 
divider: '#454b57'

Anyone know how I could change it so that the details are in themes.yaml?
2

Use yaml anchors. You’ll be able to set that whole chunk as a name, then use the name wherever you want the divider.

1 Like
3

Thanks, this look like just the thing I need!

I’ve been trying to setup an anchor for this but have struggled to get it to work for my use case (as I haven’t done this before).

Do you know how I’d do it for my code posted above?

4 
anchors:
  my_anchor_divider: &divider
    type: divider
    style:
      height: 1px
      width: 80%
      margin-left: auto
      margin-right: auto
      margin-top: 5px
      margin-bottom: 5px
      background: "var(--divider)"

then in code

  - <<: *divider

the &divider is the creation of the anchor, and the name.

the <<: *divider is using it.

1 Like
5

Thanks a lot!

I’m now trying to add it to my config but struggling to get the code to validate.
Should the ‘anchors:’ code go in configuration.yaml, themes.yaml, or ui-lovelace.yaml? (Or somewhere else?)

6

lovelace, at the top

1 Like
7

Brilliant! Thanks a lot! (again)