カスタムスプラッシュHTMLビルダー

カスタマイズ プラグイン
2

こんにちは :waving_hand:

#d-splash セクションに data-color-scheme を追加したので、ライトとダークスキームのスプラッシュロゴを簡単に設定できるようになりました。 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" 属性が付与され、両方のスキームが有効で OS に判断を委ねる場合のみ、属性は付与されません。

修正点は、カスタム CSS でメディアクエリよりもこの属性を優先させ、属性が存在しない場合にのみ prefers-color-scheme にフォールバックすることです。

例：

カスタム HTML

<!-- LIGHT MODE -->
<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>

<!-- DARK MODE -->
<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;
}

/* OS が判断 — 強制スキームがない場合のみ */
@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;
  }
}

/* 強制スキームは OS に関係なく常に優先される */
#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つのルールセット間で特異性の競合は発生せず、強制スキームが常に優先されます。

「いいね！」 2