في 30 مارس 2020 ، أعطى مطورو Stack Overflow لزوار موقع الويب الفرصة لاستخدام الإصدار التجريبي من السمة المعتمة. المادة ، التي ننشر ترجمتها ، مخصصة لقصة كيفية إنشاء المظهر المظلم لـ Stack Overflow.Banner on Stack Overflow ، الذي يسمح لك بتضمين مظهر داكناسمي آرون شيكي. أنا رئيس التصميم في Stack Overflow. أشارك في تصميم مكونات الواجهة التي تكمن وراء الميزات الجديدة للمشروع.بادئ ذي بدء ، سخرية قليلا. أنا شخصياً لست من محبي مظاهر الواجهة المظلمة.غالبًا ما أرى أن مستوى التباين للواجهات المظلمة منخفض جدًا. من الصعب استخدام مجموعة كاملة من الألوان في تصميم مثل هذه الواجهات. الأمر نفسه ينطبق على محاكاة الحجم باستخدام الظلال ، وتطبيق تأثيرات بصرية أخرى. عندما قرأت نصًا فاتحًا ، يقع على خلفية داكنة ، تتعب عيني. من الصعب التعامل مع ظواهر مثل التباين المتزامن عند استخدام موضوعات فاتحة ، وإذا تم استخدام مظهر داكن ، يصبح كل شيء أكثر تعقيدًا.لكن أنا الشخص الذي أثمرت جهوده موضوعًا مظلمًا على Stack Overflow.لم يكن العمل الذي أريد الحديث عنه يهدف على وجه التحديد إلى تطوير موضوع مظلم ، على الرغم من حقيقة أن العديد من المستخدمين قد طلبوا منذ فترة طويلة تجهيز المورد بمثل هذا الموضوع. ولكن أثناء التحرك نحو موضوع مظلم ، كان علينا حل العديد من المشاكل. على وجه الخصوص ، تمت ترقية رمز الواجهة الأمامية لـ Stack Overflow ، وتم تحسين إمكانية الوصول إلى المحتوى. من خلال العمل على موضوع مظلم ، حصلنا على حافز لاستخدام نظام التصميم الخاص بنا على نطاق أوسع في المشروع .هل يمكننا منح المستخدمين مظهرًا داكنًا ، وفتح الطريق في الوقت نفسه لتحسين إمكانية الوصول إلى المشروع؟ أجبنا على هذا السؤال بالإيجاب ، بعد أن فعلنا كل ما سأقوله الآن.البحث عن الألوان
عند إنشاء مقاييس الألوان الأصلية للمشروع ، ربما كنا ساذجين قليلاً ، أخذنا قيمة لون معينة وقمنا بتعديلها باستخدام التحويلات التي تم تنفيذها باستخدام أقل . لذلك ، على سبيل المثال ، يمكن أن نعلن عن متغير أقل @redونجعل اللون أغمق عدة مرات باستخدام التصميم darken(@red, 10%). وينطبق الشيء نفسه على توضيح الألوان المتعددة باستخدام tint(@red, 10%). يمكن أن يعطي ذلك مقياسًا للألوان تكون فيه الألوان في النطاق من @red-050إلى @red-900بزيادات 10٪.عندما حاولت أولاً فهم كيف قد يبدو مورد Stack Overflow في الوضع المظلم ، قررت فقط محاولة تغيير الخلفية البيضاء إلى الأسود و "قلب" مقاييس الألوان. مع هذا النهج ، @red-050يصبح اللون اللون@red-900، تتغير الألوان بالتوافق بين الألوان الأولية والنهائية للمقياس. لكن هذه الألوان نفسها تظل كما هي من قبل.مقاييس الألوان الفاتحة والداكنة للون الأحمر ،وبهذه الطريقة ، تأثر تباين العناصر. واتضح أن ما حدث يحتوي على شيء لم يعجبني بشكل عام الموضوعات المظلمة. على سبيل المثال ، إذا نظرت عن كثب إلى الإصدار الأغمق من اللون الأحمر ، الموجود على خلفية داكنة ، سترى أن اللون لا يمكن تمييزه تقريبًا. سنتحدث أكثر عن هذا أدناه.نحن بالتأكيد بحاجة إلى التوصل إلى شيء أفضل.▍ البدء: تصميم التخطيط
فقط أحاول رسم مقاييس الألوان ، في الواقع لم أحقق أي شيء. لا يمكن أن تسمى هذه الخطوة البداية الحقيقية للعمل على موضوع مظلم. لذلك ، قررت البدء في تطوير تخطيط واختيار الألوان يدويًا في Figma . لقد اخترت الألوان ، مع التركيز على كيفية ظهور Stack Overflow ، في رأيي ، وعدم التفكير في كيفية ارتباط الألوان الجديدة بالألوان الموجودة. كان تقليل التباين العام هو المفتاح للحفاظ على تأثير العمق في الواجهة ، لدعم ظلال العناصر ، لتطبيق مجموعة كاملة من الألوان.لقد سمح لنا البدء في تصميم التصميم ، أولاً وقبل كل شيء ، بفهم التأثير الجمالي الذي نسعى إليه ، مع عدم الاهتمام بالمتطلبات الفنية للمشروع▍ اختيار خوارزمية محسنة للعمل مع الألوان
بعد أن التقطت خلفية أفتح للموضوع المظلم ، حصلت على فرصة لاستكشاف مقاييس الألوان بشكل أعمق. أولاً ، كنت بحاجة للتعامل مع بعض مشاكل الألوان لنظام التصميم الحالي ، والتي ظهرت عند تطبيق السمة الخفيفة. في الطرف المشرق من الطيف ، لم يبدو اللونان الأحمر والأصفر بالطريقة التي أريدها. بعض الألوان لها قيم أخف ، قريبة جدًا من الأبيض. كانت هناك ألوان أفتح قيمها كانت داكنة جدًا.أخف نسخة من اللون الأصفر لا يمكن تمييزها عن اللون الأبيض ، والأغمق لا يمكن تمييزه عن الأسود، ولدينا مشاكل في الطرف المظلم من الطيف. استخدام، والخلفية والألوان@red-900و@blue-900، لاحظنا أن هذه الألوان لا يمكن تمييزها من الأسود وعن بعضها البعض. كنا بحاجة إلى خوارزمية من شأنها أن تمنحنا الألوان التي يمكن تمييز نغمتها الأساسية لكل من الإصدار الأفتح والأغمق. سيسمح ذلك بإنشاء مكونات باستخدام قيم الألوان هذه.لا يمكن تمييز الألوان الأكثر قتامة لألواننا عن الأسود وعن بعضها البعض. من خلالإنشاء مكونات تنفذ الإشعارات ، لم نتمكن من استخدام الألوان من نظام التصميم لدينا. بدلاً من ذلك ، كنا بحاجة إلى اختيار ألواننا الخاصة على العين.هذه الألوان جميلة ، لكنها لا تستند إلى قيم الألوان من مقاييس الألوان لدينا ،وقد استخدمت أداة ColorBox الرائعةمن Lyft Designلتطبيع الألوان. بدلاً من تغيير الألوان بأبسط طريقة ، خطياً ، بزيادات 10٪ ، قمت بتطبيق منحنيات Bezier. هذا سمح لنا بتحقيق تحسينات كبيرة في المواضع المتطرفة لمقاييس الألوان.بعد تطبيع الألوان في الجزء المشرق من الطيف ، تمكنت من إنشاء إشعارات يتم أخذ ألوانها من ألوان نظام التصميم لديناcolors الألوان الداكنة
بعد أن قمنا بترتيب النسخة الخفيفة من الموقع ، حان الوقت لتجربة ألوان جديدة على خلفية داكنة. ونتيجة لذلك ، لجأت إلى الإعدادات اليدوية لما أنتجته خوارزمية مطابقة الألوان ، من خلال القيام بذلك للحفاظ على ألوان الشركة التي تم استخدامها لفترة طويلة جدًا. سمح لي هذا باستخدام ألوان جديدة في الإنتاج وفي نفس الوقت لم أقم بتغييرات جذرية في مظهر المشروع.تدرج لوني كامل طبيعيتطبيق سمة داكنة في واجهة Stacks
إذا كنت تأمل بطريقة ما في تجهيز Stack Overflow بمظهر داكن ، فسوف أحتاج أولاً إلى تنفيذ سمة داكنة في نظام تصميم Stacks الخاص بنا ، واستخدامها كأرضية لاختبار التكنولوجيا الجديدة.▍ المتغيرات
كنت بحاجة إلى تحويل قيم اللون الست عشرية الثابتة الأقل تجميعًا إلى خصائص CSS المخصصة التي تم تصميمها لاستخدامها أثناء تشغيل البرنامج. النقطة هي أنه يجب تخزين قيم الألوان باستخدام هياكل العرض var(--red-500)، بدلاً من استخدام هياكل العرض الثابتة @red-500. لقد كانت مهمة مثيرة للاهتمام - سواء داخل تصميم النظام الخاص بنا أو داخل الموقع بأكمله. عادةً ما نأخذ قيمة لون واحد ، مثل @red-500، ونجعلها أفتح أو أغمق لإبراز الحالات المختلفة للعناصر (مثل الحالات التي تأخذها العناصر عند تحومها فوقها ، أو عندما يتم التركيز عليها) ، لاستخدامها كلون للخلفية أو لون حدود العناصر.إذا تحدثنا عن ألوان كل من الأزرار ، التي لدينا الكثير ، عن ألوان كل حالة لكل زر ، فيمكننا القول أنه تم الحصول على هذه الألوان في سياق مجموعة من التحولات لقيمة لون واحدة مجمعة. ذكرني مشهد واحد من فيلم "لعبة السقوط". هناك تحدثوا عن إمكانية تحويل استثمار عشرة ملايين إلى مليارات الدولارات. ليس من المستغرب أن تؤدي مثل هذه "التحولات" إلى الأزمة المالية.تكمن المشكلة في متغيرات CSS العادية في أنه لا يمكنك تطبيق تحويلات أقل عليها. يتم حساب قيم متغير CSS في وقت التشغيل ، لذلك darken(var(--red-500), 5%)يؤدي إنشاء مثل هذا إلى خطأ في الترجمة.كل هذا يعني أنني بحاجة إلى إعادة صياغة الرمز المسؤول ، على سبيل المثال ، لأزرار التصميم. في البداية بدا مثل هذا:.s-btn {
color: @white;
background-color: @blue-600;
border: 1px solid darken(@blue-600, 5%);
&:hover {
background-color: darken(@blue-600, 5%);
border-color: darken(@blue-600, 10%);
}
}
كنت بحاجة إلى المضي قدمًا للإشارة إلى قيم الألوان الدقيقة الموضحة في نظام الألوان لدينا. ونتيجة لذلك ، كنت بحاجة إلى الوصول إلى هذا الإصدار من التعليمات البرمجية:.s-btn {
color: var(--white);
background-color: var(--blue-600);
border: 1px solid var(--blue-700);
&:hover {
background-color: var(--blue-700);
border-color: var(--blue-800);
}
}
في الوقت نفسه ، كان من الواضح أن كل شيء لم يقتصر على الأزرار. لذلك ، كنت بحاجة إلى إعادة صياغة أنماط جميع المكونات المتاحة في Stacks. وينطبق الشيء نفسه على الإشعارات والقوائم المنبثقة والنوافذ المشروطة والروابط والعديد من المكونات الأخرى.Comp توافق المتصفح
إذا تحدثنا عن متغيرات CSS ، فإن تطبيقها يعني الحاجة إلى النظر في دعمها من قبل المتصفحات. على وجه الخصوص ، لا يدعمهم Internet Explorer 11 - وهو متصفح لم ننسه أبدًا. ونتيجة لذلك ، قررنا التخلي عن دعم IE11 ، والتخلص من جميع عمليات اختراق CSS التي أضفناها إلى النظام على مر السنين من تطويره ، مع مراعاة ميزات هذا المتصفح. بالإضافة إلى ذلك ، قررنا إرسال إشعارات إلى مستخدمي IE11 مع اقتراح تثبيت متصفح جديد. لم يكن هذا القرار سهلا بالنسبة لنا. تطلب تنفيذه أسابيع من إعادة الهيكلة.classes الفصول المشروطة
لم يعد IE11 يقيدني بعد الآن وكنت قادرًا على العمل مع الألوان في Stacks. قررت إضافة bodyفئة إلى العنصر .theme-system. بعد القيام بذلك ، تمكنت من استبدال الألوان الفاتحة بمكافئاتها الداكنة باستخدام استعلام الوسائط المناسب. بالإضافة إلى ذلك ، يمكننا رفض طلب الوسائط تمامًا بمجرد الإضافة إلى bodyالفصل .theme-dark. سيتيح هذا للمستخدمين استخدام المظهر الداكن للموقع بغض النظر عن إعدادات النظام الخاصة بهم. هذا ما حصلت عليه نتيجة لذلك:body {
--red-600: #c02d2e;
}
body.theme-system {
@media (prefers-color-scheme: dark) {
--red-600: #d25d5d;
}
}
body.theme-dark {
--red-600: #d25d5d;
}
لتحقيق المرونة الكاملة ، يجعل Stacks من الممكن العمل مع فئات الألوان الذرية ، والتي تنطبق فقط عند تمكين سمة داكنة. يمكن العثور على تفاصيل حول دعم CSS في Stacks هنا . على سبيل المثال ، إضافة فئة إلى عنصر. d:bg-green-100، يعبر المصمم عن الفكرة التالية: "في الوضع المظلم ، تحتاج إلى استخدام اللون الأخضر للخلفية bg-green-100." تسمح لنا الفئات الشرطية الإضافية المصممة للوضع المظلم بإزالة حدود العناصر وتغيير الخلفيات وضبط لون النص. في هذه التغريدة يمكنك مشاهدة مثال مثير للاهتمام لتعديل اللون. مثل هذا الإعداد ضروري في بعض الأحيان في الوضع المظلم. أريد أن أشير إلى أن أحد مصادر الإلهام عند العمل على الوضع المظلم للموقع بالنسبة لي كان إطار Tailwind CSS .استخدم سمة داكنة في Stacks
بعد تنفيذ السمة المعتمة في Stacks ، قررنا إضافة زر إلى أعلى واجهة النظام يسمح لك بالتبديل بين السمات. يجب أن يكون لدى موظفي الشركة قدرة سريعة ومريحة للتبديل بين موضوعات الألوان المختلفة للموقع.التبديل بين السمات الفاتحة والداكنة في Stacksتطبيق سمة داكنة على موقع Stack Overflow الرئيسي
لقد قمت بحل المهام المتعلقة بتنفيذ المظهر المظلم في واجهة نظام تصميم Stacks بسهولة نسبية. إعادة الهيكلة ، التي تأخذ في الاعتبار اعتبارات التطوير المستقبلي للنظام ، تجعل من السهل على Stacks أن يكون أصغر من الموقع الرئيسي من عواقب القرارات الخاطئة التي تم اتخاذها في الماضي. من أجل تزويد Stack Overflow بمظهر داكن ، كنت بحاجة إلى تقديم الدعم لمتغيرات أقل من أجل التوافق العكسي للحل. هذا سمح لنا بتنظيم تطبيق السمة الداكنة بشكل متزايد ، في أجزاء منفصلة من الواجهة.نظرًا لأن معظم واجهتنا ، التي تم إنشاؤها بعد 2018 ، تستند إلى Stacks ، فإن هذا الجزء من الواجهة يتلقى ، دون بذل جهود إضافية من جانبنا ، مظهرًا داكنًا وتخطيطات متجاوبة. ماذا عن الجزء الرئيسي من الواجهة؟ كل شيء هنا ليس بهذه البساطة.colorsالألوان الرئيسية للموقع
بادئ ذي بدء ، كنت بحاجة إلى إجراء أكبر التغييرات على الموقع التي يمكن إجراؤها دون انتهاك موضوع الضوء القياسي Stack Overflow. كانت المهام التي كان عليّ حلها بشكل أساسي استبدال المتغيرات الأقل الثابتة بمتغيرات CSS المكافئة لها. أولاً ، قمت بتطبيق النمط background-color: var(--white)على خلفية الموقع ، واستبداله بالنمط background-color: @white. وبفضل هذا ، يمكن الآن إعادة رسم المنطقة الرئيسية للقرى بسهولة في الخلفية الداكنة. ثم أجريت نفس العملية مع ألوان الخطوط وبعض العناصر الأخرى. يتألف هذا العمل بشكل أساسي من إزالة كمية كبيرة من كود CSS ، لأنه على سبيل المثال ، غالبًا ما كنا مغرمين بالأنماط التفصيلية بشكل مفرط ، وتعيين ألوان الخطوط للعناصر التابعة ، على الرغم من أننا يمكن أن نحصل على قيم اللون الموروثة من العناصر الأصلية.▍ عرض تصميم جديد لموظفي الشركة
بعد أن عملت على كتل كبيرة من الموقع، سألت لدينا المبرمجين آدم لير و نيك متسول ل مساعدتي في العثور على طريقة لاظهار نسخة أولية للموضوع الظلام لموظفي تجاوز المكدس. سيسمح هذا للموظفين بتضمين موضوع مظلم ، والذي لا يزال بعيدًا جدًا عن الاستعداد لمعرفة أي مناطق في الموقع لا تزال بحاجة إلى التحسين. هذا ، في اعتقادي ، سيشجعهم على المساعدة في صقل أجزاء من الموقع بأكثر حركة مرور. هذا سيسمح لي بالتغلب على العائق الرئيسي أمام التصميم الجديد. أي أنه سيساعد على دمج التصميم الجديد في قاعدة التعليمات البرمجية الموجودة.uttأزرار
إذا تم إنشاء منطقة الموقع التي كنت أعمل عليها باستخدام Stacks ، فمن أجل إعدادها لاستخدام الوضع المظلم ، كان من الضروري حل العديد من المشاكل. لنفترض ، أثناء العمل ، أنه كان من الممكن أن تقرر أنه في مكان ما لم تكن هناك حاجة إلى الحدود ، أو - في مكان ما ، كانت هناك حاجة إلى ظل خاص من اللون الرمادي كخلفية. قد يكون هذا التحضير لاستخدام النظام المظلم محدودًا. لسوء الحظ ، تم إنشاء معظم الموقع دون استخدام Stacks.وقد تجلى ذلك بشكل أوضح عندما يتعلق الأمر بالأزرار. على مر السنين من العمل على الموقع ، تم استخدام العديد من عمليات تنفيذ الأزرار فيه. كان هذا محبطًا بشكل خاص حيث قمنا بتصميم العناصر نفسها button. هذا يعني أن أي عنصر buttonأو عنصر مزينinput type=«button»، تم تعيين النمط الافتراضي. يتميز هذا النمط بمستوى عالٍ جدًا من الخصوصية ويعتمد على مجموعة من القواعد القديمة.أدت الحقيقة المذكورة أعلاه إلى الحاجة إلى الكثير من إعادة الهيكلة ، والتي لا تزال مستمرة. ويهدف إلى إزالة أنماط CSS على مستوى العناصر buttonواستبدالها بمكافئات من Stacks. على وجه الخصوص ، نحن نتحدث عن حقيقة أنه input type=«submit»يجب استبدال مئات العناصر <button type="submit" class="s-btn s-btn__primary">. بالإضافة إلى إضافة العمل ، ألاحظ أننا غالبًا ما نربط وظائف JavaScript بالمحددات المرئية. إذا قمت بتغيير الفئات التي تؤثر على مظهر العنصر ، فقد يؤدي ذلك إلى كسر وظيفة الزر. ونتيجة لذلك ، أثناء معالجة آلاف الأزرار ، كنت بحاجة إلى إضافة فئات إليها أولاًjs-وربط المعالجات بها ، ثم تخلص من الأنماط القديمة التي تحدد مظهر الأزرار.قادني هذا في النهاية إلى إزالة معظم فئات الأزرار القديمة ، مما سمح للأزرار بتغيير الألوان بشكل صحيح عند تشغيل سمة داكنة.Title عنوان الموقع
لتعقيد المهمة ، يمكن أن يعمل الرأس المستخدم في الموقع بأكمله في أوضاع مختلفة. نحن نتحدث عن وضعي الضوء والظلام ، وعن وضع الدعم لموضوع خاص. يستخدم خيار الموقع للفرق (Stack Overflow for Teams) وأنظمة الشركات موضوع رأس داكن بالقوة. بالإضافة إلى ذلك ، يستخدم إصدار الأمر اللون المحدد بواسطة لون الصورة الرمزية للفريق. مثل العديد من المكونات الأخرى ، يوفر CSS لعنوان الموقع لونًا واحدًا ، والذي يحدد ما إذا كان العنوان فاتحًا أو داكنًا. يتم تحويل هذا اللون بعد ذلك ، باستخدام تعليمات أقل معقدة ، مما يسمح لك بالحصول على خياراته المختلفة. ومع ذلك ، لم نتمكن من القيام بما قمنا به عندما قمنا بمعالجة كود نظام التصميم. أي أنهم لم يتمكنوا من التخلص من جميع CSS القديمة واستبدالها بالكود ،الذي يستخدم متغيرات CSS. والحقيقة هي أن عملاء الشركة ، في الواقع ، تمامًا ، بمساعدة السمات ، يخصصون مظهر الرأس. في هذه الحالة ، يتم إنشاء خيارات الألوان بناءً على لون واحد.عنوان خفيفعنوان داكنعنوان الأمرفي حالة عنوان Stack Overflow الساطع ، كنا بحاجة إلى إيجاد آلية لمعرفة ما إذا تم تعيين لون معين باستخدام متغير CSS ، أو باستخدام قيمة سداسية عشرية ثابتة. إذا تم تعيين اللون باستخدام متغير CSS ، فيمكننا تخطي تحوله بالكامل تمامًا ، وإنشاء رأس يمكن أن يغير الألوان بناءً على معلمات السمة الداكنة. إذا تم استخدام متغير أقل ثابتًا بدلاً من ذلك ، فسيتعين عليك تقييم اللون لمعرفة ما إذا كان فاتحًا أو داكنًا ، وإنشاء عنوان مناسب.ونتيجة لذلك ، وصلنا إلى هذا النهج:& when ( iscolor(@theme-topbar-background-color) ) {
@theme-topbar-style: if(luma(@theme-topbar-background-color) >= 50%, light, dark);
}
& when not ( iscolor(@theme-topbar-background-color) ) {
@theme-topbar-style: automatic;
}
ثم، على أساس القيمة المستلمة ( automatic، lightأو dark)، يتم إنشاء رأس الصحيح.ags العلامات
إذا كان بإمكاني تقديم نصيحة واحدة فقط لأولئك المشاركين في تصميم المكونات ، فسيكون نصها: "لا تصف في المكونات ما يؤثر على موقعها على الصفحة". بمعنى آخر ، أي نوع من الفضاء يفصل بين المكونات يجب أن يحدد السياق الذي يتم تطبيقه فيه. لا حاجة لتعيين مثل هذه الأشياء في المكون نفسه. في الإصدارات السابقة من Stack Overflow ، تقرر post-tagتطبيق الحشو الخارجي على المكونات . في الوقت نفسه ، تحولت العلامات ، مثل الأزرار ، إلى مشكلة تتعلق بجافا سكريبت. لجعل الأمور أكثر صعوبة ، تم إنشاء معظم العلامات باستخدام طريقة مساعدة واحدة.تنطوي إعادة بناء العلامة على استبدال post-tagالمكونات بـs-tag- مكونات مصممة لاستخدام مواضيع مختلفة. تضمن هذا العمل أيضًا تغييرات على جافا سكريبت ، مع مراعاة الاستخدام js-tag. بالإضافة إلى ذلك ، كان من الضروري تغيير الطريقة المسؤولة عن إنشاء العلامات ، وجعلها بحيث تقبل الفئات التعسفية التي تؤثر على وضع العناصر. والحقيقة هي أنه في سياقات معينة ، قد تحتاج العلامات إلى وضعها في التخطيط المرن ، وذلك بدلاً من الاعتماد على المسافات البادئة الخارجية المحددة مسبقًا (أو بدلاً من التعامل مع هذه المسافات البادئة).publications منشورات التصميم
يتكون الجزء الأكبر من Stack Overflow من منشورات المستخدم. هذه المنشورات ، أي الأسئلة والإجابات والتعليقات ، تتم بمساعدة ترميز Markdown. أثناء إطلاق Stack Overflow ، كان Markdown Markup تقنية جديدة نسبيًا.على مر السنين ، طور الويب بعض الطرق القياسية لعرض شيء مثل العناوين وعلامات الاقتباس. كان تقديم الموضوع المظلم لحظة ممتازة لمراجعة نهجنا لتنسيق المنشورات. كانت القضية الأكثر إثارة للجدل في هذه المسألة تنسيق الاقتباسات.في البداية ، تم تأطير الاقتباسات باستخدام لون خلفية أصفر قوي ، مما قلل من تباين الاقتباس نفسه. بالإضافة إلى ذلك ، يسبب اللون الأصفر مشاكل معينة عند عرضه على خلفية داكنة. ونتيجة لذلك ، انتقلنا إلى الطريقة المقبولة عمومًا لعرض عروض الأسعار ، باستخدام شريط رأسي رمادي ضيق لإبرازها.▍ نمط الرمز
على صفحات Stack Overflow ، وهو أمر مفهوم تمامًا ، يتم عرض العديد من أجزاء التعليمات البرمجية. الألوان التي استخدمناها لإبراز البنية لم يكن لها علاقة بألواننا المميزة. لدي شك قوي في أن هذه الألوان هي إرث المكتبة الأولى المستخدمة في المشروع لتسليط الضوء على بناء الجملة. بعد تحليل هذه الألوان ، قررت إخضاع تمييز بناء الجملة لإعادة تصميم عميق. ونتيجة لذلك ، تم استبدال ألوان الإضاءة الخلفية بألوان من نظام التصميم الخاص بنا. هذا ينطبق على كل من المواضيع الفاتحة والداكنة. ويتم ذلك حتى لا يختلف ما حدث جذريًا عما كان عليه من قبل.النتائج
تم إصدار السمة الساطعة والنسخة التجريبية من السمة الداكنة في 30 مارس.نظرًا لحجم أعمال إعادة البناء التي قمنا بها أثناء الانتقال إلى الموضوع الداكن ، تمكنا من إجراء تغييرات كبيرة جدًا على مظهر المشروع دون أي صعوبات. بناءً على ما لدينا الآن ، يمكننا ، على سبيل المثال ، تطوير موضوع موقع ويب عالي التباين يزيد من إمكانية الوصول إليه.كان إنشاء المظهر الداكن نتيجة لتحول أساسي في نهج تصميم Stack Overflow. على وجه الخصوص ، نحن نتحدث عن استخدام نظام تصميم ، والذي كنت أروج له منذ عام الآن. وكان إنشاء مظهر مظلم فرصة ممتازة لي لإعادة بناء أجزاء كثيرة من الموقع. هذا هو الأول من بين العديد من المشاريع التي ستزيد من توفر Stack Overflow.إذا كنت لا تأخذ في الاعتبار رفض الدعم لـ IE11 ، فقد بدأ العمل على الموضوع المظلم في يوليو 2019 مع هذه العلاقات العامة ، بهدف البحث في الموقف. قبل ذلك ، في أبريل 2019 ، كانت هناك مناقشات بشأن موضوع مظلم. في أكتوبر 2019 ، تم إنتاج نسخة تجريبية من مظهر داكن. وبعد ذلك ، بعد إجراء 60 PRs على الأقل ، تم تقديم نسخة تجريبية من السمة الداكنة للمستخدمين. حدث ذلك في 30 مارس 2020.القراء الأعزاء! هل تستخدم Stack Overflow؟ هل تحب موضوعهم المظلم الجديد؟