Constructor HTML de salpicaduras personalizadas

Personalización Plugin
2

Hola :waving_hand:

He añadido data-color-scheme a la sección #d-splash, así que puedes configurar fácilmente los logotipos de la pantalla de inicio para los modos claro y oscuro. 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 %>>

Así, #d-splash obtiene un atributo data-color-scheme="dark" / "light" cuando se fuerza explícitamente un esquema claro u oscuro, y se queda sin el atributo únicamente cuando ambos esquemas están habilitados y se deja que el sistema operativo decida.

La solución es permitir que este atributo tenga prioridad sobre la consulta de medios en el CSS personalizado, y solo recurrir a prefers-color-scheme cuando el atributo esté ausente.

Ejemplo:

HTML personalizado

<!-- MODO CLARO -->
<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>

<!-- MODO OSCURO -->
<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 personalizado

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

/* El sistema operativo decide — solo cuando no hay un esquema forzado */
@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;
  }
}

/* El esquema forzado siempre gana, independientemente del 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;
}

Dado que :not([data-color-scheme]) simplemente no coincide una vez que el atributo está presente, no hay conflicto de especificidad entre los dos conjuntos de reglas, y el esquema forzado siempre gana.

2 Me gusta