Colors of objects on the screen, according to theme

Configuration Frontend
1

Hello everyone!

I have done some things on my screen through the new edition lovelace.

However, I’m having a problem that I can not solve. How do I make buttons created by me, assume the colors of the themes?
Because whenever I change a theme, the buttons I created, stay with the colors fixed, I would change according to the theme. It’s possible ?

See the buttons created through some cards.

cards:
  - content: |
      ## Ar-condicionado - Sala
    type: markdown
  - cards:
      - action: toggle
        color: 'rgb(135,191,80)'
        color_off: 'rgb(135,191,80)'
        entity: script.1551658655672
        icon: 'mdi:power'
        size: 90%
        style:
          - line-height: 80pt
          - font-weight: bold
          - margin-bottom: 0px
          - text-transform: none
          - padding-bottom: 10px
          - padding-top: 10px
          - height: 50px
        type: 'custom:button-card'
      - action: toggle
        color: 'rgb(135,191,80)'
        color_off: 'rgb(135,191,80)'
        entity: script.1551659923607
        icon: 'mdi:power-off'
        name: null
        size: 90%
        style:
          - line-height: 80pt
          - font-weight: bold
          - margin-bottom: 0px
          - text-transform: none
          - padding-bottom: 10px
          - padding-top: 10px
          - height: 50px
        type: 'custom:button-card'
    type: horizontal-stack
  - cards:
      - action: toggle
        color: 'rgb(135,191,80)'
        color_off: 'rgb(135,191,80)'
        entity: script.1551803013811
        icon: 'mdi:chevron-double-up'
        name: null
        size: 90%
        style:
          - line-height: 80pt
          - font-weight: bold
          - margin-bottom: 0px
          - text-transform: none
          - padding-bottom: 10px
          - padding-top: 10px
          - height: 50px
        type: 'custom:button-card'
      - action: toggle
        color: 'rgb(4,231,98)'
        color_off: 'rgb(135,191,80)'
        entity: script.1551658814106
        icon: 'mdi:chevron-double-down'
        size: 90%
        style:
          - line-height: 80pt
          - font-weight: bold
          - margin-bottom: 0px
          - text-transform: none
          - padding-bottom: 10px
          - padding-top: 10px
          - height: 50px
        type: 'custom:button-card'
    type: horizontal-stack
  - cards:
      - action: toggle
        color: 'rgb(135,191,80)'
        color_off: 'rgb(135,191,80)'
        entity: script.1551658889148
        icon: 'mdi:alpha-s-circle-outline'
        name: null
        size: 90%
        style:
          - line-height: 80pt
          - font-weight: bold
          - margin-bottom: 0px
          - text-transform: none
          - padding-bottom: 10px
          - padding-top: 10px
          - height: 50px
        type: 'custom:button-card'
      - action: toggle
        color: 'rgb(135,191,80)'
        color_off: 'rgb(135,191,80)'
        entity: script.1551803071738
        icon: 'mdi:music-note-off'
        size: 90%
        style:
          - line-height: 80pt
          - font-weight: bold
          - margin-bottom: 0px
          - text-transform: none
          - padding-bottom: 10px
          - padding-top: 10px
          - height: 50px
        type: 'custom:button-card'
    type: horizontal-stack
type: vertical-stack

How to automate to change the colors of the buttons according to the theme?

2

I think I found it. Just change the color by the variable …

var (- text-color)

3

Yes that is exactly correct.

1 Like