Конструктор HTML-сплешей

Настройка Плагин
2

Привет :waving_hand:

Я добавил data-color-scheme в секцию #d-splash, чтобы вы могли легко настроить логотипы заставки для светлой и темной темы. 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 %>>

Таким образом, #d-splash получает атрибут data-color-scheme="dark" / "light", когда явно задана светлая или темная тема, и остается без этого атрибута только тогда, когда включены обе темы и выбор должен делать ОС.

Решение заключается в том, чтобы дать этому атрибуту приоритет над медиа-запросом в пользовательском CSS, и использовать prefers-color-scheme только в том случае, если атрибут отсутствует.

Пример:

Пользовательский HTML

<!-- СВЕТЛАЯ ТЕМА -->
<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>

<!-- ТЕМНАЯ ТЕМА -->
<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

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

/* ОС решает — только если нет принудительной темы */
@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;
  }
}

/* принудительная тема всегда имеет приоритет, независимо от ОС */
#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;
}

Поскольку :not([data-color-scheme]) просто не совпадает, как только атрибут присутствует, нет конфликта специфичности между двумя наборами правил, принудительная тема всегда побеждает.

2 лайка