Couleur dans module Energie : special Tempo

Salut,

Pour information, depuis la mise a jour de septembre ( 2023.9.x), on peut changer la couleur de chaque sensor du module énergie, surtout utile pour les gens sous « tempo »

Voici un exemple de comment faire, via l’édition de configuration.yaml :

  themes:
    theme_sansbordure:
      ha-card-border-width: 0
      # Bleu nuit: HC Bleu
      energy-grid-consumption-color-0: '#0f056b'
      # Bleu -magenta : HP Bleu
      energy-grid-consumption-color-1: '#3737e9'
      # Gris: HC Blanc 
      energy-grid-consumption-color-2: '#cccccc'
      # Blanc : HP Blanc
      energy-grid-consumption-color-3: '#fff'
      # Rouge sang: HC Rouge
      energy-grid-consumption-color-4: '#850606'
      # Red : HP Rouge
      energy-grid-consumption-color-5: '#E60000'
      # Standard : Tarif Base
      energy-grid-consumption-color-6: '#9eb75c'
      modes:
        light: {}
        dark: {}

PS: penser bien a mettre la couleur en hexadécimal et pas autrement sinon des choses ne vont pas fonctionner
PS2: ça change pas (encore) dans l’affichage « source » mais c’est prévu.

4 « J'aime »

Hello Roumano
Je ne trouve pas cette nouveauté dans la release notes de septembre.
Je ne trouve pas non dans quel menu on peut affecter ces couleurs pour les sensors utilisés dans le module energy
Tu peux en dire plus ?
Merci
Phil

1 « J'aime »

tu édite ton fichier configuration.yaml, dedans, tu a, ou tu crée une section frontend comme celui-ci :

frontend:
  themes:
    theme_sansbordure:
      ha-card-border-width: 0
      energy-grid-consumption-color-0: darkblue
      energy-grid-consumption-color-1: blue
      energy-grid-consumption-color-2: darkblue
      energy-grid-consumption-color-3: white
      energy-grid-consumption-color-4: darkred
      energy-grid-consumption-color-5: red
      modes:
        light: {}
        dark: {}

Puis tu clique sur Outil de configuration / Yaml / Recharger tout la configuration yaml

Puis sur ton profil, tu choisi ce nouveau profil crée :

Salut,
la nouveauté est annoncer dans le frontend et pas dans le core :wink:

20230830.0

What’s Changed

  • Allow theme colors for individual sets in energy-usage-graph-card (#17527) @karwosts

Salut,
merci pour l’information que j’ai pas vu passer.
Par contre je n’est que la couleur des bars qui change, mais pas celle des sources.
C’est pareille chez vous ?

Super ça fonctionne
Merci
Il faut que j’adapte un peu car je n’ai pas entré mes sensors dans le même ordre
Par contre tu as 2 fois dark blue dans ton exemple. Tu as utilisé quel autre White a la place ?
Phil

Oui ça fait pareil de mon côté .
Je pense que ce n’est pas prévu

1 « J'aime »

j’ai tester ca:

  energy-grid-consumption-color-0: red
  energy-grid-consumption-color-1: green
  energy-grid-consumption-color: red

résultat: :rofl:

Avec la carte source, j’ai pu modifier les couleurs avec card_mod. Mais impossible dans le dashboard énergie.

  - type: energy-sources-table
    card_mod:
      style: >
        ha-card > div > div > table > tbody > tr:nth-child(1) >
        td.mdc-data-table__cell.cell-bullet > div {
          background: red !important;
        } 
        ha-card > div > div > table > tbody > tr:nth-child(2) >
        td.mdc-data-table__cell.cell-bullet > div {
          background: green !important;
        }       

Pour ceux qui ont un abo tempo, faudras ajouter en plus pour les autre couleur en modifiant tr:nth-child(2) par tr:nth-child(3), tr:nth-child(4)

Finalement j’y suis arriver pour modifier la couleur dans le dashboard énergie :wink:
Toujours avec card_mod, mais directement par le thème:

mushroom_noshadow:
  ha-card-border-width: 0
  energy-grid-consumption-color-0: '#FF0000'
  energy-grid-consumption-color-1: '#00b300'
  card-mod-theme: mushroom_noshadow
  card-mod-card: |
    ha-card > div > div > table > tbody > tr:nth-child(1) >
    td.mdc-data-table__cell.cell-bullet > div {
      background: #FF0000 !important;
    } 
    ha-card > div > div > table > tbody > tr:nth-child(2) >
    td.mdc-data-table__cell.cell-bullet > div {
      background: #00b300 !important;
    }       
  modes:
    light: {}
    dark: {}

Résultat:

Edit:
Correction des couleurs en hexadécimal.

Pour les sources, la merge request n’est pas arriver a temps , … Cela devrait etre le cas pour la version 2023.10.

Par contre, je vient de voir une info qu’il faut pas mettre des noms de couleurs mais les codes hexadécimal sinon des choses ne vont pas fonctionner comme il faut (il faut donc mettre comme ca: energy-grid-consumption-color-0: '#00007D'

Ok, je vais modifier les couleur en hex.
Je continu a utiliser card_mod pour les sources en attendant le fix.

Bon j’ai réussi aussi
Dans configuration.yaml j’ai ajouté

frontend:
  themes: !include_dir_merge_named themes/

Et j’ai un répertoire themes dans lequel j’ai ajouté un fichier linky_colors.yaml ( peu importe le nom.yaml) dans lequel j’ai ça

ˋ``
theme_sansbordure:
ha-card-border-width: 0
energy-grid-consumption-color-0: darkblue
energy-grid-consumption-color-1: blue
energy-grid-consumption-color-2: lightgrey
energy-grid-consumption-color-3: white
energy-grid-consumption-color-4: darkred
energy-grid-consumption-color-5: red

  #energy-battery-in-color
  #energy-battery-out-color
  #energy-gas-color
  #energy-grid-return-color
  #energy-non-fossil-color
  #energy-solar-color
  #energy-water-color
  
  modes:
    light: {}
    dark: {}
J’ai préparé pour les autres possibilités pour l’eau et le gaz 

Je ne touche pas au lignes de sensors dans la carte energy car je préfère attendre le support natif ( PR en cours )

La galère c’est de mettre dans le bon ordre !

Et j’ai un gros doute sur la lisibilité des couleurs blanches en fond d’écran blanc 

Merci à tous et plus particulièrement @roumano qui a initié cette possibilité ( que je trouve quand même assez confidentielle à la lecture de la release note !

Phil
![IMG_3665|347x500](upload://2q9OI8ASEfUfmnwycufyPDj6Hnp.png)

Avec plaisir, par contre je te conseil de transformer tes couleurs en code hexadécimal, cf info de celui qui a fait l’évolution :

Also I would maybe recommend using hex colors instead of color names. If you use names it sort of looks like it works but the bar borders, tooltips, and comparison bars don’t color correctly, since they do some raw manipulation by adding alpha values to the hex codes from the theme.

Ok j’ai suivi le débat aussi
Ça donnerait ça en équivalent


  theme_sansbordure:
      ha-card-border-width: 0
      energy-grid-consumption-color-0:  '#00008B'
      energy-grid-consumption-color-1:  '#0000FF'
      energy-grid-consumption-color-2:  '#D3D3D3'
      energy-grid-consumption-color-3:  '#FFFFFF'
      energy-grid-consumption-color-4:  '#8B0000'
      energy-grid-consumption-color-5:  '#FF0000'
      
    
      
      #energy-battery-in-color
      #energy-battery-out-color
      #energy-gas-color
      #energy-grid-return-color
      #energy-non-fossil-color
      #energy-solar-color
      #energy-water-color
      
      modes:
        light: {}
        dark: {}

Phil

Vous savez si il y a moyen de recharger les themes sans arrêt/relance ?

EDIT: j’ai trouvé :

1 « J'aime »

C’est bon a savoir, ça, sinon un moyen un peut plus barbare mais assez rapide car pas besoin de redémarrer totalement HA : Outil de configuration / Yaml / Recharger tout la configuration yaml.

Cette méthode fonctionne dans beaucoup de cas :wink:

Avec la release de novembre ( bêta dispo depuis ce matin) ça fonctionne pour l’électricité le gaz et l’eau


  theme_sansbordure:
      ha-card-border-width: 0
      energy-grid-consumption-color-0:  '#00008B'
      energy-grid-consumption-color-1:  '#0000FF'
      energy-grid-consumption-color-2:  '#D3D3D3'
      energy-grid-consumption-color-3:  '#FFFFFF'
      energy-grid-consumption-color-4:  '#8B0000'
      energy-grid-consumption-color-5:  '#FF0000'
      
    
      
      #energy-battery-in-color
      #energy-battery-out-color
      energy-gas-color-0:  '#8B4513'
      #energy-grid-return-color
      #energy-non-fossil-color
      #energy-solar-color
      energy-water-color-0:  '#00FFFF'
      
      modes:
        light: {}
        dark: {}

Salut,
pour l’énergie, c’est les bars et les petit rectangle ( encadrer en rouge ) de conso et prix qui change de couleur sur la beta de novembre ?
en septembre il y avait que les bars.
image

C’est l’ensemble bar plus noms des bars plus le gaz et l’eau qui fonctionnent maintenant
Le PR est passé depuis les versions dev d’octobre .
Mais les développeurs ne l’ont même pas mis dans la pre release note !
Ils trouvent que ce n’est pas assez user friendly
J’essaie d’insister sur le canal bêta actuel

1 « J'aime »