Changement couleur text Card-Mod

Entraide Home Assistant
1

Bonjour,

J’ai rendu mes cards légérement transparent avec Card-Mod.

Du coup le texte des valeurs n’est plus suffisamment lisible

J’aimerai changé la couleur de texte de mes Cards en blanc,

voici le code utilisé d’une de mes card pour essayé de la changer.

card_mod:
  style: |
    ha-card {
      color: white;
      background-color: rgba(10,10,10,0.8);
      box-shadow: var( --ha-card-box-shadow, 0px 2px 1px -1px rgba(255, 255, 255, 0.2), 0px 1px 1px 0px rgba(255, 255, 255, 0.14), 0px 1px 3px 0px rgba(255, 255, 255, 0.12) );
    }

Voici une capture d’écran pour comprendre pourquoi changer la couleur

Sans titre
Sans titre1809×162 51.2 KB

merci

2

Salut…
Quelle est la question ? Quel est le problème ?

3

Hello,

Sans code et sans savoir quel type de card tu utilises, c’est d’autant plus compliqué.

Partage nous ton code complet, ce sera plus simple.

4

En résumé, j’ai rendu mes cards légèrement transparent avec card-mod, du coup les valeurs ne sont plus lisible.

J’aimerai changé le texte de valeurs en Blanc par exemple

Voici le code d’une de mes cards

square: true
columns: 7
type: grid
cards:
  - type: custom:mushroom-light-card
    card_mod:
      style: |
        ha-card {
          background-color: rgba(10,10,10,0.8);
          box-shadow: var( --ha-card-box-shadow, 0px 2px 1px -1px rgba(255, 255, 255, 0.2), 0px 1px 1px 0px rgba(255, 255, 255, 0.14), 0px 1px 3px 0px rgba(255, 255, 255, 0.12) ); 
        }
    entity: light.shelly_plus_1_cuisine
    tap_action:
      action: toggle
    fill_container: true
    use_light_color: false
    name: Cuisine
    layout: vertical
  - type: custom:mushroom-light-card
    card_mod:
      style: |
        ha-card {
          background-color: rgba(10,10,10,0.8);
          box-shadow: var( --ha-card-box-shadow, 0px 2px 1px -1px rgba(255, 255, 255, 0.2), 0px 1px 1px 0px rgba(255, 255, 255, 0.14), 0px 1px 3px 0px rgba(255, 255, 255, 0.12) ); 
        }
    entity: light.shelly_plus_1_salon
    tap_action:
      action: toggle
    fill_container: true
    name: Salon
    layout: vertical
  - type: custom:mushroom-light-card
    card_mod:
      style: |
        ha-card {
          background-color: rgba(10,10,10,0.8);
          box-shadow: var( --ha-card-box-shadow, 0px 2px 1px -1px rgba(255, 255, 255, 0.2), 0px 1px 1px 0px rgba(255, 255, 255, 0.14), 0px 1px 3px 0px rgba(255, 255, 255, 0.12) ); 
        }
    entity: light.shelly_plus_1_sejour
    tap_action:
      action: toggle
    name: Séjour
    fill_container: true
    layout: vertical
  - type: custom:mushroom-entity-card
    card_mod:
      style: |
        ha-card {
          background-color: rgba(10,10,10,0.8);
          box-shadow: var( --ha-card-box-shadow, 0px 2px 1px -1px rgba(255, 255, 255, 0.2), 0px 1px 1px 0px rgba(255, 255, 255, 0.14), 0px 1px 3px 0px rgba(255, 255, 255, 0.12) ); 
        }
    entity: switch.shelly_shellyplus1_441793aa8310
    tap_action:
      action: toggle
    name: Prise PC
    fill_container: true
    layout: vertical
  - type: custom:mushroom-entity-card
    card_mod:
      style: |
        ha-card {
          background-color: rgba(10,10,10,0.8);
          box-shadow: var( --ha-card-box-shadow, 0px 2px 1px -1px rgba(255, 255, 255, 0.2), 0px 1px 1px 0px rgba(255, 255, 255, 0.14), 0px 1px 3px 0px rgba(255, 255, 255, 0.12) ); 
        }
    entity: switch.shelly_shellyplus1_441793aa958c
    tap_action:
      action: toggle
    name: Chargeur
    fill_container: true
    layout: vertical
    icon: ''
  - type: custom:mushroom-entity-card
    card_mod:
      style: |
        ha-card {
          background-color: rgba(10,10,10,0.8);
          box-shadow: var( --ha-card-box-shadow, 0px 2px 1px -1px rgba(255, 255, 255, 0.2), 0px 1px 1px 0px rgba(255, 255, 255, 0.14), 0px 1px 3px 0px rgba(255, 255, 255, 0.12) ); 
        }
    entity: switch.shelly_shellyplus1_441793aa2e64
    icon: mdi:bell-ring
    tap_action:
      action: toggle
    name: Sonnette
    fill_container: true
    layout: vertical
  - type: custom:mushroom-entity-card
    card_mod:
      style: |
        ha-card {
          background-color: rgba(10,10,10,0.8);
          box-shadow: var( --ha-card-box-shadow, 0px 2px 1px -1px rgba(255, 255, 255, 0.2), 0px 1px 1px 0px rgba(255, 255, 255, 0.14), 0px 1px 3px 0px rgba(255, 255, 255, 0.12) ); 
        }
    entity: switch.meross_etage_outlet
    tap_action:
      action: toggle
    fill_container: true
    layout: vertical
    name: Étage
  - type: custom:mushroom-entity-card
    card_mod:
      style: |
        ha-card {
          background-color: rgba(10,10,10,0.8);
          box-shadow: var( --ha-card-box-shadow, 0px 2px 1px -1px rgba(255, 255, 255, 0.2), 0px 1px 1px 0px rgba(255, 255, 255, 0.14), 0px 1px 3px 0px rgba(255, 255, 255, 0.12) ); 
        }
    entity: switch.smart_switch_21012152451866290d3348e1e947b528_outlet_4
    tap_action:
      action: toggle
    fill_container: true
    layout: vertical
    name: TV
  - type: custom:mushroom-entity-card
    card_mod:
      style: |
        ha-card {
          background-color: rgba(10,10,10,0.8);
          box-shadow: var( --ha-card-box-shadow, 0px 2px 1px -1px rgba(255, 255, 255, 0.2), 0px 1px 1px 0px rgba(255, 255, 255, 0.14), 0px 1px 3px 0px rgba(255, 255, 255, 0.12) ); 
        }
    entity: switch.smart_switch_21012152451866290d3348e1e947b528_outlet_5
    tap_action:
      action: toggle
    fill_container: true
    layout: vertical
    name: Denon
  - type: custom:mushroom-entity-card
    card_mod:
      style: |
        ha-card {
          background-color: rgba(10,10,10,0.8);
          box-shadow: var( --ha-card-box-shadow, 0px 2px 1px -1px rgba(255, 255, 255, 0.2), 0px 1px 1px 0px rgba(255, 255, 255, 0.14), 0px 1px 3px 0px rgba(255, 255, 255, 0.12) ); 
        }
    entity: switch.smart_switch_21012152451866290d3348e1e947b528_outlet_3
    tap_action:
      action: toggle
    fill_container: true
    layout: vertical
    name: Sub
  - type: custom:mushroom-entity-card
    card_mod:
      style: |
        ha-card {
          background-color: rgba(10,10,10,0.8);
          box-shadow: var( --ha-card-box-shadow, 0px 2px 1px -1px rgba(255, 255, 255, 0.2), 0px 1px 1px 0px rgba(255, 255, 255, 0.14), 0px 1px 3px 0px rgba(255, 255, 255, 0.12) ); 
        }
    entity: switch.smart_switch_21012152451866290d3348e1e947b528_outlet_2
    tap_action:
      action: toggle
    fill_container: true
    layout: vertical
    name: Led TV
    icon_color: orange
  - type: custom:mushroom-entity-card
    card_mod:
      style: |
        ha-card {
          background-color: rgba(10,10,10,0.8);
          box-shadow: var( --ha-card-box-shadow, 0px 2px 1px -1px rgba(255, 255, 255, 0.2), 0px 1px 1px 0px rgba(255, 255, 255, 0.14), 0px 1px 3px 0px rgba(255, 255, 255, 0.12) ); 
        }
    entity: switch.smart_switch_21012152451866290d3348e1e947b528_outlet_6
    tap_action:
      action: toggle
    fill_container: true
    layout: vertical
    name: USB
  - type: custom:mushroom-entity-card
    card_mod:
      style: |
        ha-card {
          background-color: rgba(10,10,10,0.8);
          box-shadow: var( --ha-card-box-shadow, 0px 2px 1px -1px rgba(255, 255, 255, 0.2), 0px 1px 1px 0px rgba(255, 255, 255, 0.14), 0px 1px 3px 0px rgba(255, 255, 255, 0.12) ); 
        }
    entity: switch.chauffage_hall_outlet
    tap_action:
      action: toggle
    fill_container: true
    layout: vertical
    icon: mdi:heat-wave
    name: Chauffage Hall
    icon_color: red
  - type: custom:mushroom-entity-card
    card_mod:
      style: |
        ha-card {
          background-color: rgba(10,10,10,0.8);
          box-shadow: var( --ha-card-box-shadow, 0px 2px 1px -1px rgba(255, 255, 255, 0.2), 0px 1px 1px 0px rgba(255, 255, 255, 0.14), 0px 1px 3px 0px rgba(255, 255, 255, 0.12) ); 
        }
    entity: switch.smart_switch_21012152451866290d3348e1e947b528_outlet
    tap_action:
      action: toggle
    fill_container: true
    layout: vertical
    name: Multiprise TV
    icon: ''
    icon_color: green
5

Et le thème mushroom-light-card n’a pas une version dark ?

Essaye de voir si custom:mushroom-light-card peut être remplacé par custom:mushroom-dark-card

Cela pourrait remplacer la couleur de ton texte en blanc

6

Essaye

    card_mod:
      style: |
        ha-card {
          color: white;
          background-color: rgba(10,10,10,0.8);
          box-shadow: var( --ha-card-box-shadow, 0px 2px 1px -1px rgba(255, 255, 255, 0.2), 0px 1px 1px 0px rgba(255, 255, 255, 0.14), 0px 1px 3px 0px rgba(255, 255, 255, 0.12) ); 
        }
7

:interrobang:
je suis mal réveiller ou c’est le même code ?

avec rgba et augmente l’opacité (1.2) si c’est pas assez.

card_mod:
  style: |
    ha-card {
      color: rgba(255,255,255,1.2);
      ...
1 « J'aime »
8

C’est bien le même effectivement (j’ai besoin d’un café)

1 « J'aime »
9

Merci mais cela ne change rien

10 
card_mod:
  style: |
    ha-card {
      color: rgba(255,255,255,1.8) !important;
      ...

Peu être comme ca ?

11

non plus, rien ne change et oui je met bien le ;

12

Accessoirement en faisant un thème mushroom custom 1 fois plutôt que un card-mod à la main dans chaque élément de carte, ça simplifierai aussi le quotidien

13

Pas tous compris mais c’st une card Mushroom

14

Dans mushroom, tu as des cartes ET des thèmes que tu peux appliquer sur ces cartes.

En passant par ça, tu évite de faire la modification à la main dans le code yaml

15

Je viens de tester avec ta card et ton code, j’ai juste changé le capteur et le nom et à mon avis, c’est ton thème qui pose problème. Car avec mon thème perso c’est good

image

image
image741×236 3.92 KB

1 « J'aime »
16

mon theme ?? , c’est celui par defaut, juste un Jpg en fond et carte transluside

17

Je viens d’installé Mushroom Theme, et ensuite ?

18

Je viens d’installé Mushroom Theme, et ensuite ?

Je n’ai rien en plus

19

Bah en thème par défaut…

en clair

image
image936×287 4.02 KB

en sombre

image
image737×330 5.5 KB

Donc en gros, tu veux faire du sombre en réglage clair

Donc cela vient bien de ton réglage du thème

20

Oui, il est en clair et il faut qu’il passe en sombre :wink: