مرحباً، المشكلة الموصوفة في هذين الموضوعين:
لا تزال تحدث لدي (أقوم باختبار أحدث إصدار/إصدار تجريبي من Discourse المستضاف)
@mk0r لا يمكنني إعادة إنتاج هذه المشكلة هنا على ميتا. أستخدم سمة/نظام ألوان Grey Amber هنا، وهي ليست السمة الافتراضية لميتا:
وتحتوي العلامة الوصفية theme-color على اللون الصحيح بالنسبة لي:
<meta name="theme-color" content="#36393e">
#36393e هو لون خلفية الرأس لمخطط Grey Amber. إذا فتحت ميتا في نافذة متصفح متخفي دون تسجيل الدخول، فإن العلامة الوصفية theme-color تحتوي على لون خلفية الرأس لمخطط الألوان الافتراضي (المخطط الفاتح):
<meta name="theme-color" content="#ffffff">
هل حاولت تنظيف ذاكرة التخزين المؤقت للمتصفح/ملفات تعريف الارتباط لموقعك؟ إذا لم يساعد ذلك، هل يمكنك محاولة معرفة ما إذا كان بإمكانك إعادة إنتاج هذه المشكلة هنا على ميتا ومشاركة خطوات إعادة إنتاج المشكلة؟
إعجابَين (2)
شكراً لك على التحقق، يمكنني إعادة إنتاجه - يتعلق الأمر تحديداً بالوضع المظلم.
theme-color يبقى كما هو عند استخدامه في الوضع الافتراضي/الفاتح، على الأقل بالنسبة لي، هنا في meta وفي تثبيتي الخاص.
لقد حاولت حتى إضافة هذا إلى head:
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="black" />
يظهر في المصدر ولكنه لا يؤثر على أي شيء، ربما لأن الوسم meta الأول لا يحدد prefers-color-scheme: light؟
المشكلة الرئيسية بالنسبة لي هي شريط الحالة الساطع الذي يتعارض بشدة مع الصفحة المظلمة على الهاتف المحمول وكونه أبيض ساطعًا عند التمرير للتحديث.
لقد سجلت للتو للتعليق لأنني أعتقد أن هذه هي نفس المشكلة التي أواجهها.
باستخدام ما أعتقد أنك تسميه تطبيق الويب التقدمي (على نظام Android 13، خيار تثبيت التطبيق عند عرض منتدى Discourse على Chrome، في هذه الحالة هو https://llllllll.co/) يعكس التطبيق إعدادات الوضع المظلم للنظام بشكل صحيح ولكن شريط الحالة يبقى في الوضع الفاتح. هذه المشكلة غير موجودة في Chrome. انظر الصورة أدناه: التطبيق على اليسار، متصفح Chrome على اليمين.
إعجابَين (2)
حزين لأن هذا لا يحظى بأي اهتمام 
لست تقنيًا بما يكفي لكتابة طلب سحب ولكني أشعر أن هذا يجب أن يكون إصلاحًا بسيطًا إلى حد ما؟ ربما يبدو الأمر انتقائيًا ولكنه توجد أسباب جمالية ووظيفية تجعلني آمل أن يتم إصلاح هذا 
لقد بحثت في هذا مرة أخرى الأسبوع الماضي وتمكنت من إعادة إنتاج هذه المشكلة باتباع الخطوات التالية:
-
قم بتكوين نظام التشغيل الخاص بك لاستخدام الوضع المظلم (في نظام التشغيل Windows 11، يتم ذلك في الإعدادات → تخصيص → الألوان → اختر وضعك)
-
في تفضيلات Discourse الخاصة بك، حدد مخططات ألوان مختلفة للوضع العادي والمظلم وأعد تحميل الصفحة
-
الآن يجب أن ترى مخطط الألوان الذي حددته للوضع المظلم يسري في واجهة المستخدم (كما هو متوقع)، ولكن علامة
theme-colorالوصفية ستحتوي على قيمة لونheader_backgroundلمخطط الألوان الذي حددته للوضع الفاتح عندما يجب أن تكون في الواقع للوضع المظلم.
هذا الأمر صعب الإصلاح بعض الشيء لأننا على جانب الخادم - وهو المكان الذي يتم فيه عرض جميع العلامات الوصفية - ليس لدينا سياق حول ما إذا كان العميل/المتصفح سيستخدم مخطط الألوان الفاتح أو المظلم. نحن ببساطة نضمن تعريفات الألوان لكل من المخططين الفاتح والمظلم، ثم يختار العميل/المتصفح المخطط الذي يتوافق مع تفضيل المستخدم وفقًا للاستعلام الإعلامي prefers-color-scheme.
ومع ذلك، يبدو أن علامة theme-color الوصفية تقبل سمة media، لذلك يجب أن نكون قادرين على تضمين علامة theme-color وصفية أخرى للمخطط المظلم مع تعيين media إلى (prefers-color-scheme: dark). سأحاول إنجاز هذا هذا الأسبوع.
5 إعجابات
أعتقد أنه قد يكون الحال أنه إذا لم تحدد وضع الإضاءة أو الوضع الداكن في علامة الوصف الأولى، وفي العلامة الوصفية الثانية تحدد الوضع الداكن، فسيظل الوضع الداكن يأخذ من العلامة الأولى. لذلك أعتقد أنه يجب تحديد كلتا العلامتين، لكل من وضع الإضاءة والوضع الداكن.
إعجابَين (2)
نعم، أعتقد أن تغييري سيجعل الوسم الوصفي (meta tag) لمخطط الألوان الفاتح يحتوي على media="(prefers-color-scheme: light)" والوسم الخاص بالمخطط الداكن يحتوي على media="(prefers-color-scheme: dark)" ويجب أن تكون المتصفحات قادرة على اختيار الوسم الذي يتطابق مع تفضيلات المستخدم.
3 إعجابات
للعلم @mk0r لقد قمت بإصلاح هذه المشكلة قبل يومين في:
3 إعجابات
شكرا لك 
يبدو رائعًا حقًا ولكنه للأسف لا يعمل معي. أعتقد أن media="all" يتجاوز media="(prefers-color-scheme: dark") في الوضع المظلم أيضًا؟
إعجاب واحد (1)
هممم، هل يمكنك مشاركة كيفية اختبارك لهذا والمتصفح الذي تستخدمه؟
إعجاب واحد (1)
أوه نعم بالتأكيد، آسف لقد نسيت.
لقد جربته على:
Android 12
Chrome 106.0.5249.126 PWA
MacOS 12.4
Chrome 105.0.5195.125 PWA
إعجاب واحد (1)
نظرت في الإصلاح الذي تم الإعجاب به على GitHub وأعتقد أن المشكلة قد تكون هي المشكلة الموصوفة في رسالتي السابقة
قد أكون تجاوزت نطاق معرفتي التقنية، لكنني كنت ألقي نظرة على هذه الأسطر:
it "renders theme-color meta for the light scheme with media=all and another one for the dark scheme with media=(prefers-color-scheme: dark)" do
expect(helper.discourse_theme_color_meta_tags).to eq(<<~HTML)
<meta name="theme-color" media="all" content="#abcdef">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#defabc">
HTML
أعتقد أن meta name="theme-color" media="all" له الأسبقية على meta name="theme-color" media="(prefers-color-scheme: dark)" حتى عندما يكون المستخدم في الوضع المظلم.
انظر هنا:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color
و
https://web.dev/learn/design/theming/
أعتقد أن الصفحات النهائية المعروضة تحتاج إلى الأسطر التالية لتعمل بشكل صحيح:
<meta name="color-scheme" content="light dark">
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">
حيث سيتم استبدال قيم الهيكس هذه بقيم مخطط الألوان المختار.
إذا لم يكن التثبيت/المظهر يحتوي على مخطط ألوان مظلم مختلف، فستكون القيم هي نفسها.
أدرك أن هذا الأمر دقيق بعض الشيء ولكنه يحدث فرقًا حقًا، لذا فإن هذا الإصلاح محل تقدير كبير. أعتقد أن البديل هو أن نتمكن من تحديد theme-color لـ all أو لكل من الأوضاع المظلمة والفاتحة عبر واجهة المستخدم الإدارية. أو عدم وجود theme-color على الإطلاق حتى يقوم الجهاز بتعيين لون واجهة المتصفح ويحترم تفضيل المستخدم للوضع المظلم/الفاتح.
آمل أن يساعد هذا 
إعجابَين (2)
FYI @Don و @mk0r، يجب أن يكون هذا ثابتًا حقًا الآن:
(لست متأكدًا من هو kaden-stytch على Meta، ولكن مهما كنت، شكرًا لك! 
)
4 إعجابات
نعم، شكراً لك الآن يعمل بشكل مثالي! 
3 إعجابات
تم إغلاق هذا الموضوع تلقائيًا بعد يومين. لم يعد يُسمح بالردود الجديدة.