يتيح هذا المكون التبديل التلقائي إلى سمة داكنة عندما يكون المتصفح مضبوطًا على الوضع الداكن. يعمل هذا للمستخدمين المسجلين فقط على جميع المتصفحات التي تدعم استعلام الوسائط prefers-color-scheme.
بشكل افتراضي، يكون هذا المكون مفعّلًا، ويمكن للمستخدمين فرديًا إيقافه في شاشة التفضيلات > الواجهة. يمكن للمسؤولين أيضًا ضبط المكون ليكون معطلًا افتراضيًا، وفي هذه الحالة سيظهر للمستخدمون زر لتمكين التبديل التلقائي في تفضيلات الواجهة.
كيف يعمل؟
إذا كان المتصفح في الوضع الداكن، سيعيد هذا المكون تحميل Discourse مع تفعيل السمة الداكنة. وإذا عاد المتصفح إلى الوضع الفاتح، سيعيد هذا المكون التحميل مع السمة الافتراضية المفعّلة.
كما سيعيد التحميل إذا تم تبديل الوضع الداكن بينما يكون المستخدم داخل الموقع (كما هو موضح في الفيديو أعلاه).
(إذا كان لديك أكثر من سمتين مفعّلتين، واختار المستخدم سمة غير السمة الافتراضية أو الداكنة، فلن يفعل هذا المكون شيئًا، أي أنه سيحترم اختيار المستخدم.)
الإعدادات
تأكد من تثبيت سمة داكنة وأن المستخدمين قادرين على اختيارها.
أضف هذا المكون إلى السمة الافتراضية وإلى السمة الداكنة (أمر بالغ الأهمية؛ إذا لم تقم بإضافته إلى السمتين، فلن يتمكن المستخدمون من العودة إلى السمة الافتراضية).
في إعدادات المكون، أدخل معرف سمتك الداكنة في حقل معرف السمة الداكنة.
I just pushed a small update to this theme component to make it compatible with iOS 13 (which will ship with Dark Mode as well as an option to automatically enable it in the evenings).
Thanks for this awesome component, I’ve been looking for this! Unfortunately I can’t seem to get it to work. Perhaps something trivial but where do I find the dark theme id? Is that just the name of the theme?
Google Chrome now supports dark mode on iOS 13 and iPadOS 13. I’m not too sure about dark mode support for Google Chrome on MacOS Mojave or MacOS Catalina though.
it should work in Chrome already, under the hood it uses the prefers-color-scheme media query and browser support for it is pretty good nowadays: Can I use... Support tables for HTML5, CSS3, etc
Yeah, I also really hope that this becomes part of the standard Discourse install. Some people only like to update their forums and don’t really go beyond that.
@pmusaraj one thing I noticed is that the switching only works for logged in users, is there a way to also have it automatically set for anonymous users that haven’t created an account yet (e.g. switch to dark theme while using a private browser window)?
This component seems to create an issue with 2.4.0.beta11+39. In my registered-users-only community the login screen at https://mydomain/login is blank. It works normally when this component is deactivated.
I can’t reproduce this locally with latest Discourse and latest version of the component. When the login screen is blank, is there an error in the browser console?
Update: the issue Thomas was running into is now fixed in the component. Thanks for the report!
يدعم Discourse الآن Automatic Dark Mode color scheme switching ضمن النواة، لذا تم إيقاف هذا المكون عن العمل ولا ينبغي استخدامه بعد الآن.
