Costruttore HTML personalizzato per schermate di avvio

Personalizzazione Plugin
2

Ciao :waving_hand:

Ho aggiunto data-color-scheme alla sezione #d-splash, così puoi impostare facilmente i loghi di splash per le modalità chiara e scura. 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 %>>

Così #d-splash riceve un attributo data-color-scheme="dark" / "light" quando viene imposta esplicitamente una modalità chiara o scura, e rimane senza attributo solo quando entrambe le modalità sono abilitate e si lascia che sia il sistema operativo a decidere.

La correzione consiste nel far sì che tale attributo abbia la priorità rispetto alla media query nel CSS personalizzato, ricorrendo a prefers-color-scheme solo quando l’attributo è assente.

Esempio:

HTML personalizzato

<!-- MODALITÀ CHIARA -->
<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>

<!-- MODALITÀ SCURA -->
<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 personalizzato

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

/* Il sistema operativo decide — solo quando non c'è una modalità forzata */
@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;
  }
}

/* La modalità forzata vince sempre, indipendentemente dal sistema operativo */
#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;
}

Poiché :not([data-color-scheme]) semplicemente non corrisponde una volta che l’attributo è presente, non c’è conflitto di specificità tra i due set di regole: la modalità forzata vince sempre.

2 Mi Piace