منشئ 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)