هل لا زالت هذه هي الطريقة للتحقق من الوضع الليلي؟

مطور
1

متابعةً للنقاش من لا توجد فئة محددة للوضع المظلم:

لدي مكون سمة يغير شعار الموقع بناءً على الفئة التي يتواجد فيها المستخدم ويضيف شعارات إلى الفئات في الشريط الجانبي، والآن يريدون تغييرها إلى شعار مختلف في الوضع المظلم.

شيء مثل هذا:

.category-my-other-identity #site-logo {
  content: url($AS) !important;
  display: inline-block;
  height: $site-logo-height;
  font-size: 0;
  margin-top: $site-margin-top;
  margin-bottom: $site-margin-bottom;
}

أنا سيء في CSS، ولكن يبدو أنه سيكون أسهل بكثير لو كانت هناك فئة “هذا-هو-الوضع-المظلم”. أو ربما يمكن أن يعمل شيء مثل ما ورد أعلاه.

أو ربما إذا كان هذا مكون سمة “حقيقي” مع إعدادات (الآن هو مكتوب يدويًا مثل ما ورد أعلاه)، فسيكون من السهل بما يكفي وضع تلك الإعدادات في CSS. هذا يبدو ما يجب أن أفعله على أي حال، أليس كذلك؟

6 إعجابات
2

بشكل مصادفة، هذا شيء كنا نناقشه داخليًا هذا الأسبوع! إليك بعض طلبات السحب لإثبات المفهوم:

لاحظ أن هذه مجرد تجارب للمساعدة في تفكيرنا - لا يوجد ضمان بأن أيًا منها سيتم دمجه.

أما بالنسبة لـ “الآن”، فإن أفضل رهان هو على الأرجح استخدام المكون <LightDarkImg كما يلي:

8 إعجابات
3

هذا منطقي. لقد واجهت نفس المشكلة مرة واحدة ولكن يا @david، كان ذلك سينجح بالنسبة لي.
أيضًا، هل سيتم اعتبار صعوبات منح الشارات خطأً أم شيئًا آخر؟

إعجابَين (2)
4

قد يكون خطأ، لكننا سنحتاج إلى مزيد من التفاصيل لمعرفة ذلك - وهو أيضًا غير مرتبط بهذا الموضوع، لذا فإن أفضل ما يمكنك فعله هو البحث عن المشكلة، وإذا لم تتمكن من العثور على إجابة، فابدأ موضوعًا جديدًا توضح فيه ما تحاول القيام به وأين تفشل.

5 إعجابات
5

قد يستخدم حل CSS نقي متغير CSS --scheme-type، أو حتى خاصية color-scheme التي تمت إضافتها قبل بضع ساعات (رائع!)، مع @container style queries أو light-dark().

للأسف، تعمل light-dark() فقط مع قيم الألوان. قد تتمكن من استخدام استعلامات @container style queries التي تستهدف خاصية color-scheme (لا يدعم فايرفوكس استعلامات الأنماط للخصائص المخصصة بعد). لم أتمكن من اختبار الفكرة لأن بيئة التطوير الخاصة بي معطلة حاليًا.

وجود فئة .dark-mode أو .light-mode مخصصة على الجذر سيكون بالتأكيد الأسهل للعمل معه.

6 إعجابات