Eigener Splash-HTML-Builder

Anpassung Plugin
2

Hallo :waving_hand:

Ich habe data-color-scheme zum Abschnitt #d-splash hinzugefügt, sodass du Splash-Logos für helle und dunkle Designs leicht einrichten kannst. 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 %>>

Somit erhält #d-splash ein data-color-scheme="dark" / "light"-Attribut, wenn ein helles oder dunkles Design explizit erzwungen wird, und bleibt nur dann ohne Attribut, wenn beide Designs aktiviert sind und das Betriebssystem die Entscheidung treffen soll.

Die Lösung besteht darin, diesem Attribut in den benutzerdefinierten CSS-Regeln Vorrang vor der Media-Abfrage zu geben und nur dann auf prefers-color-scheme zurückzugreifen, wenn das Attribut fehlt.

Beispiel:

Benutzerdefiniertes HTML

<!-- HELLES DESIGN -->
<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>

<!-- DUNKLES DESIGN -->
<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>

Benutzerdefiniertes CSS

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

/* Betriebssystem entscheidet — nur wenn kein Design erzwungen ist */
@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;
  }
}

/* Erzwungenes Design hat immer Vorrang, unabhängig vom Betriebssystem */
#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;
}

Da :not([data-color-scheme]) einfach nicht mehr passt, sobald das Attribut vorhanden ist, gibt es keinen Konflikt in der Spezifität zwischen den beiden Regelsets, und das erzwungene Design hat immer Vorrang.

2 „Gefällt mir“