Bonjour,
Désolé pour le délai…
avec ce contenu de lovalace.yaml
box-shadow: 'none'
border-color: 'var(--card-background-color)'
border-radius: '12px'
sidebar-icon-color: 'rgba(255, 255, 255, 0.6)'
primary-color: '#EF5350'
light-primary-color: '#EF5350'
accent-color: '#EF5350'
#Icon
paper-item-icon-color: '#ffffff'
#Checkbox
paper-toggle-button-checked-ink-color: '#ef5350'
paper-toggle-button-checked-button-color: '#ef5350'
paper-toggle-button-checked-bar-color: '#ef5350'
#Sidebar
sidebar-selected-text-color: '#ef5350'
sidebar-text-color: 'rgba(255, 255, 255, 0.6)'
sidebar-selected-icon-color: '#ef5350'
sidebar-selected-background-color: '#ef5350'
#Slider
slider-color: '#d93025'
slider-bar-color: '#fce8e6'
#Background
secondary-background-color: '#2D2D2D'
card-background-color: '#2D2D2D'
primary-background-color: '#121212'
# paper-dialog-background-color: 'var(-secondary-background-color)'
# more-info-header-background: 'var(-secondary-background-color)'
#Texte
primary-text-color: 'rgba(255, 255, 255, 0.87)'
secondary-text-color: 'rgba(255, 255, 255, 0.6)'
text-primary-color: 'rgba(255, 255, 255, 0.6)'
#Divider
divider-color: 'rgba(255, 255, 255, 0)'
paper-card-header-color: 'rgba(255, 255, 255, 0.87)'
paper-toast-background-color: '#ffffff'
paper-toast-color: '#2d2d2d'
#Custom header
couleur-header : 12,12,12
# ch-background: 'var(--couleur-header)'
paper-card-background-color: 'var(--card-background-color)'
#Couleurs
google-red-500 : '#F54436'
google-green-500 : '#01C852'
google-yellow-500 : '#FF9101'
google-blue-500 : '#3D5AFE'
google-violet-500 : '#661FFF'
google-grey-500: '#BBBBBB'
couleur-rouge : 245, 68, 54
couleur-vert : 1, 200, 82
couleur-jaune : 255, 145, 1
couleur-bleu : 61, 90, 254
couleur-violet : 102, 31, 255
couleur-gris : 187, 187, 187
couleur-rose : 233, 30, 99
couleur-theme : 255,255,255
voici le résultat :
En mettant juste
# box-shadow: 'none'
# border-color: 'var(--card-background-color)'
# border-radius: '12px'
# sidebar-icon-color: 'rgba(255, 255, 255, 0.6)'
# primary-color: '#EF5350'
# light-primary-color: '#EF5350'
# accent-color: '#EF5350'
# #Icon
# paper-item-icon-color: '#ffffff'
# #Checkbox
# paper-toggle-button-checked-ink-color: '#ef5350'
# paper-toggle-button-checked-button-color: '#ef5350'
# paper-toggle-button-checked-bar-color: '#ef5350'
# #Sidebar
# sidebar-selected-text-color: '#ef5350'
# sidebar-text-color: 'rgba(255, 255, 255, 0.6)'
# sidebar-selected-icon-color: '#ef5350'
# sidebar-selected-background-color: '#ef5350'
# #Slider
# slider-color: '#d93025'
# slider-bar-color: '#fce8e6'
# #Background
# secondary-background-color: '#2D2D2D'
# card-background-color: '#2D2D2D'
# primary-background-color: '#121212'
# # paper-dialog-background-color: 'var(-secondary-background-color)'
# # more-info-header-background: 'var(-secondary-background-color)'
# #Texte
# primary-text-color: 'rgba(255, 255, 255, 0.87)'
# secondary-text-color: 'rgba(255, 255, 255, 0.6)'
# text-primary-color: 'rgba(255, 255, 255, 0.6)'
# #Divider
# divider-color: 'rgba(255, 255, 255, 0)'
# paper-card-header-color: 'rgba(255, 255, 255, 0.87)'
# paper-toast-background-color: '#ffffff'
# paper-toast-color: '#2d2d2d'
# #Custom header
# couleur-header : 12,12,12
# # ch-background: 'var(--couleur-header)'
# paper-card-background-color: 'var(--card-background-color)'
#Couleurs
google-red-500 : '#F54436'
google-green-500 : '#01C852'
google-yellow-500 : '#FF9101'
google-blue-500 : '#3D5AFE'
google-violet-500 : '#661FFF'
google-grey-500: '#BBBBBB'
couleur-rouge : 245, 68, 54
couleur-vert : 1, 200, 82
couleur-jaune : 255, 145, 1
couleur-bleu : 61, 90, 254
couleur-violet : 102, 31, 255
couleur-gris : 187, 187, 187
couleur-rose : 233, 30, 99
couleur-theme : 255,255,255
Voici le résultat :
Si je sélectionne le theme default, ça revient en mode sombre mais sans la prise en compte des variables de lovelace.yaml forcément…
J’aurais aimé garder le thème sombre d’origine HA et simplement intégrer un fichier de surcharge CSS pour tenir compte d eces variables… Vous voyez ce que je veux faire ?
Merci