Invert icon color/state

[Mithrox]

Hi.

I just found this addon and it looks awesome, really enjoy setting up some simpler views than before. One question I have though. I have a sensor (door/window) which I use to check a state of an item. The problem is that it shows "Closed" and dark icon, while when it's "Open" the icon lights up. My logic here is that it should be "On" when closed (or "Seated") and when the sensor is open "On", it should be dark icon and "Unoccupied" for text.

Is there a simple way to invert the icon, and possibly change status text based on this above logic?

I am very new to coding, so even Yaml is a tad tough from the start, but I am using examples and trying to understand.

[Mithrox]

I made half of this work, by using this code:

type: entities
entities:
  - type: custom:paper-buttons-row
    buttons:
      - entity: switch.stol_kontor
        layout: icon|state
        state_icons: 
          "off": mdi:account
          "on": mdi:chair-rolling
        state_text:
          "off": Seated
          "on": Away
        name: false

Now the only issue is that the "mdi:account" icon is dark while the "mdi:chair-rolling" icon is yellow, or "active". This is what I would have liked to change around so that the first one is active (yellow) while the second is dark.

Edit: The code above comes out wrong even if I use <code" formatting, but the text is correct so it should be fine.

[jcwillox]

You can use state_styles to achive this, this will invert the active/inactive colors

state_styles:
  "off":
    button:
      color: var(--paper-item-icon-active-color)
  "on":
    button:
      color: var(--paper-item-icon-color)

lovelace-paper-buttons-row#using-style-and-state_styles

On another note you can use three backticks for code formatting on Github, e.g.

```yaml
type: entities
```

[Mithrox]

Hi @jcwillox

Does that mean that the following code should have reverted the states for the icon?

type: entities
show_header_toggle: false
entities:
  - type: custom:paper-buttons-row
    buttons:
      - entity: input_boolean.skole_ferie
        layout: icon|state
        state_icons:
          'off': mdi:chair-school
          'on': mdi:home-outline
        state_text:
          'off': Skole
          'on': Ferie
        state_styles:
          'off':
            button: null
            color: var(--paper-item-icon-active-color)
          'on':
            button: null
            color: var(--paper-item-icon-color)

When it's in off mode, it's still off, wondering if I should have changed something else in the text there too?

[jcwillox]

That shouldn't be affected it was only if you were using state templating like state: { attribute: foo }

[Mithrox]

Sorry but I don't quite understand your last comment there. My point above is that I am using that code, but it still does not show the "opposite" color, as in colored when off and non-colored when on. Did I get it wrong in the code or is there something else preventing it from working correctly?

[jcwillox]

Don't worry it doesn't apply in your case, I see what the issue was you are not indenting the color option correctly it should look like this.

type: entities
show_header_toggle: false
entities:
  - type: custom:paper-buttons-row
    buttons:
      - entity: input_boolean.test
        layout: icon|state
        state_icons:
          'off': mdi:chair-school
          'on': mdi:home-outline
        state_text:
          'off': Skole
          'on': Ferie
        state_styles:
          'off':
            button:
              color: var(--paper-item-icon-active-color)
          'on':
            button:
              color: var(--paper-item-icon-color)

[Mithrox]

Hi @jcwillox, that worked! Thank you :)

Now, is it possible to use other colors than those on/off colors with paper-buttons or is it restricted to those two colors? For this one it's not a problem, but I also have some door-locks that would be great to mark as red or green depending on state.

Edit: Forget this answer, I found it :)