جارٍ التحقيق في مشاكل الوضع المظلم لبريد ملخص النشاط

[simon]

كان من المفترض أن تكون هذه مشاركة قصيرة مع بعض الصور وحل سهل التطبيق. لقد خرج الأمر عن السيطرة. البريد الإلكتروني بتنسيق HTML صعب. للمتعة، إليك كيف يمكن أن تسوء الأمور: Gmail's dark mode · Issue #68 · hteumeuleu/email-bugs · GitHub

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

---

كانت هناك بعض الأسئلة الأخيرة حول كيفية عرض رسائل البريد الإلكتروني الموجزة على عملاء البريد الإلكتروني الذين تم ضبطهم على الوضع المظلم. المشكلة الرئيسية هي أن لون خلفية رأس الموجز ينعكس في عملاء البريد الإلكتروني الذين يتعاملون مع الوضع المظلم عن طريق عكس الألوان بالكامل (تطبيق Gmail (iOS)، Outlook 2021 (Windows)، Office 365 (Windows)، و Windows Mail). هذا يخلق مشكلة تباين بين لون الرأس وشعار الموقع.

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

جميع الصور أدناه من خدمة اختبار البريد الإلكتروني Litmus:

من موقع Discourse بمخطط ألوان مظلم، باستخدام شعار PNG أبيض بخلفية شفافة:

متوقع (Gmail App Dark لنظام Android):

ضعيف (Gmail Dark لنظام iOS، OL Office 365 Dark، Outlook 2021 Dark، Windows 10 Mail Dark):

نظرة عامة على عملاء الهاتف المحمول (Gmail لنظام iOS هو العميل الوحيد الذي يعاني من مشاكل واضحة مع لون الرأس):

إليك نفس الاختبار مع البريد الإلكتروني الموجز لـ Meta (مخطط الألوان الفاتح الافتراضي، شعار PNG مظلم على خلفية شفافة). لاحظ أن Meta لا يملك إعداد apply custom styles to digest ممكّنًا، لذلك لا يحصل على علامات وأنماط الوضع المظلم للعملاء الذين يدعمونها (Apple Mail وإصدارات حديثة من بريد iOS). إذا تم تمكين إعداد apply custom styles to digest، فأنا أشك في أن اختبارات iPhone Dark ستواجه أيضًا مشاكل في تباين الشعار/لون الخلفية.

هناك طريقتان يمكن من خلالهما إجبار لون خلفية رأس البريد الإلكتروني على مطابقة لون مخطط الألوان الافتراضي للموقع:

بالنسبة لتطبيق Gmail لنظام iOS، يمكن تعيين لون خلفية الرأس باستخدام صورة خلفية تم إنشاؤها باستخدام linear-gradient. لا يتم عكس ألوان الصور الخلفية التي تم إنشاؤها بهذه الطريقة. الحيلة هي تعيين كلا لوني linear-gradient إلى قيمة “لون خلفية الرأس” لمخطط الألوان الافتراضي لموقع Discourse.

يمكن تحقيق ذلك الآن عن طريق إضافة CSS مخصص إلى علامة التبويب Admin / Customize / Email Style / CSS. قم بتعيين قيم الألوان إلى قيمة “لون خلفية الرأس” لمخطط الألوان الافتراضي الخاص بك. (لاحظ أنه لا يمكن استخدام var(--header_background) لتعيين اللون في محرر CSS للبريد الإلكتروني):

.digest-header {
    background-image: linear-gradient(#111, #111);
}

اختبار هذا النهج للبريد الإلكتروني الموجز لـ Meta، بدأت أشك في أنه حل للمواقع التي لديها مخطط ألوان افتراضي فاتح. الشعار مقروء، ولكن هل يبدو هذا غريبًا بعض الشيء؟

بالنسبة لعملاء البريد الإلكتروني لسطح المكتب Outlook 2021 Dark و Windows 10 Mail Dark، يمكن إصلاح مشكلة عكس لون خلفية الرأس عن طريق إضافة قاعدة !important إلى background-color المعين لـ .digest-header. لا يمكن تحقيق ذلك عبر CSS مخصص لأن Discourse يضيف بالفعل نمط background-color إلى العنصر بدون قاعدة !important. تتم إضافة هذه القاعدة بعد CSS المخصص، لذا فهي لها الأسبقية. (لاحظ أن هذا النهج يبدو أنه يعمل فقط لإجبار لون الخلفية على لون داكن. يفشل عندما أحاول استخدامه لإجبار خلفية الرأس على #ffffff.)

المشكلة المتعلقة بلون النص في قسم “منذ زيارتك الأخيرة” لعملاء البريد الإلكتروني الذين يقومون بعكس الألوان بالكامل لا يبدو أن لها حلاً سهلاً. هناك حيلة لتطبيق Gmail لنظام iOS مقترحة هنا: Fixing Gmail’s dark mode issues with CSS Blend Modes — HTeuMeuLeu.com. تستخدم أوضاع المزج لخداع Gmail لتعيين لون نص أبيض. إنها تعمل من الناحية النظرية، ولكن نظرًا لتعقيد ترميز البريد الإلكتروني الموجز، لا أعتقد أن الأمر يستحق المتابعة.

خلاصة القول، أعتقد أنه بالنسبة لمواقع Discourse التي لديها مخطط ألوان مظلم كمخطط ألوان افتراضي، سيكون الحل الجيد في الوقت الحالي هو إضافة CSS الذي نشرته أعلاه إلى علامة التبويب Email Style / CSS الخاصة بهم. سيؤدي هذا إلى جعل شعار الموقع مقروءًا على تطبيق Gmail Dark لنظام iOS. لم يتسبب إضافته في أي مشاكل مع عملاء البريد الإلكتروني الآخرين الذين اختبرتهم. بالنسبة للمواقع التي لديها مخطط ألوان فاتح افتراضي، أنا أقل تأكيدًا بشأن هذا النهج. إجبار خلفية رأس بيضاء على شاشة داكنة لا تبدو جيدة.

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

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

لتحسين الوضع المظلم على عملاء Outlook لسطح المكتب، يمكن لـ Discourse ترك بعض أسماء الفئات في HTML للبريد الإلكتروني بدلاً من إزالتها جميعًا. يمكن استخدام أسماء الفئات هذه لاستهداف الوضع المظلم على Outlook: https://litmus.com/community/discussions/8256-outlook-app-vs-dark-mode-on-ios-a-disaster#comment-16402. (لاحظ أن Outlook لا يمكنه التعامل مع فئات متعددة على عنصر، لذلك لا تزال بعض أسماء الفئات بحاجة إلى إزالتها من ملف digest.html.erb.)

[simon]

أدركت أنني ربما لم أوضح المشكلة الأكثر وضوحًا بما فيه الكفاية. تم تمكين إعداد الموقع apply custom styles to digest (تطبيق أنماط مخصصة للملخص) افتراضيًا. يُستخدم هذا الإعداد لإضافة علامات وصفية وقواعد CSS التي تتسبب في عرض عملاء البريد الإلكتروني لنظام iOS رسائل البريد الإلكتروني في الوضع الداكن إذا قام المستخدم بتمكين الوضع الداكن على الجهاز.

ما لم يتم اتخاذ عناية خاصة لتحميل شعار ملخص يتمتع بتباين كافٍ مقابل الخلفيات الفاتحة والداكنة، فإن رسائل البريد الإلكتروني الملخصة من المواقع التي تحتوي على شعار مُحسَّن للخلفيات الفاتحة، والتي يتم عرضها في الوضع الداكن على عملاء البريد الإلكتروني الشائعين ستبدو مشابهة لهذا:

سيؤدي تعطيل إعداد الموقع apply custom styles to digest (تطبيق أنماط مخصصة للملخص) إلى نتائج أفضل في الواقع. مع تعطيل هذا الإعداد، لن يتم تطبيق أنماط الوضع الداكن على تطبيقات البريد الإلكتروني لنظام iOS. ومع ذلك، سيتم تطبيقها على عملاء البريد الإلكتروني لنظام Android وتطبيق Gmail لنظام iOS.

ربما يجب أن تكون أفضل ممارسة حالية هي محاولة تحميل شعار إلى إعداد الموقع digest logo (شعار الملخص) الذي يظهر بشكل جيد مقابل الخلفيات الفاتحة والداكنة. إذا لم يكن ذلك ممكنًا، فيجب على مواقع Discourse ذات مخطط الألوان الافتراضي الفاتح تعطيل إعداد الموقع apply custom styles to digest (تطبيق أنماط مخصصة للملخص). يجب على مواقع Discourse ذات مخطط الألوان الافتراضي الداكن إبقاء الإعداد ممكّنًا. لا تأخذ النصيحة بشأن إعداد الموقع apply custom styles to digest (تطبيق أنماط مخصصة للملخص) على أنها نهائية بعد، ولكن بناءً على بعض الاختبارات، يبدو أنها النهج الصحيح.

@simon

قد يكون من المفيد النظر في توفير إعدادات dark_mode_digest_logo (شعار ملخص الوضع الداكن) و light_mode_digest_logo (شعار ملخص الوضع الفاتح). على بعض عملاء البريد الإلكتروني على الأقل، سيكون من الممكن اكتشاف الوضع وعرض الشعار المناسب.

سينجح هذا فقط مع عملاء البريد الإلكتروني الذين يدعمون @media (prefers-color-scheme): Can I email… @media (prefers-color-scheme). سيكون هناك بعض المخاطر في التسبب في ظهور كلا الإصدارين من الشعار على عملاء البريد الإلكتروني الآخرين.

[Canapin (Coin-coin le Canapin)]

شكراً لك على هذا العمل الشامل يا سيمون

@simon

القضية الرئيسية هي أن لون خلفية رأس الملخص يتم عكسه في عميل البريد الإلكتروني الذي يتعامل مع الوضع المظلم عن طريق إجراء عكس كامل للألوان

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

[jordan.vidrine]

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

سنحتاج إلى القيام بذلك في الواجهة الخلفية، ولكن استخدام كتلة صورة مع اللون المضمن كخلفية سيمنع Gmail من عكس لون الخلفية.

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

[simon]

@jordan.vidrine

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

بدون القيام بذلك، من الممكن فرض ألوان خلفية معينة على معظم عملاء البريد الإلكتروني، الاستثناءات تبدو بعض عملاء البريد الإلكتروني القدامى لـ Outlook لسطح المكتب. (أفترض أن الوضع المظلم لا يُستخدم كثيرًا في عملاء سطح المكتب.)

بالنسبة لعملاء البريد الإلكتروني لنظام iOS (باستثناء Gmail)، يقوم Discourse بذلك بالفعل إذا تم تمكين الإعداد apply custom styles to digest. المشكلة هي أنه يقوم بتشفير لون الخلفية بشكل ثابت ولا يحترم لون “خلفية الرأس” الخاص بالموقع:

app/helpers/email_helper.rb

يمكن تغيير القاعدة [dm='header'] إلى:

"
[dm='header'] {
  background: ##{ColorScheme.hex_for_name('header_background')} !important;
}
"

إذا كان منطقيًا، يمكن اتخاذ نهج مماثل لقسم “منذ زيارتك الأخيرة”:

"
[dm='body_primary'] {
  background: #{SiteSetting.email_accent_bg_color} !important;
  color: #{SiteSetting.email_accent_fg_color} !important;
}
"

لاحظ أن السمة dm لأنماط الوضع المظلم تُضاف إلى البريد الإلكتروني هنا: discourse/lib/email/styles.rb at main · discourse/discourse · GitHub.

شيء من هذا القبيل يجب أن يعمل لحل المشكلة في عملاء البريد الإلكتروني لنظام iOS (باستثناء Gmail).

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

أعتقد أن الحل الأسهل للتعامل مع قسم “منذ زيارتك الأخيرة” لعملاء البريد الإلكتروني الذين يقومون بعكس الألوان بالكامل هو مجرد السماح للعملاء بإجراء العكس، ولكن تأكد من وجود تباين كبير بين إعدادات email accent accent bg color و email accent fg color:

هذا يجب أن يمنع حالات مثل هذه (مع القيم الافتراضية لتلك الإعدادات):

[simon]

إن أبسط تغيير يمكن أن تجريه Discourse الآن لزيادة احتمالية عرض رسائل البريد الإلكتروني الملخصة بشكل صحيح في الوضع المظلم هو عدم تمكين إعداد الموقع apply custom styles to digest (تطبيق الأنماط المخصصة على الملخص) افتراضيًا. (ملاحظة، سيؤثر هذا فقط على عملاء البريد الإلكتروني لنظام iOS).

تغيير صغير آخر سيكون تحديث نص إعداد الموقع digest logo (شعار الملخص) لتشجيع تحميل شعار يتمتع بتباين كافٍ عند عرضه مقابل لون خلفية فاتح أو داكن. الحيلة المفضلة للشعارات الداكنة هي إضافة مخطط أبيض للشعار.

من المحتمل أن صفحة “Emails / Preview summary” (البريد الإلكتروني / معاينة الملخص) يجب أن تقدم تحذيرًا بأن بعض عملاء البريد الإلكتروني سيقومون بـ “عكس الألوان بالكامل” عند عرض البريد الإلكتروني في الوضع المظلم. يمكن تشجيع مالكي المواقع على اختبار رسائل البريد الإلكتروني الملخصة الخاصة بهم في الوضع المظلم على أي عملاء بريد إلكتروني لديهم إمكانية الوصول إليها.

[damienalexandre]

شكراً على التفاصيل!

كحل مؤقت سريع، أضفت هذا الـ CSS إلى إعدادات البريد الإلكتروني:

@media (prefers-color-scheme: dark) {
    body > div > table > tbody > tr > td > table[dm="header"] {
        background: #c89f4c !important;
    }
}

لقد جعل هذا خلفية الرأس أفتح وشعاري معروض بشكل صحيح الآن (في المعاينة على الأقل).