تنفيذ Dark Mode: CSS وJavaScript وتفضيل النظام

ما هو Dark Mode ولماذا هو مهم؟

Dark mode (السمة الداكنة) هو وضع واجهة يعرض خلفيات داكنة مع نص فاتح. يقلل إجهاد العين في البيئات ذات الإضاءة المنخفضة.

على شاشات OLED، dark mode يمكن أن ي prolongs عمر البطارية بـ 30-60% لأن pixels داكنة مطفأة. ميزة significant للأجهزة mobile.

تفضيل المستخدم: مع دعم dark mode على مستوى النظام (macOS، Windows، iOS، Android)، ي esper المستخدمون تجربة متسقة عبر جميع التطبيقات.

إمكانية الوصول: بعض المستخدمين (photophobia، migraine) يفضلون السمات الداكنة. Dark mode ي provides فوائد إمكانية الوصول لهؤلاء المستخدمين.

إدارة السمات بمتغيرات CSS

خصائص CSS المخصصة (variables) تسمح بإدارة ألوان السمة de manera مركزية. عرّف السمة الافتراضية (light) في :root، السمة dark في [data-theme="dark"].

مثال: :root { --bg: #ffffff; --text: #1a1a1a; } [data-theme="dark"] { --bg: #1a1a1a; --text: #e0e0e0; }. جميع Styles تستخدم هذه variables.

انتقالات اللون: body { background: var(--bg); color: var(--text); transition: background 0.3s, color 0.3s; } provides انتقال سمة smooth.

التحكم في التباين: اتبع نسب تباين WCAG أيضًا في dark mode. النص الفاتح على خلفية داكنة requires نسبة تباين 4.5:1.

الظلال والحدود: الظلال (box-shadow) أقل visibility في dark mode. استخدم حدود (border) لجعل حدود العناصر más distintas.

تغيير السمة بـ JavaScript

زر التبديل: عندما ينقر المستخدم على الزر، غيّر السمة بـ document.documentElement.setAttribute('data-theme', 'dark').

حفظ التفضيل: احفظ اختيار المستخدم بـ localStorage.setItem('theme', 'dark'). اقرأ بـ localStorage.getItem('theme') عند تحميل الصفحة.

منع FOUC: لمنع Flash of Unstyled Content (FOUC)، طبّق إعداد السمة بـ script inline في <head>. هذا determines السمة before rendering.

دالة التبديل: function toggleTheme() { const current = document.documentElement.getAttribute('data-theme'); const next = current === 'dark' ? 'light' : 'dark'; document.documentElement.setAttribute('data-theme', next); localStorage.setItem('theme', next); }

اكتشاف تفضيل النظام

Media query prefers-color-scheme: طبّق styles basados en تفضيل النظام في CSS بـ @media (prefers-color-scheme: dark) { :root { --bg: #1a1a1a; } }.

الاكتشاف بـ JavaScript: تحقق من تفضيل dark mode del sistema بـ window.matchMedia('(prefers-color-scheme: dark)').matches.

الاستماع للتغييرات: تتبع تغييرات سمة del sistema بـ matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => { if (e.matches) setDark(); else setLight(); }).

ترتيب الأولوية: 1. اختيار المستخدم manual (localStorage)، 2. تفضيل النظام (prefers-color-scheme)، 3. السمة الافتراضية (light). تحقق في هذا الترتيب.

أفضل الممارسات لـ Dark Mode

لا تستخدم الأسود Pure (#000000). الرمادي الداكن جدًا (#121212 أو #1a1a1a) ي look mejor و reduce إجهاد العين.

قلل تشبع اللون. الألوان Bright (أحمر، أخضر، أزرق) في dark mode causan إجهاد العين. استخدم ألوان desaturated.

اضبط الصور. الصور Bright puede ser مزعجة في dark mode. أطفئ الصور ligeramente بـ filter: brightness(0.8).

اختبر جميع المكونات. النماذج، الجداول، كتل الكود، الرسوم البيانية يجب أن ت appear correct في dark mode. تحقق من كل مكون في dark mode.

Meta theme-color: configure لون UI del navegador (barra de direcciones) لـ coincidence con dark mode بـ <meta name="theme-color" content="#1a1a1a" media="(prefers-color-scheme: dark)">.

Dark Mode في Frameworks

Tailwind CSS: عرّف styles de dark mode بـ prefijo dark:. Como dark:bg-gray-900 dark:text-white. Provides تحكم manual بـ estrategia de clase.

React: implementación fácil de dark mode بـ hook useDarkMode أو مكتبة next-themes. Gestión de tema compatible con SSR.

Vue: dark mode reactivo بـ composable useDark من @vueuse/core. Detección automática de preferencia del sistema.

Bootstrap: دعم dark mode في Bootstrap 5.3+ بـ atributo data-bs-theme="dark". Gestión de tema بـ variables CSS.