Ways of `mimicking` standard Lovelace elements in custom cards (like button-card), anyone?

Hi All,

I played for some time with a great custom button-card creating a card for my ventilation config.
What I noticed was the difference between font sizes Lovelace and button-card use to display entity’s name, for example:
Screen Shot 2020-03-31 at 07.39.15 (2)

and here’s the config

type: entities
  - type: custom:button-card
    entity: input_number.ventilation_1st_floor_bathroom_shower_humidity_gradient_threshold
    show_icon: false
  - entity: input_number.ventilation_1st_floor_bathroom_shower_temperature_gradient_threshold

As I wanted to have both standard and custom cards mixed within the Entities card, my goal was to have that “if greater than” string look the same in both input_number and button-card.
In fact, it was a bit bigger - as I use button-card and card-mod anyway, I wanted my custom card to look as close to standard Lovelace card as possible in terms of fonts and colours used (and it’s not limited by input_number, it’s just an example here).
And as it’s custom, it would allow to change it to something different as well (like font size of input_boolean's input field) :wink:

To achieve my goal I created several input_text sensor that hold default values for font size and color:

  initial: '14px'

  initial: 'var(--primary-text-color)'

  initial: '3rem'

and then I use them to create some button-card templates

    invalid_states: ['unknown', 'unavailable']
  template: var_const_states
    margin_left: 0

    current_font_size_entity_id: 'input_text.font_size'
    default_font_size: 'var(--paper-input-container-shared-input-style_-_font-size)'

      # set space between input field and name
      - margin-left: >-
          [[[ return variables.margin_left ]]]
      - margin-right: 3px
    # set standard font size and color
      - font-size: >-
            var val = states[variables.current_font_size_entity_id];
            if (val === null || val.state === null || variables.invalid_states.includes(val.state)) return variables.default_font_size;
            return val.state;

As you can see, it pulls data from input_text and falls back to variables (overcomplicating things?)
And the beauty of using input_boolean here is that it can be accessed from any templateable card (like card-mod)/script and exposed in UI so one can change parameters on the fly/call set_value from an automation and voila, your card picks up changes immediately (well, at least button-card does).

So if I use that base_row as a template, I get a better result
Screen Shot 2020-03-31 at 07.42.20 (2)

Currently the step I’m missing is how to initialise that input_texts so they hold current (or default) Lovelace values? I.e instead of setting initial (which will reset them on every HA restart) I’d prefer to pull it from Lovelace.

It might be possible to do so from within button-card, for example, as it allows to execute Javascript code so things like querySelector can be used (I can grab font-size of “html”) but I’m not a web designer and at the moment it looks like it would be difficult to dive into shadow DOM to find that information - happy to be wrong here, please show me how!

tl/dr is there any way to store attributes’ values Lovelace uses to display its elements in input_text apart from hard coding them? I had an informative discussion with @RomRider about it, but maybe people like @Bram_Kragten, @thomasloven, @iantrich, @petro or anyone else knowledgeable (I believe there are many of them here) can chime in and guide me a little bit? :wink:

Thanks for reading.

p.s There is a good source of default values here, which I’ll hard code if there is no other option.

I guess I don’t understand your question. What’s your main goal here?

If in an Entity card I put things like input_boolean and custom:button-card together, I want custom:button-card to use the same font/color/etc so they blend well and not stand out.

Ah ok, it’s probably best to see where the cards get the info from. You don’t need to store it, you just need to use it.


  1. Chrome as a browser

So take a look at this guide here. It shows you how to inspect elements and figure out where the colors and styles come from.

Now if you want to use them as variables, some of them are accessible some are not. If the name of the item starts with --, you can use var. If it does not, you cannot and it must be hard coded.

There may be a way to access the front end objects too, but that would be on a per card basis. I don’t think the button card gives access to it and it will vary per custom card.

Thanks for your reply.
I know how to find out where cards get the info from (actually, I presume that the best source in this case is that .ts file I linked at the bottom of my original post)

So your advise is just to use var(--xxx) where possible if I got it right.
I think in the case I’ll set my input_texts to those values rather than use them directly in every styling as it will let me change the value dynamically and globally if I wish so.

Yep, pretty much only colors at this point.

You can add your own --variables inside your theme. So in theory you could do that.

Thanks! I didn’t think about that but will find out more on how to do it first and if their addition would be beneficial.