커스텀 스플래시 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_forled_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;
}

/* OS decides — only when there's no forced scheme */
@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;
  }
}

/* forced scheme always wins, regardless of 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])는 속성이 존재하는 경우 단순히 매칭되지 않으므로, 두 규칙 세트 사이에 특이성(specificity) 충돌이 발생하지 않으며, 강제된 스킴이 항상 우선합니다.

2개의 좋아요