لماذا تتحدث Maison Code عن هذا

في Maison Code Paris، نعمل كضمير معمari لعملائنا. غالبًا ما نرث حزمًا “حديثة” تم بناؤها دون فهم أساسي للحجم.

نناقش هذا الموضوع لأنه يمثل نقطة تحول حاسمة في النضج الهندسي. التنفيذ الصحيح يميز MVP الهش عن منصة مؤسسية مرنة يمكنها التعامل مع حركة مرور الجمعة السوداء.

توقع الظلام

في عام 2020، كان الوضع الداكن “من الجميل أن يكون لديك”. وفي عام 2025، هذا مطلب. تدعم أنظمة iOS وAndroid وmacOS وWindows الوضع المظلم على مستوى النظام. إذا قام المستخدم الخاص بك بضبط هاتفه على الوضع الداكن (لتوفير البطارية أو حفظ عينيه في الليل)، وقام بفتح موقع الويب الخاص بك وتعرض لضربة من الضوء الأبيض #FFFFFF… يغلقون علامة التبويب. إنه مؤلم جسديا. الوضع الداكن ليس ميزة؛ إنه تعاطف المستخدم.

لماذا تناقش Maison Code الوضع المظلم؟

في Maison Code، نسعى جاهدين لتحقيق “التجربة السلسة”. نحن نضمن أن مواقع عملائنا تحترم تفضيلات نظام المستخدم تلقائيًا (‘نظام الألوان المفضل’). ولكن الأهم من ذلك هو أننا ندرك أن الوضع الداكن يمثل تحديًا للعلامة التجارية. تعتمد العلامات التجارية الفاخرة على ألوان محددة. كيف يمكنك ترجمة “Chanel Black on White” إلى الوضع الداكن دون فقدان الهوية؟ نحن نتعامل مع هذه الترجمة الدلالية يوميا. نحن لا نقوم فقط “بعكس الألوان”. نحن “نعيد تفسير” العلامة التجارية للبيئات منخفضة الإضاءة.

الإستراتيجية الهندسية: متغيرات CSS + HSL

(راجع متغيرات CSS). والمنهج الساذج هو: body.dark { الخلفية: أسود؛ اللون: أبيض؛ }. هذا يبدو فظيعا. يتسبب اللون الأسود النقي (#000) في حدوث “تلطيخ” على شاشات OLED عند التمرير. النص الأبيض النقي (#FFF) على اللون الأسود النقي يسبب إجهاد العين (الهالة).

المنهج الدلالي: نقوم بتعريف الألوان باستخدام HSL (تدرج اللون والتشبع والخفة). هذا يسمح لنا بتعديل الخفة برمجياً.

:الجذر {
  /* لون العلامة التجارية (على سبيل المثال، الأزرق) */
  --العلامة التجارية-ح: 210؛
  --العلامة التجارية: 100%؛
  
  /* وضع الضوء */
  --بج-ل: 100%;
  --نص-l: 10%;
  
  --bg-color: hsl(var(--brand-h), 10%, var(--bg-l));
  --text-color: hsl(var(--brand-h), 10%, var(--text-l));
}

[موضوع البيانات = "الظلام"] {
  /* الوضع الداكن: فقط قم بقلب الإضاءة */
  --بج-ل: 10%;
  --نص-l: 90%;
}

لاحظ أننا لم نختر “الأسود” فقط. اخترنا “أزرق غامق جدًا” (hsl(210, 10%, 10%)). وهذا يحافظ على لون العلامة التجارية حتى في الوضع المظلم. إنه يبدو أكثر ثراءً وأكثر تميزًا من اللون الرمادي المسطح.

التنفيذ الفني: التبديل والوميض

أصعب جزء في الوضع الداكن هو FOUC (فلاش المحتوى غير المنمط) أو فلاش الأبيض.

يقوم المستخدم بتحميل الصفحة (يرسل الخادم HTML).
يعرض المتصفح الخلفية البيضاء بشكل افتراضي.
يتم تحميل JS، ويقرأ “localStorage”، ويرى “مظلمًا”.
يضيف JS فئة “.dark”.
تومض الصفحة باللون الأسود. هذا الفلاش الذي يستغرق أجزاء من الثانية يدمر تجربة المستخدم.

الإصلاح: برنامج حظر في <head>. يجب عليك إدخال برنامج نصي صغير قبل تحميل CSS.

<الرأس>
  <النص البرمجي>
    (وظيفة () {
      const store = localStorage.getItem('theme');
      نظام const = window.matchMedia('(يفضل نظام الألوان: داكن)').matches;
      إذا (مخزن === 'مظلم' || (!مخزن && النظام)) {
        document.documentElement.classList.add('dark');
      }
    })();
  </script>
</الرأس>

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

تصميم للعمق

في الوضع الفاتح، نستخدم الظلال لإظهار العمق (البطاقات العائمة على الخلفية). في الوضع الداكن، تكون الظلال غير مرئية (ظل داكن على خلفية داكنة). الحل: استخدم الخفة لإظهار العمق.

الخلفية: المستوى 0 (الأغمق).
البطاقة: المستوى 1 (أخف قليلاً).
مشروط: المستوى 2 (أخف).
الزر: المستوى 3 (الأخف). بدلاً من “الظلال”، نستخدم “التراكبات” أو التحولات الطفيفة في لون الخلفية.

الصور والوضع الداكن

يمكن أن تكون الصور الساطعة في الوضع الداكن مزعجة. نصيحة: قم بتقليل سطوع الصور وتباينها قليلاً عندما تكون في الوضع الداكن.

[موضوع البيانات = "dark"] img {
  الفلتر: السطوع (0.8) والتباين (1.2)؛
}

وهذا يجعل الصور تمتزج بشكل أفضل مع الواجهة المظلمة.

وجهة نظر المتشككين

“الوضع المظلم هو موضة. أنا أحب الورق الأبيض.” نقطة مضادة:

البطارية: على شاشات OLED (iPhone X+)، يتم إيقاف وحدات البكسل الداكنة. يوفر الوضع الداكن عمر البطارية بنسبة 30% تقريبًا.
الصحة: يساعد تقليل التعرض للضوء الأزرق ليلاً على نظافة النوم.
الاختيار: امنح المستخدم الاختيار. إذا قمت بفرض وضع الضوء، فأنت متعجرف.

الأسئلة الشائعة

س: هل يجب أن أستخدم زر التبديل؟ ج: نعم. الاكتشاف التلقائي لـ “نظام الألوان المفضل” أولاً، ولكن مع السماح للمستخدم بتجاوزه. ضعه في التذييل أو الرأس.

س: قلب الشعارات؟ ج: إذا كان شعارك عبارة عن نص أسود، فإنه يختفي في الوضع المظلم. أنت بحاجة إلى شعار SVG يرث “اللون الحالي”، أو تحتاج إلى تبديل مصدر الصورة (‘logo-dark.png`).

11. معالجة متقدمة للأيقونات (SVGcurrentColor)

توقف عن تصدير أيقونات PNG السوداء. استخدم ملفات SVG المضمنة مع fill="currentColor". وهذا يجعل الأيقونة ترث لون نص أصلها. إذا كان النص الأصلي باللون الأبيض (الوضع الداكن)، فستكون الأيقونة بيضاء. إذا كان النص الأصلي باللون الأسود (وضع الإضاءة)، فستكون الأيقونة سوداء. يؤدي هذا إلى إزالة الحاجة إلى التكرارات “icon-dark.svg” و”icon-light.svg”. أصل واحد. مواضيع لا نهاية لها.

12. التفضيل المستمر بدون FOUC

مناقشة “ملف تعريف الارتباط” مقابل “التخزين المحلي”. إذا كنت تستخدم العرض من جانب الخادم (Next.js)، فلن يكون “localStorage” متاحًا على الخادم. لذلك يعرض الخادم الوضع الخفيف. العميل يرطب الوضع المظلم. ** وميض **. الحل: ملفات تعريف الارتباط. عندما يقوم المستخدم بتبديل السمة، قم بتعيين ملف تعريف الارتباط theme=dark. اقرأ ملف تعريف الارتباط هذا في “middleware.ts” أو “getServerSideProps”. أدخل <html class="dark"> على الخادم. الآن يصل HTML إلى اللون الداكن بالفعل. الطلاء الأول المثالي.

13. إمكانية الوصول: نسب التباين (WCAG)

غالبًا ما يكون الوضع الداكن أصعب في قراءة الاستجماتيزم. يحدث “Halation” (تأثير الهالة) مع نص أبيض على خلفية سوداء. القاعدة: لا تستخدم أبدًا اللون الأسود النقي (#000000). استخدم اللون الرمادي الداكن (#121212 أو ما شابه ذلك). أنه يقلل من إجهاد العين. الاختبار: استخدم منتقي “التباين” في Chrome DevTools. تأكد من أن النص الخاص بك يتوافق مع معيار AA (4.5:1). في كثير من الأحيان، يعمل “العلامة التجارية الزرقاء” الخاصة بك على اللون الأبيض ولكنها تفشل على اللون الأسود. أنت بحاجة إلى --brand-text-dark (أزرق فاتح) خصيصًا لنص الوضع الداكن.

14. التعامل مع تغييرات سمة النظام ديناميكيًا

يقوم المستخدم بتغيير جهاز Mac الخاص به من فاتح إلى داكن أثناء التصفح. هل يتكيف موقعك على الفور؟ استخدم مستمع الأحداث “التغيير” في “matchMedia”.

window.matchMedia('(يفضل نظام الألوان: داكن)').addEventListener('change', e => {
    const newColorScheme = e.matches؟ "مظلم" : "مضيء";
    // قم بالتحديث فقط إذا لم يقم المستخدم بتجاوز المنطق بشكل صريح
    إذا (!localStorage.getItem('الموضوع')) {
        document.documentElement.classList.toggle('dark', e.matches);
    }
});

يتيح ذلك الشعور “السحري” بالمكان الذي يتنفس فيه موقع الويب مع نظام التشغيل.

15. تحسين OLED (أسود حقيقي مقابل رمادي)

هناك نقاش. أسود نقي (#000000) يقوم بإيقاف تشغيل وحدات البكسل. أنه يوفر أقصى قدر من البطارية. الرمادي الداكن (#121212) أفضل لقراءة النص ويقلل تلطيخ OLED (المسار الأرجواني عند التمرير). حكم قانون المنزل: استخدم اللون الرمادي الداكن للأسطح (البطاقات والخلفيات) والأسود النقي للحدود أو المساحة السلبية. يمنحك هذا “إحساسًا متميزًا” بدون التحف البصرية. نستخدم أيضًا meta name="theme-color" لتلوين شريط متصفح Safari ليتناسب مع خلفيتك، مما يؤدي إلى إنشاء تجربة بلا حدود تشبه التطبيق.

16. اكتشاف السمات من جانب الخادم (تلميحات العميل)

ملفات تعريف الارتباط جيدة. تلميحات العميل أفضل. `Sec-CH-يفضل نظام الألوان’. إذا أرسل المتصفح هذا الرأس، فإن الخادم يعلم أن المستخدم يفضل الوضع الداكن دون قراءة ملف تعريف الارتباط. هذه هي الكأس المقدسة. إنها تتيح للزيارة الأولى (بدون ملف تعريف الارتباط) أن تكون ذات طابع مثالي. Maison Code تطبق هذا المعيار المتطور لعملائنا لضمان عدم حدوث وميض في البايت الأول.

17. لماذا ميزون كود؟

في Maison Code، نحن لا نقوم فقط بـ “قلب الألوان”. نحن نعيد تصميم هوية العلامة التجارية للبيئات منخفضة الإضاءة. نقوم بمراجعة نسب التباين لضمان الامتثال لإمكانية الوصول (ADA/WCAG). نحن نطبق البرنامج النصي “Flicker-Free” لضمان عدم تعرض المستخدمين مطلقًا للوميض. نعتقد أن الوضع المظلم هو تمرين للتعاطف. إنه يوضح أنك تهتم بكيفية استهلاك المستخدم للمحتوى الخاص بك.

17. الاستنتاج

الوضع الداكن لا يتعلق بتغيير الألوان. يتعلق الأمر بالتحقق من نسب التباين (WCAG AA)، وإدارة إدراك العمق، واحترام سياق المستخدم. تم تنفيذه بشكل جيد، فهو يبدو وكأنه مقصورة داخلية لسيارة فاخرة في الليل. تم تنفيذه بشكل سيء، ويبدو وكأنه موجه أوامر معطل. لا تدع علامتك التجارية تبدو مكسورة بنسبة 50% من الوقت.

هل تحجب المستخدمين؟

نحن نطبق نظام Dark Mode الخالي من الوميض والذي يحترم عمر البطارية وعين المستخدم.

[تنفيذ الوضع الداكن](/جهة اتصال). قم بتوظيف مهندسينا.