card-mod: estilos CSS en cualquier tarjeta, según el estado

Descripción general

card-mod permite añadir CSS a casi cualquier tarjeta del panel, oficial o de HACS: colores, bordes, tamaños de letra, fondos, animaciones… Los estilos admiten plantillas Jinja2, así que pueden cambiar según el estado de la casa. También sirve para crear temas y retocar la barra lateral.

Tarjeta de entidades de luces con los nombres en rojo gracias a card-mod — El ejemplo más sencillo: el texto de una tarjeta en rojo.

Tarjeta Markdown con fondo verde azulado y un subtítulo en morado — Fondo y títulos de una tarjeta Markdown cambiados.

Imágenes: card-mod de thomasloven, licencia MIT.

Requisitos

HACS → «card-mod» → Descargar y recarga el navegador.
Opcional pero recomendable: cárgalo también como módulo del frontend para que se aplique más rápido. Añade a configuration.yaml la misma URL que HACS puso en Ajustes → Paneles → ⋮ → Recursos (algo como /hacsfiles/lovelace-card-mod/card-mod.js?hacstag=…) y reinicia:

frontend:
  extra_module_url:
    - /hacsfiles/lovelace-card-mod/card-mod.js?hacstag=12345678901

Algo de CSS básico.
Repositorio: thomasloven/lovelace-card-mod.

Ideas de uso

Resaltar una puerta abierta con un borde rosa. Es el ejemplo de abajo.
Los colores de tu casa (o de NODARA) en todas las tarjetas con un tema card-mod.
Iconos que parpadean cuando hay una alarma o una fuga de agua.
Ocultar el título o los bordes de tarjetas que van dentro de pilas, para un panel más limpio.
Letra más grande en la tableta de la cocina.
Fondo rojo en la tarjeta de temperatura si el congelador pasa de −10 °C.
Barra lateral con tu logo y colores, si lo cargas como módulo del frontend.

Ejemplo de uso

Objetivo: que la tarjeta de la puerta de entrada se marque con un borde y un fondo rosa mientras esté abierta.

type: tile
entity: binary_sensor.puerta_entrada
card_mod:
  style: |
    ha-card {
      border-radius: 18px;
      {% if is_state('binary_sensor.puerta_entrada', 'on') %}
      border: 2px solid #D9467A;
      background: rgba(217, 70, 122, 0.10);
      {% endif %}
    }

Cómo funciona:

card_mod.style es CSS que se inyecta en la tarjeta. ha-card es el contenedor de casi todas.
Las plantillas Jinja2 ({% if %}) se evalúan en Home Assistant y se actualizan solas cuando cambia el estado.
Puedes usar las variables CSS de los temas: color: var(--primary-color);.
Al añadir card_mod, aparece un icono de pincel junto al editor visual: esa parte solo se edita en YAML.
Para elementos internos de tarjetas complejas, card-mod permite navegar por su estructura (consulta su documentación).

Acción

Se abre binary_sensor.puerta_entrada

Resultado

La tarjeta muestra borde y fondo rosa
y vuelve a la normalidad al cerrarse