كيفية تغيير عنصر css بناءً على الوضع الداكن أو الفاتح؟

لم أجد إجابة قاطعة عند البحث، لكنني أرغب في تغيير عنصر CSS بطريقة للوضع الداكن، وطريقة أخرى للوضع الفاتح.

ما هي أفضل طريقة لتحقيق ذلك في Discourse؟

إعجاب واحد (1)

أعتقد أن هذا الموضوع قد يساعدك.

لا أعتقد أنه يمكنني تعديل ملف color_definitions.css نظرًا لأنني عميل مؤسسي تستضيفه CDCK. أفترض أنني سأحتاج إلى التواصل معهم بشأن هذا الأمر إذن.

شكرًا لك، ليلي!

إعجابَين (2)

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

إعجاب واحد (1)

ما هو عنصر CSS الذي تريد تغييره بناءً على الوضع الداكن/الفاتح؟

يمكنك إضافة تعريفات الألوان إلى علامة تبويب تعريفات الألوان في تحرير CSS/HTML الخاص بالمظهر (ورقة الأنماط color_definitions).

عذرًا على التأخير في الرد! كنت أتطلع إلى تغيير لون الشريط المميز* أعلى منشور خبير في موضوع ما، ولكني أردت تمييز الشريط بلون مختلف للسمات الفاتحة والداكنة.

إعجاب واحد (1)

لست متأكدًا مما تقصده؟ هل يمكنك تقديم لقطة شاشة؟

مميز آسف، خطأ مطبعي في الهاتف المحمول!

إعجاب واحد (1)

أود أن يتم إثبات خطئي بشأن هذا، لكنني أعتقد أنه لا يوجد فحص موثوق يمكنك استخدامه مع CSS.

@sp-jordan-violet عادةً ما تكون الطريقة الصحيحة هي استخدام متغيرات الألوان من مخططات الألوان الداكنة والفاتحة الخاصة بك. يمكنك التحقق من القيم الحالية الخاصة بك باستخدام مدقق المتصفح. أعتقد أنه لا يمكنك إضافة متغيرات جديدة تتغير بناءً على مخطط الألوان. ولكن هناك الكثير من المتغيرات للاختيار من بينها ويمكنك استخدامها في أي إعلان مخصص. على سبيل المثال

.topic-avatar {
  height: unset;
  align-self: stretch;
  background-image: linear-gradient(
      to right,
      transparent -40%,
      var(--secondary) 80%
    ),
    linear-gradient(
      to bottom,
      var(--tertiary-300) 0%,
      var(--highlight) 50%,
      var(--quaternary-low) 100%
    );
}

يمكن أن يمنحك تمييزًا للمنشور مثل هذا :rainbow: :slight_smile:

إعجابَين (2)

نعم، أميل إلى الاتفاق. لقد كنت أيضًا أعبث بحل JavaScript / CSS ولكن لم ينجح شيء بعد

إعجاب واحد (1)

رائع، أنا حقًا أحب هذه الفكرة!!

إعجابَين (2)

هذا يبدو رائعًا جدًا. أحسنت صنعًا :slight_smile:

إعجاب واحد (1)