اكتشاف مخطط ألوان النظام

يكتشف استعلام وسائط CSS‏ prefers-color-scheme ما إذا كان المستخدم قد ضبط نظام التشغيل لاستخدام سمة ألوان داكنة أو فاتحة. يقبل الاستعلام قيمتين: dark وlight. يُضبط هذا التفضيل على مستوى نظام التشغيل ضمن إعدادات النظام، وليس في المتصفح.

يمكنك تطبيق الأنماط الداكنة باستخدام CSS فقط عبر @media (prefers-color-scheme: dark) { ... }. داخل هذه الكتلة، غيّر الألوان والخلفيات والحدود لتناسب لوحة ألوان داكنة. لا يتطلب هذا الأسلوب JavaScript، ويعمل حتى قبل تحميل React.

في JavaScript، تُرجع window.matchMedia('(prefers-color-scheme: dark)') كائن MediaQueryList. يمكنك استخدامه لقراءة تفضيل النظام الحالي برمجيًا داخل خطافات React أو معالجات الأحداث. وهذه هي حلقة الوصل بين استعلامات وسائط CSS ومنطق JavaScript لديك.

يحتوي كائن MediaQueryList على الخاصية matches التي تُرجع قيمة منطقية. إذا كانت قيمة matches هي true، فالنظام في الوضع الداكن؛ وإذا كانت false، فهو في الوضع الفاتح. عادةً ما تقرأ هذه القيمة مرة واحدة عند التحميل لتهيئة حالة السمة.

يمكن للمستخدمين تغيير نظام ألوان نظام التشغيل في أي وقت. للاستجابة ديناميكيًا، استدعِ mediaQuery.addEventListener('change', handler)، حيث يتلقى handler كائن MediaQueryListEvent المحدّث. ويحتوي كائن الحدث أيضًا على قيمة منطقية matches تعكس التفضيل الجديد.

من الأساليب النظيفة إنشاء خطاف مخصص باستخدام useSyncExternalStore. يشترك الخطاف في mediaQuery.addEventListener، ويوفّر دالة لقطة تُرجع mediaQuery.matches. يحافظ ذلك على مزامنة الخطاف مع واجهة برمجة التطبيقات الخارجية للمتصفح دون إدارة يدوية للحالة.

عند إزالة مكوّنك من شجرة العرض، يجب إزالة مستمع الأحداث لتجنب تسرّبات الذاكرة. في دالة التنظيف الخاصة بـ useEffect، استدعِ mediaQuery.removeEventListener('change', handler). ومع useSyncExternalStore، يجب أن تُرجع دالة الاشتراك دالةً لإلغاء الاشتراك تنفّذ الأمر نفسه.

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

يتيح Chrome DevTools محاكاة تفضيلات نظام الألوان دون تغيير إعدادات نظام التشغيل. افتح DevTools، وانتقل إلى علامة تبويب Rendering، ثم ابحث عن القائمة المنسدلة "Emulate CSS media feature prefers-color-scheme". وتُعد هذه الميزة مفيدة جدًا لاختبار السمتين بسرعة أثناء التطوير.

تقرأ عملية تنفيذ الوضع الداكن الجيدة تفضيل النظام كنقطة بداية افتراضية وتطبّقه فورًا. ويُظهر ذلك احترام إعدادات إمكانية الوصول التي اختارها المستخدم. لا تخزّن تجاوزًا مختلفًا ولا تستخدمه إلا بعد أن يبدّل المستخدم السمة صراحةً داخل تطبيقك.

لا تكون window.matchMedia موجودة على الخادم. إذا كنت تعرض التطبيق على الخادم، فتحقق من typeof window !== 'undefined' قبل استدعاء matchMedia. وفي تطبيقات SSR، اقرأ تفضيل المستخدم من ملف تعريف ارتباط أو ترويسة HTTP بدلًا من ذلك لتجنب اختلافات hydration.

ما الخاصية في كائن MediaQueryList التي تخبرك ما إذا كان استعلام الوسائط متطابقًا حاليًا؟

يتيح استعلام الوسائط prefers-color-scheme الوصول إلى تفضيل نظام التشغيل للألوان في كل من CSS وJavaScript. استخدم window.matchMedia للقراءة والاستماع إلى التغييرات، ونظّف مستمعي الأحداث دائمًا، وميّز بين الإعدادات الافتراضية للنظام وتجاوزات المستخدم. تسرّع محاكاة Chrome DevTools اختبار السمتين.