تبديل وضع الظلام/الضوء

[Discourse]

تم إيقاف مكون السمة هذا. يرجى الاطلاع على Dark/light mode toggle now available in core

|||
-|-|-|
| الملخص | يضيف تبديل الوضع الداكن/الفاتح زر تبديل قابل للنقر عليه لمخطط الألوان في قائمة الهامبرغر. يقوم التبديل بالتبديل بين مخطط ألوان فاتح أو داكن لموضوع واحد.
| رابط المستودع | https://github.com/discourse/discourse-color-scheme-toggle
| جديد في سمات Discourse؟ | دليل المبتدئين لاستخدام سمات Discourse

تثبيت مكون السمة هذا

نظرًا لأن هذا مكون سمة #رسمي يتم صيانته بواسطة فريق Discourse، يمكن تقديم طلبات #الدعم، #الأخطاء، #تجربة_المستخدم، و #الميزات في الفئات المعنية هنا على Meta، ووضع علامة عليها بعلامة مكون السمة المناسبة. انقر على رابط أدناه لبدء أحدها.

الدعم خطأ تجربة المستخدم ميزة

الميزات

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

يمكنك اختيار عرض التبديل في الشريط الجانبي الجديد لـ Discourse أو في الرأس بجانب الأيقونات الأخرى.

الشريط الجانبي

الرأس

خطوات هامة

لكي يعمل هذا بشكل صحيح، يجب تمكين خيارين لمخطط الألوان على الأقل في منطقة /admin/customize/colors. يجب تمكين خيارين على الأقل لـ color scheme can be selected by users.

يجب تعيين مخطط ألوان افتراضي للوضع الداكن: /admin/site_settings/category/basic?filter=dark

بمجرد الانتهاء من ذلك، يجب أن يتمكن المستخدمون من الاختيار بين مخططين للألوان كتفضيلاتهم light و dark في قائمة واجهة تفضيلات المستخدم الخاصة بهم.

الإعدادات

الاسم	الوصف
svg icons
add color scheme toggle to header	إضافة زر تبديل مخطط الألوان إلى رأس الموقع

الترجمة	الافتراضي
toggle_button_title	تبديل مخطط الألوان

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

[chrisbagsrocks]

هل يعمل هذا فقط مع إدخال المستخدم عبر الذهاب إلى تفضيلاته وتمكينه؟ سيكون أفضل بكثير إذا كان يمكن أن يكون تطبيقًا على مستوى الموقع بدلاً من قاعدة مستخدم بمستخدم.

[jordan.vidrine]

سيقوم مسؤول بتمكين هذا المكون للموقع بأكمله.

من هناك، اعتمادًا على ما قام المسؤول الذي قام بإعداد المكون بتعيينه، سيكون التبديل إما في قائمة همبرغر للمستخدم، أو في رأس المنتدى. يمكن لجميع المستخدمين استخدام هذا بمجرد تمكينه بواسطة مسؤول.

[chrisbagsrocks]

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

[jordan.vidrine]

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

قد تحتاج أيضًا إلى إضافة تحديد هنا /admin/site_settings/category/basic?filter=dark

لقد قمت بتحديث التعليمات لتعكس هذه الإضافة. آسف على الالتباس!

[bekircem]

يبدو أنه لا يعمل بشكل صحيح عندما يكون مخطط الألوان الافتراضي داكنًا. كيف يمكننا تكييف هذا؟

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

[jordan.vidrine]

حسنًا، أعتقد أن هذا يحدث لأنني أتحقق من إعدادات مخطط المستخدم prefers-dark بناءً على إعدادات المتصفح والنظام.\n\nهل يمكنك النظر في وحدة تحكم الفاحص لديك ومعرفة ما إذا كان هناك أي شيء يظهر عند محاولة استخدام المفتاح؟\n\nقد أحتاج إلى التحقق من هذا.

[poyrazdursuncan (Dursun Can)]

تحذيرات في domain.com/logs;

Dark-Light Toggle theme/component is throwing errors

initialize@https://develcoder.com/theme-javascripts/1d5669cf8344e0837406cef0be37bb086b5968f5.js?__ws=develcoder.com:153:73

initialize@https://develcoder.com/assets/application-01686ed6ee22a989833acbbce970ba63.js:1:11855

https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:268273

each@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:429458

walk@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:428478

each@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:427828

topsort@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:427874

_runInitializer@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:268501

runInstanceInitializers@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:268222

_bootSync@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:252462

didBecomeReady@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:257791

invoke@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:418024

flush@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:417018

flush@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:418946

_end@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:424401

end@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:421081

_run@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:36:424937

u@https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:26:26509


https://develcoder.com/assets/vendor-0cc77969943fbfe61f9ee3bae9d7291d.js:26:26807

[Mr.X_Mr.X]

هنا أيضاً. مكون الضوء الداكن يرمي أخطاء.

[jordan.vidrine]

@poyrazdursuncan

Dark-Light Toggle theme/component is throwing errors

@Mr.X_Mr.X

نفس الشيء. مكون الإضاءة الداكنة يسبب أخطاء.

هممم… لست متأكدًا من مصدر ذلك حيث لا يوجد لدي أي رمز يجب أن يرسل ذلك. الاتصال الوحيد الذي لدي لخطأ هو هنا:

https://github.dev/discourse/discourse-color-scheme-toggle/blob/3474a80d81d89f1264be5d55652dc65b5aea68e2/javascripts/discourse/initializers/dark-light-toggle-hamburger.js#L56-L59

هل يمكنك ربط موقعك هنا إن أمكن؟ هل نسختك محدثة؟

[Arta_S (Arta)]

مرحباً،

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

هل يواجه أي شخص آخر نفس المشكلة؟

[jordan.vidrine]

هل يمكنك التحقق من وحدة تحكم أدوات المطور ورؤية ما إذا كان أي شيء يظهر متعلقًا بهذا؟ أرى أن الأيقونات تعمل بشكل جيد في موقع العرض التوضيحي.

[Arta_S (Arta)]

هذا هو الفيديو:

المشكلة الرئيسية لدي هي أنني لا أرى هذه الخيارات في قائمة الهامبرغر على منتداي:

[jordan.vidrine]

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

هل تأكدت من اتباع كل خطوة في المنشور الأصلي حول هذا الموضوع؟

يجب تمكين خيارين على الأقل لاختيار الألوان في منطقة /admin/customize/colors الخاصة بك
يجب تمكين سمة داكنة في: /admin/site_settings/category/basic?filter=dark

وهل لديك، كمستخدم، خياران للألوان محددين، أحدهما للضوء والآخر للظلام، في تفضيلات المستخدم الخاصة بك؟

[Arta_S (Arta)]

@jordan.vidrine

هل تأكدت من اتباع كل خطوة في المنشور الأصلي في هذا الموضوع؟

مرحباً،

نعم، تم تنفيذ ذلك بشكل صحيح. اليوم كل شيء يظهر بشكل صحيح. كان هذا بسبب ملفات تعريف الارتباط. كان من الغريب أنه في المتصفحات الأخرى (حيث لم أزر المنتدى قط) كان يظهر مفقودًا أيضًا. الآن كل شيء صحيح. شكرًا لك وأعتذر عن الارتباك الذي سببته.

الشيء الوحيد هو أن جميع المستخدمين بما في ذلك الضيوف يمكنهم رؤية التبديل في الرأس. ولكن كمسؤول عندما أكون مسجلاً الدخول، لا يمكنني رؤية التبديلات. هل هذا مقصود؟ هل يمكن أن يكون هذا ذاكرة التخزين المؤقت للخادم أو شيء من هذا القبيل؟

[jordan.vidrine]

هذا مثير للاهتمام. هل قمت بتحديد مخطط ألوان داكن وفاتح في تفضيلات المستخدم لديك؟

وهل تستخدم السمة التي تم تثبيت المكون بها؟

[Arta_S (Arta)]

اضطررت للذهاب إلى ملفي الشخصي وتمكين هذا الخيار (تمكين مخطط الألوان التلقائي للوضع المظلم) حتى يظهر في الرأس. ربما كنت أعبث وفوتت مربع الاختيار هذا.

[agungor]

أنا أحب هذه المكونة! لكن، لدي مشكلة صغيرة.

يبدو أن المكونة تعمل فقط عندما يكون خيار “تمكين مخطط الألوان التلقائي للوضع المظلم” ممكّنًا. تحدث مشكلتي عندما يكون الخيار ممكّنًا، وعندما يتم تعيين تفضيل النظام على الوضع المظلم (أي، مخطط الألوان المفضل: مظلم).

في السيناريو أعلاه، عندما أحاول التبديل إلى سمة فاتحة عبر التفضيلات > الواجهة > السمة، لا يحدث شيء، وهذا جيد بالنسبة لي. من المفترض، نظرًا لأن تفضيل نظامي مضبوط بالفعل على الوضع المظلم، فإن التبديل إلى الوضع الفاتح في Discourse لا يتجاوز ذلك.

عندما أفعل الشيء نفسه مع مكونة تبديل الوضع المظلم / الفاتح، وإذا تم تعيين تفضيل السمة الخاص بي في Discourse على فاتح، فإن التبديل يسمح لي بالفعل بالتبديل إلى الوضع الفاتح (وهو أفضل في رأيي) ولكن شعار الموقع في الرأس يظل في الوضع المظلم ويصعب رؤيته في الوضع الفاتح. عندما أنظر في الفاحص، أرى العنصر يبدو كالتالي:

<div> class="title"><a> href="/" data-auto-route="true"> <picture> <source srcset="<link to image>" media="(prefers-color-scheme: dark)"> <img src="<link to image>" id="site-logo" class="logo-big"> </picture> </a> </div>

لاحظت الجزء media=“(prefers-color-scheme: dark)” على الرغم من أننا الآن في وضع فاتح تم تعيينه بواسطة التبديل.

يجب أن أضيف أن شعار الموقع عادة ما يتحول بسلاسة بين الوضع الفاتح والمظلم عندما يكون خيار “تمكين مخطط الألوان التلقائي للوضع المظلم” في Discourse غير محدد. ولكن، هذا يمنع عرض مكونة تبديل الوضع المظلم / الفاتح

أيضًا، إذا تم تعيين تفضيل السمة الخاص بي في Discourse على مظلم من التفضيلات > الواجهة > السمة، وكان تفضيل نظامي مظلمًا أيضًا، فإن التبديل لا ينتقل بين الفاتح والمظلم - يظل دائمًا على السمة المظلمة.

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

[MattiaB (Mattia)]

@agungor

عندما أفعل الشيء نفسه مع مكون التبديل بين الوضع الداكن / الفاتح، وإذا كان تفضيلي للمظهر مضبوطًا على فاتح في Discourse، فإن المفتاح يسمح لي بالتبديل إلى الوضع الفاتح (وهو أفضل في رأيي) ولكن شعار الموقع في الرأس يبقى في الوضع الداكن ويصعب رؤيته في الوضع الفاتح.

نفس الشيء هنا! هل وجدت حلاً؟

أنا لست مطور واجهات أمامية ولكنني قمت ببعض التصحيحات:
عندما أكون في الوضع الداكن، كما هو مضبوط على جهازي، فإن HTML للشعار يبدو كالتالي:

ويبدو الشعار جيدًا، مع عمل الوضع الداكن بالكامل. عند التبديل إلى الوضع الفاتح، يصبح المظهر فاتحًا ولكن الشعار يختفي (يبقى الشعار الداكن).

هذا ما يبدو عليه HTML:

هناك سطر إضافي، \u003csource srcset=\"https://radixtalk.com/uploads/default/original/1X/19838ecb731d3f87d9db76c927e793ab2e159f1e.png\" media=\"(prefers-color-scheme: dark)\"\u003e والذي “يمنع” تحميل الشعار الصحيح. إذا قمت بإزالة هذا السطر باستخدام “Inspect Element”، وتركت فقط \u003cimg src=\"https://radixtalk.com/uploads/default/original/1X/237090c67d33a1a38f9f031336dab420c4c4a37d.png\" alt=\"RadixTalk\" id=\"site-logo\" class=\"logo-small\" width=\"36\"\u003e، يظهر الشعار الصحيح.

آمل أن تكون هذه المعلومات مفيدة.

[agungor]

@MattiaB

نفس الشيء! هل وجدت حلاً؟

أخشى أنني لم أفعل. انتهى بي الأمر بتغيير لون خلفية الرأس بطريقة لم يعد فيها تبديل الشعار بين الوضع الفاتح والداكن مهمًا