كيفية جعل الوضع الداكن التلقائي يتطابق مع الوضع الداكن المختار

لدينا سمة داكنة تبدو كالتالي:

عندما نختار السمة في ملف تعريف المستخدم، فإنها تبدو كما هو موضح أعلاه، كما هو متوقع.

ولكن عندما يتم تمكينها تلقائيًا عبر خيار ملف التعريف “تمكين مخطط ألوان الوضع الداكن التلقائي”، فإنها تبدو كالتالي:

يجعل معظم واجهة المستخدم داكنة، ولكنه يأخذ CSS السمة الفاتحة مما يعني أن الرأس ينتهي بهذا الشكل.

هل هناك أي طريقة لجعل Discourse يختار السمة الداكنة بدقة، بما في ذلك CSS، وما إلى ذلك، عند تحديده تلقائيًا؟


للعلم، هذه هي خيارات السمة الفاتحة لدينا:

وخيارات السمة الداكنة:

3 إعجابات

يبدو أنك تستخدم لوحتي ألوان مختلفتين. Joplin الافتراضي و Simple Dark. هل هما مختلفان؟

3 إعجابات

نعم، السمة الافتراضية مع السمة اللونية الافتراضية لـ Joplin هي السمة الفاتحة، والأخرى هي السمة الداكنة. أعتقد أنه من الطبيعي أن يكون لديهم سمتان لونيتان مختلفتان؟

إعجابَين (2)

أعتذر بشدة! هذه منطقة مربكة في واجهة المسؤول لدينا، ونحن نعمل على تحسينها حاليًا. آمل أن أكون على صواب، لكن دعني أشرح الوظيفة الحالية بطريقتي.

أحد التغييرات هو أننا بدأنا نتحدث فقط عن “لوحة الألوان” ولم نعد نتحدث عن “نظام الألوان”. سيتغير ذلك في واجهة المستخدم قريبًا. حتى الآن، اللوحة والنظام هما نفس الشيء.

للاستفادة من دعم الوضع المظلم في discourse، حققت أفضل النتائج مع ما يلي:

  • تمكين سمة واحدة فقط
  • تحديد لوحة ألوان الوضع الفاتح في إعدادات السمة الممكّنة
  • تحديد لوحة ألوان الوضع المظلم في إعداد الموقع default dark mode color scheme id.
  • يتم احترام إعداد نظام التشغيل للوضع المظلم لدى أعضائك
  • تعمل مكون السمة للتبديل بين الوضع الفاتح/المظلم للتبديل بين الوضع الفاتح/المظلم
  • يمكن لأعضائك رؤية خيارات الوضع الفاتح والمظلم في تفضيلات المستخدم الخاصة بهم (ولا يرون محدد السمة لأنه توجد سمة واحدة فقط)

إذا قمت بتخصيص السمة المظلمة الخاصة بك بما يتجاوز لوحة الألوان المستخدمة ولا تريد أن يستخدم الأشخاص السمة ذات الوضع الفاتح بألوان داكنة، فلا يمكنك استخدام محدد الوضع المظلم. ستقوم بما يلي:

  • تمكين سمتين
  • السمة ذات الوضع الفاتح تحتوي على ألوان فاتحة
  • السمة ذات الوضع المظلم تحتوي على ألوان داكنة
  • لم يتم تحديد إعداد default dark mode color scheme id
  • لا يتم احترام إعداد نظام التشغيل للوضع المظلم لدى أعضائك
  • لا تعمل مكون السمة للتبديل بين الوضع المظلم
  • في تفضيلات المستخدم الخاصة بك، يمكن لأعضائك اختيار السمة المفضلة لديهم

وأخيرًا، إذا كنت تريد سمة فاتحة أو مظلمة واحدة فقط، فما عليك سوى تمكين سمة واحدة ولوحة واحدة، وعدم تحديد أي لوحة في إعداد الموقع default dark mode color scheme id.

4 إعجابات

شكراً على إجابتك. لدينا في الواقع ثلاثة مظاهر مختلفة، واثنان منها مخصصان باستخدام CSS (لتغيير الرأس لعيد الهالوين، عيد الميلاد). لذا، إذا فهمت بشكل صحيح، مع هذا الإعداد، لا يمكن الحصول على المظهر الداكن التلقائي ليعمل بشكل صحيح، هل هذا صحيح؟

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

إعجابَين (2)

لا، إذا لم تقدم لوحات ألوان فاتحة وداكنة. نعم، إذا فعلت.

إعجابَين (2)

لدي العديد من لوحات الألوان، وأبرزها “Joplin Default” (المستخدمة في السمة الافتراضية الفاتحة) و “Simple Dark” (المستخدمة في السمة الافتراضية الداكنة).

هل هناك شيء أحتاج إلى تكوينه هنا لإصلاح المشكلة التي ذكرتها في المنشور العلوي؟

أخبرنا ما هي لوحات الألوان الافتراضية للضوء والظلام في إعدادات المنتدى. قم بتعيين الضوء الافتراضي في إعدادات السمات. ابدأ في استخدام المحول. هذا كل شيء.

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

إعجابَين (2)

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

يستخدم Versatile Banner صور خلفية وألوان مختلفة اعتمادًا على ما إذا كانت لوحة الألوان الفاتحة أو الداكنة نشطة. يمكنك فعل شيء مشابه لرأسك.

نعم، يتم تعيين الرأس بالفعل عبر CSS المخصص لكل سمة. هل هناك أي طريقة لتحديد ما إذا كانت لوحة الألوان الحالية داكنة أم فاتحة؟

لقد جربت ما يلي:

@media (prefers-color-scheme: dark) {
  .d-header {
    background-image: url(https://imgur.com/LdcvIcp.png); /* صورة خلفية داكنة */
  }
}

لكن ذلك لم ينجح بينما كانت لوحة الألوان الداكنة نشطة، وللتأكد جربت نفس الشيء مع @media (prefers-color-scheme: light) ونجح الأمر. لذلك يبدو أن لوحة الألوان الداكنة تُعرّف نفسها على أنها مخطط ألوان فاتح بطريقة ما؟ هل هناك أي طريقة أخرى لمعرفة أن لوحة الألوان الحالية هي الداكنة؟

لقد نظرت إلى HTML وبحثت عن “dark” ولكن لم يظهر شيء مفيد. كنت آمل أن يكون هناك محدد علوي مثل .is-dark-theme يخبرني بذلك.

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

هل تعمل الطريقة التي يغير بها الشعار متعدد الاستخدامات الخلفية؟ يمكنك تثبيت المكون، وإضافة صورة خلفية للوضع المظلم، والمحاولة باستخدام المعاينة.

بعد ذلك، يمكنك استخدام dark-light-choose الذي تم شرحه على سبيل المثال في Update themes and plugins to support automatic dark mode - #5 by pmusaraj ويستخدم أيضًا للشعار.

إعجابَين (2)