Créateur de pages d'accueil HTML personnalisées

Personnalisation Greffon
2

Bonjour :waving_hand:

J’ai ajouté data-color-scheme à la section #d-splash, ce qui vous permet de configurer facilement les logos d’accueil pour les modes clair et sombre. DEV: Implement dynamic color scheme for splash section · VaperinaDEV/custom-splash-html-builder@ba6641b · GitHub

<%- splash_forced_scheme = (dark_color_scheme? || forced_dark_mode?) ? "dark" : (forced_light_mode? ? "light" : nil) %>

<section id="d-splash"<%= " data-color-scheme=\"#{splash_forced_scheme}\"".html_safe if splash_forced_scheme %>>

Ainsi, #d-splash reçoit un attribut data-color-scheme="dark" ou "light" lorsqu’un mode clair ou sombre est explicitement imposé, et il reste sans attribut uniquement lorsque les deux modes sont activés et que le système d’exploitation doit décider.

La solution consiste à laisser cet attribut prendre le pas sur la requête média dans le CSS personnalisé, et à ne recourir à prefers-color-scheme que lorsque l’attribut est absent.

Exemple :

HTML personnalisé

<!-- MODE CLAIR -->
<div class="custom-splash-light">
  <div class="ring-layer">
    <svg viewBox="0 0 500 500">
      ...
    </svg>
  </div>
    
  <div class="logo-layer">
    <svg viewBox="0 0 500 500">
      ...
    </svg>
  </div>
</div>

<!-- MODE SOMBRE -->
<div class="custom-splash-dark">
  <div class="ring-layer">
    <svg viewBox="0 0 500 500">
      ...
    </svg>
  </div>
    
  <div class="logo-layer">
    <svg viewBox="0 0 500 500">
      ...
    </svg>
  </div>
</div>

CSS personnalisé

#d-splash .custom-splash-dark {
  display: none;
}

/* Le système d'exploitation décide — uniquement lorsqu'aucun schéma n'est imposé */
@media (prefers-color-scheme: dark) {
  #d-splash:not([data-color-scheme]) .custom-splash-light {
    display: none;
  }
  #d-splash:not([data-color-scheme]) .custom-splash-dark {
    display: block;
  }
}

/* Le schéma imposé l'emporte toujours, quel que soit le système d'exploitation */
#d-splash[data-color-scheme="light"] .custom-splash-dark {
  display: none;
}
#d-splash[data-color-scheme="dark"] .custom-splash-light {
  display: none;
}
#d-splash[data-color-scheme="dark"] .custom-splash-dark {
  display: block;
}

Puisque :not([data-color-scheme]) ne correspond plus une fois l’attribut présent, il n’y a pas de conflit de spécificité entre les deux ensembles de règles, et le schéma imposé l’emporte toujours.

2 « J'aime »