Personnalisation et astuces d’affichage avec card_mod

Pourquoi card_mod est indispensable

card_mod permet de modifier le style CSS de n’importe quelle carte dans Home Assistant Lovelace. Cela inclut :

• la taille et le style des polices,
• la gestion des marges et espacements,
• la suppression des bordures ou des arrière-plans,
• l’alignement du texte,
• l’opacité et la hiérarchie visuelle.

C’est la couche de vernis qui fait passer un dashboard de "fonctionnel" à "fluide et élégant".

Quelques principes visuels appliqués à mon Magic Mirror

✅ 1. Suppression des bordures

Par défaut, les cartes Lovelace ont une bordure et un fond légèrement gris. Sur un écran mural sombre, cela crée un effet de "boîte empilée" peu harmonieux. J’ai donc systématiquement supprimé bordures et fonds :

card_mod:
  style: |
    ha-card {
      border: none !important;
      background: transparent !important;
      box-shadow: none !important;
    }

✅ 2. Taille des polices adaptée à la distance

Un miroir connecté est lu à 1 à 2 mètres, voire plus. J’ai donc augmenté les polices selon l’importance :

• 5rem pour l’heure ou la température du jour,
• 2rem à 2.5rem pour les titres ou les éléments secondaires,
• 1.4rem minimum pour tous les textes (événements, entités, légendes).

Exemple :

card_mod:
  style: |
    * {
      font-size: 1.43rem;
    }
    .name {
      font-size: 1.75rem;
      opacity: 0.6;
    }

✅ 3. Mise en page verticale et alignements

Sur certaines cartes comme la météo, j’ai réorganisé les éléments horizontalement ou verticalement selon leur nature, à l’aide de flexbox ou grid :

.info {
  flex-direction: column !important;
  align-items: flex-start !important;
}
.name-state, .temp-attribute {
  width: 100%;
  text-align: left;
}

Cela permet d’éviter des coupures de texte ou des espacements incohérents.

✅ 4. Hiérarchie visuelle par opacité

Quand tout est en gras et blanc, rien n’émerge. Pour faire ressortir les informations importantes tout en gardant les autres lisibles, j’utilise l’opacité CSS :

#moment-0 {
  opacity: 1 !important;
}
#moment-2 {
  opacity: 0.5 !important;
}

J’applique souvent :

• opacity: 1 → élément principal (heure, jour)
• opacity: 0.6 → données complémentaires
• opacity: 0.3 → légendes ou secondes

Astuce bonus : structurer une vertical-stack comme une section

Tu peux utiliser card_mod pour espacer les cartes, ajouter des titres, ou simuler des "blocs" sans bordure :

type: vertical-stack
cards:
  - type: markdown
    content: |
      ## Températures intérieures
    card_mod:
      style: |
        ha-card {
          background: transparent;
          border: none;
          font-size: 2.2rem;
          font-weight: bold;
          padding-left: 0.5rem;
        }
  - type: entities
    ...

Résultat : un affichage élégant et reposant

En combinant ces personnalisations :

• toutes les pages de mon tableau de bord ont un aspect unifié,
• la lisibilité est optimale,
• l’interface semble "faite pour être affichée", pas simplement fonctionnelle.

L’esthétique contribue à rendre l’objet présent dans la maison, presque décoratif, tout en restant utile.

À suivre…

Dans le dernier article de la série, je vous proposerai quelques idées pour aller plus loin : affichage dynamique selon l’heure ou la présence, nouvelles cartes à tester, intégrations avec d’autres outils comme MQTT, etc.

Et si vous souhaitez personnaliser votre propre Magic Mirror, card_mod sera clairement votre meilleur allié.