search

jcwillox / lovelace-paper-buttons-row

Adds highly configurable buttons that use actions and per-state styling.
MIT License
310 stars 10 forks source link

Question about icon and name colour defaults and themes #77

Open sddgit opened 2 years ago

sddgit commented 2 years ago

Please forgive the probably basic questions, and I hope it’s OK to ask them here.

To date, I’ve been using standard HA button cards. I then tried button rows within the standard Entities card, but wasn’t too keen on the results. Then somebody suggested this card, and it certainly seems to fit the bill. However, I am a little confused about the default icon and button name colours, and how they react to theme changes.

For example, the default colour seems to be blue. And this doesn’t change when the ios system or browser changes to dark mode. By contrast, the standard button card has black text, and this automatically changes to white in dark mode, making it very readable. I understand that I have full control over colours of individual elements using paper, but how do I change what the overall defaults are (to save having to configure every button), and have them react to dark mode?

Thank you.

jcwillox commented 2 years ago

Fair question, I might consider changing the behaviour for better parity with the builtin buttons. Anyways by default the icon/text will be coloured with --paper-item-icon-color and when active will use --paper-item-icon-active-color. The builtin buttons are likely just using --primary-text-color which will change with light/dark themes. To change the colors you can override those CSS variables in your theme or use styles/base_config, here are some examples.

type: custom:paper-buttons-row
styles:
    --paper-item-icon-color: red
    --paper-item-icon-active-color: green
buttons:
  - entity: light.bedroom_light

or using state styles

type: custom:paper-buttons-row
base_config:
  state_styles:
    "on":
      # override for the entire button
      button:
        color: yellow
      # or override for the name only
      name:
        color: var(--primary-text-color)
    "off":
      button:
        color: var(--primary-text-color)
buttons:
  - entity: light.bedroom_light
sddgit commented 2 years ago

Thank you for that very helpful information! I'm currently toying with this:

type: entities
title: Pool
entities:
  - type: custom:paper-buttons-row
    base_config:
      styles:
        button:
          font-size: 15px
          height: 40px
          margin-bottom: 8px
          margin-left: 1%
          margin-right: 1%
          width: 100%
          border: 2px solid
          border-radius: 15px
          justify-content: center
        name:
          color: var(--primary-text-color)
        ripple:
          color: grey
    buttons:
      - entity: input_boolean.pool_sweep_requested
        name: Sweep
        layout: icon_name
      - entity: input_boolean.pool_chlorinator_requested
        name: Chlorinator
        layout: icon_name
      - entity: switch.pool_filter
        name: Filter
        layout: icon_name
      - entity: input_boolean.test
        name: Test
        layout: icon_name
state_color: true

and it's brought up a couple more questions (sorry!). I find that the button border colour moves in sync with the icon colour. Is that right? Can that be changed somehow with styles? (EDIT: found the border-colour attribute, so that's a yes!) I also find that when I enable, say, the Test button, its icon and border colours change together, but on another device (iPhone, iPad etc.) only the icon changes colour, not the border. So whichever device I press that button on gets the coloured border, but the others don't (unless I refresh the view). Not sure whose problem that is! EDIT 2: Seem to have got round that problem by having a separate state_style for the ON condition that specifically changes the border colour. Then the change is in sync across all devices.

I'm also trying to get the buttons to all be the same size everywhere. With a width of 100% (a tip from you I'd read elsewhere), they're all the same size on Mac and iPad, but the chlorinator button is wider on iPhone. Reducing the width all the way down to 20% makes them all the same size everywhere, with no visible difference on Mac/iPad. So I'm a bit confused as to what width actually means.

Thanks again for the help.

Protoncek commented 1 year ago

Hi! I just discovered this card and while testing it i found out that "--paper-item-icon-active-color" which should be deprecated still works, while other active state colors for some reason doesn't? I mean, if i set under styles: "--pbs-button-active-color: red" then active state doesn't change color, while above mentioned "deprecated" variable does. What am i doing wrong?