Changer le background d'un Design en fonction du thème Light ou Dark

Utilisation du core de Jeedom
1

Bonjour à tous,

Je voulais partager avec vous une solution que j’ai trouvé pour changer l’image de fond utilisée par certaines de mes pages « Design » en fonction du thème Light ou Dark de Jeedom.
Effectivement, j’ai découvert cette fonctionnalité sur Home Assistant et me suis dit que ça serait bien de faire de même sur mon Jeedom.

Concrètement, j’ai une tablette fixée au mur, qui affiche un Design avec le plan de la maison.
Et durant la nuit, le mode sombre avec un plan sombre c’est un gros plus pour mes petits yeux… :blush:

Alors je vous partage le résultat, si ça peut vous servir…

Note, j’ai vu qu’il y avait le plugin Design Background Image qui pourrait certainement aussi faire l’affaire.

Fonctionnement
L’idée, c’est de modifier le « custom.css » du Jeedom afin qu’il remplace l’image de fond de certaines pages Design.
Et plutôt que de choisir la page ID, j’aimerais remplacer la photo de fond (le plan de ma maison) par soit la variante Light soit la variante Dark, peu importe quelle est la page Design.

J’ai découvert que Jeedom upload les images dans data/plans/ avec un nom planHeader#ID#-#HASH#.jpg
L’image est donc uploadée pour chaque page, avec un nom différent. Mais heureusement, le Hash dans le nom est identique.
Donc il suffit de match ce hash et de remplacer l’image à la volée par une des deux autres en fonction du thème (Light ou Dark) utilisé par Jeedom.

Ci-après le code que j’ai préparé avec l’aide de ChatGPT qui est testé avec Firefox et Safari (qui m’a donné du fil à retordre…).
Et ne pas oublier d’activer la customization avancée dans l’interface (j’ai perdu un de ces temps à comprendre ça… :smiling_face_with_tear:).

Intégration

  1. Dans vos pages Design, il faut laisser votre image background par défaut.
    Il faut identifier le nom exact du fichier qui est dans data/plan soit en cherchant avec l’éditeur de fichier soit depuis votre browser en mode débug.
  2. Il faut upload votre pair d’images Dark/Light avec éditeur de fichier dans data/plan
    (par ex. plan-dark.jpg et plan-light.jpg)
  3. Ensuite il faut remplacer dans le code ci-après les valeurs suivantes:
    • %HASH% => par le hash de votre image
    • %PLAN-LIGHT% => le nom de votre plan en Light mode
    • %PLAN-DARK% => le nom de votre plan en Dark mode
  4. Copier/coller ce bloc de code dans custom.css en utilisant personnalisation avancée et activer la personnalisation.

/* iOS : annonce light/dark au navigateur */
:root{color-scheme:light dark}

/* 1) On ne touche pas au background inline : il reste notre fallback ultime */
#planHeaderImage[style*="planHeader"][style*="-%HASH%.jpg"]{
  position:relative; z-index:0; /* contexte pour le ::before */
}

/* 2) Calque "light" par défaut, avec 2 URL candidates (la 2e sert de secours) */
#planHeaderImage[style*="-%HASH%.jpg"]::before{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background-image:
    url('/data/plan/%PLAN-LIGHT%'),
    url('/core/php/downloadFile.php?pathfile=data/plan/%PLAN-LIGHT%');
  background-position:0 0, 0 0;
  background-repeat:no-repeat, no-repeat;
  background-size:100% 100%, 100% 100%;
  -webkit-transform:translateZ(0); transform:translateZ(0); /* nudge Safari */
}

/* 3) Thème dark Jeedom → on remplace le "set" d'images par la variante dark */
body[data-theme*="Dark"] #planHeaderImage[style*="-%HASH%.jpg"]::before{
  background-image:
    url('/data/plan/%PLAN-DARK%'),
    url('/core/php/downloadFile.php?pathfile=data/plan/%PLAN-DARK%');
}

/* 4) Fallback OS en sombre si jamais data-theme n'est pas à jour */
@media (prefers-color-scheme: dark){
  #planHeaderImage[style*="-%HASH%.jpg"]::before{
    background-image:
      url('/data/plan/%PLAN-DARK%'),
      url('/core/php/downloadFile.php?pathfile=data/plan/%PLAN-DARK%');
  }
}