Salut, essaie ceci la ton code essaie d’utiliser du Jinja ({% ... %}) alors que dans Lovelace card-mod il faut du JavaScript template [[[ ... ]]].
Voici ton code adapté pour que la couleur des chiffres (ou du fond si tu préfères) change selon tes seuils :
type: custom:bubble-card
card_type: button
button_type: state
name: Production solaire
scrolling_effect: false
show_attribute: false
card_layout: large-2-rows
sub_button:
- show_background: false
show_state: true
icon: mdi:solar-power-variant-outline
entity: sensor.watt_hour1
show_name: true
name: Spa
- show_background: false
icon: mdi:solar-power-variant-outline
show_state: true
tap_action:
action: none
entity: sensor.watt_hour2
name: Maison
show_name: true
- show_background: false
show_state: true
icon: mdi:solar-power
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
size: normal
style: "--popup-border-radius: 10px"
content:
type: horizontal-stack
cards:
- type: statistics-graph
chart_type: line
period: hour
entities:
- sensor.qualite_de_l_air_temperature
stat_types:
- max
logarithmic_scale: false
hide_legend: true
title: Température Intérieur
days_to_show: 1
entity: sensor.total_day1
show_name: false
- show_background: false
show_state: true
icon: mdi:solar-power
tap_action:
action: none
entity: sensor.total_day2
show_icon: true
icon: mdi:sun-angle
force_icon: false
show_name: true
show_last_changed: false
entity: sensor.tdeg_cabane_temperature
grid_options:
columns: 15
rows: 1
card_mod:
style: |
/* === Couleur du texte (état) pour le Spa === */
.bubble-sub-button-1 .bubble-sub-button-state {
color: [[[
let v = parseFloat(states['sensor.watt_hour1']?.state || 0);
if (v < 200) return 'rgb(var(--bbl-rgb-yellow))';
if (v < 400) return 'rgb(var(--bbl-rgb-orange))';
return 'rgb(var(--bbl-rgb-red))';
]]];
font-weight: bold;
}
/* === Couleur du texte (état) pour la Maison === */
.bubble-sub-button-2 .bubble-sub-button-state {
color: [[[
let v = parseFloat(states['sensor.watt_hour2']?.state || 0);
if (v < 200) return 'rgb(var(--bbl-rgb-yellow))';
if (v < 400) return 'rgb(var(--bbl-rgb-orange))';
return 'rgb(var(--bbl-rgb-red))';
]]];
font-weight: bold;
}
Résultat :
0 → 199 W : jaune
200 → 399 W : orange
400 → 800+ W : rouge
Ici j’ai coloré uniquement les chiffres (state).
Si tu veux plutôt colorer le fond du bouton en entier, on peut appliquer la même logique sur .bubble-sub-button-1 et .bubble-sub-button-2 avec background-color: au lieu de color:.
tu peux modifier les valeur ( fictive dans les outils de développement) attention sa ne reste pas longtemps non plus mais sa te permet de faire tes test
quand je met ce code, j’ai le texte en bold et le reste ne fonctionne pas.
/* === Couleur du texte (état) pour le Maison === */
.bubble-sub-button-1 {
color: [[[
let v = parseFloat(states['sensor.watt_hour1']?.state || 0);
if (v < 200) return 'rgb(var(--bbl-rgb-yellow))';
if (v < 400) return 'rgb(var(--bbl-rgb-orange))';
return 'rgb(var(--bbl-rgb-red))';
]]];
font-weight: bold;
}
/* === Couleur du texte (état) pour la Maison === */
.bubble-sub-button-2 .bubble-sub-button-state {
color: [[[
let v = parseFloat(states['sensor.watt_hour2']?.state || 0);
if (v < 200) return 'rgb(var(--bbl-rgb-yellow))';
if (v < 400) return 'rgb(var(--bbl-rgb-orange))';
return 'rgb(var(--bbl-rgb-red))';
]]];
font-weight: bold;
}
Résultat :
Ici j’ai coloré uniquement les chiffres (state).
