Is there a way to define some common variables for styling across multiple yamls?

Configuration Frontend
1

Hello everyone: I’m refactoring the code in frontend (apologies for many questions), and would like to ask if there is a way to define some common string literal and reuse them to control the style of different parts/yamls of the ui?
For example I have code like:

card_mod:
    style: |
      /* Position host element */
      :host {
        position: absolute;
        top: 74.5%;
        left: 72%;
      }

      /* Default desktop appearance */
      ha-state-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(1px);
        opacity: 1;
        --mdc-icon-size: 24px;
      }

      /* Mobile: smaller icon, hide background */
      @media (max-width: 749px) {
        ha-state-icon {
          width: 25px;
          height: 25px;
          --mdc-icon-size: 15px;
          background-color: transparent;
          backdrop-filter: none;
        }
      }

Would be nice to define things like colour rgba(255, 255, 255, 0.1), mobile screen size 749px, size of icons etc. I also have some conditional label changes color based on value and I currently have to remember the colour code of green, blue, red, orange to make them the same.
I’m aware in yaml there is no variable concept, but is there a way to do so with css?

2

You can define custom css variables on a theme or external JS file.

3

Have you seen card mod themes, specifically?

4

Yes, for reusing string constants used in card mod you can use custom css variables, for reusing (actually - for mass-styling) complete styles for cards you may use card mod themes as Pieter suggested.

5

An off topic, but personally me do not suggest to use card/mod themes (or suggest to use them in limited scope) due to a comparingly long delay. External JS works much faster, instantly applied. But this requires more efforts probably.

2 Likes
6

Thanks, not sure I understand all what you wrote but will try to search for more info.
One question though: if I define my own theme for the dashboard, does it lose day/night modes which HA offers? For me I just want some place with constants that I can refer to I don’t intent to interfere day/night modes. Is it archievable?

7

Create a custom theme like:

my_theme:
  modes:
    light:
      my-favourite-color:  black
    dark:
      my-favourite-color:  white

Then a default theme will be “enriched” with your new variable.

1 Like
8

Note that in some cases using so called “custom templates” (macros in fact) is a better way.
If you need to add these styles in many places:

color: red;
padding: 0;

just create a macros like

{% macro xxxxxx -%}
color: red;
padding: 0;
{%- endmacro %}

and then call it like:

ha-card {
  … many styles 
  {% from “xxx.jinja” import xxxxx -%}
  {{xxxxx}}
}

Also, this can be used where needed:

{% macro yyyyy -%}
ha-card {
  color: red;
  padding: 0;
}
{%- endmacro %}

and then call it like:

some_element {
  … many styles
}
{% from “yyy.jinja” import yyyyy -%}
{{yyyyy}}
1 Like
9

Card-mod 2.0 introduced this. I use them extensively - now. Might not be after the next version is released. The beta version is a mess of unneeded and unwanted changes.

10

Hi @Ildar_Gabdullin :

With your hint I think I found another way to do this.
I added a custom css which looks like this:

:root {
  --test-bg: rgba(0,0,0,0.5);
  --test-active: #ffa600;
  --test-width: 749px;

}

Add this as stylesheet resource and I seems to get it working except for width:

- &thermostat_base
  type: state-label
  entity: climate.bathroom_thermostat
  title: Bathroom Thermostat
  attribute: current_temperature
  suffix: "°C"
  style: &thermostat_style
    border-radius: 20px
    text-align: center
    background-color: var(--test-bg)
    backdrop-filter: blur(1px)
    opacity: 100%
    font-weight: bold
    font-size: 13px
    top: 27%
    left: 32.5%
  card_mod:
    style: |
      :host {
        color:
          {% if state_attr(config.entity, 'hvac_action') == 'heating' %}
            var(--test-active);
          {% else %}
            var(--state-icon-color);
          {% endif %}
      }
      /* 2. Responsive Font Size */
      @media (max-width: var(--test-width)) {
        :host {
          font-size: 10px !important; 
          background-color: transparent !important;
          backdrop-filter: none !important;
        }

So var(–test-width) doesn’t work not sure why, the other vars seems to work fine.
Hope you don’t mind a question: is there away that I know if I’m in light or dark mode? I might need to define 2 background colour depending on its light or dark mode but need a way to tell. Thanks

11

This was explained in the fantastic post - others - dark / light.

Note that this thread is about to expand to more topics))
Suggest to mark as solved with selecting an appropriate solution post. Of course we can continue discussing here.

As for a test-width - not sure if variables can be used in mediaquery, cannot test myself.

12

Beg your pardon, Tom, but I’m not sure what you mean here — I’m really surprised you chose those words.

Beta 4 has fixed almost all (if not all) of the standing issues and, yes, introduced a great deal of new functionality. It’s what 3.5.0 briefly was — this time without the issues. And more.

Most importantly, it’s completely up to date with the current HA Frontend changes, and there have been plenty of those. I’d say that’s quite an accomplishment.

I’m not going to quote the release notes, but it’s certainly not unwanted, unneeded, or a mess.

Just give it another look — you’ll notice that the card-mod theme adjustments are actually very minor.

1 Like