Criador de HTML para telas de abertura personalizadas

Personalização Plugin
2

Olá :waving_hand:

Adicionei data-color-scheme à seção #d-splash, para que você possa configurar facilmente logos de splash para os esquemas de cores claro e escuro. 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 %>>

Assim, #d-splash recebe o atributo data-color-scheme="dark" / "light" quando um esquema claro ou escuro é explicitamente forçado, e fica sem o atributo apenas quando ambos os esquemas estão habilitados e o sistema operacional deve decidir.

A correção é permitir que esse atributo tenha prioridade sobre a consulta de mídia no CSS personalizado, e apenas recorrer a prefers-color-scheme quando o atributo estiver ausente.

Exemplo:

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 ESCURO -->
<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;
}

/* O SO decide — apenas quando não houver esquema forçado */
@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;
  }
}

/* O esquema forçado sempre vence, independentemente do SO */
#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;
}

Como :not([data-color-scheme]) simplesmente não corresponde mais uma vez que o atributo está presente, não há disputa de especificidade entre os dois conjuntos de regras, e o esquema forçado sempre vence.

2 curtidas