自定义启动画面 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

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

/* 由操作系统决定——仅在没有强制模式时 */
@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 个赞