كيف أضفت الوضع الداكن إلى موقع الويب الخاص بي

الإرشادات خطوة بخطوة لإنشاء نسختين من موقع الويب الخاص بك ، لجعله مثاليًا للاستخدام ليلًا ونهارًا

Dark mode

تحديث: أستخدم الآن استعلامات الوسائط المستوى 5:prefers-color-scheme

الMedia Queries Level 5تخصيصيحتوي على ملفprefers-color-schemeميزة الوسائط.

هذا مدعوم حاليًا في جميع المتصفحات الرئيسية. Chrome / Edge منذ الإصدار 76 و Firefox منذ 67 و Safari (منذ الإصدار 12.1). حتى iOS Safari ،

يمكننا استخدامه لمعرفة ما إذا كان المستخدم يتصفح الصفحة في الوضع المظلم أو الفاتح:

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}
@media (prefers-color-scheme: light) {
  body {
    background-color: white;
    color: black;
  }
}

أستخدمه الآن لإظهار إصدار خفيف من الموقع افتراضيًا ، وإصدار غامق إذا كان النظام في الوضع المظلم.

إذا لم يكن النظام مدمجًا في الوضع المظلم (Windows / macOS ، Linux القديم) ، فإن اقتراحي هو استخدام امتداد مثلعين الليلأو مشابه.

كيف قمت بتنفيذ الوضع المظلم من قبلprefers-color-schemeكان متاحا

لقد قمت مؤخرا بإعادة تصميم موقع الويب الخاص بي. فيما يلي صورتان لكيفية ظهوره ، كمرجع:

Old homepage

Old post page

لقد قمت بتصميم هذا الموقع منذ عام تقريبًا ، وقمت بالعديد من التغييرات على طول الطريق ، تمامًا كما نفعل مع أي موقع ويب.

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

جلست مساء أمس وبدأت في إعادة تصور الموقع ، وانتهيت من إعادة التصميم هذا الصباح:

New homepage

New post page

أفضل بكثير! المحتوى ، أهم شيء ، هو أكثر وضوحا.

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

لقد فاتني شيء واحد:الوضع المظلم. نظرًا لأنني كنت بصدد إعادة التصميم ، كان لدي خيار الوضع المظلم في الاعتبار.

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

بعد ذلك ، أضفت مقتطف JavaScript يتم تشغيله عند النقر فوقه. لقد أضفته للتو إلىonclickمعالج الحدث المضمّن في HTML ، دون أن يصبح مربي الحيوانات:

<p>
  <a href="#" onclick="localStorage.setItem('mode', (localStorage.getItem('mode') || 'dark') === 'dark' ? 'light' : 'dark'); localStorage.getItem('mode') === 'dark' ? document.querySelector('body').classList.add('dark') : document.querySelector('body').classList.remove('dark')" title="Dark/light
</p>

هذا هو JavaScript الذي يتم تشغيله في onclick:

localStorage.setItem('mode', (localStorage.getItem('mode') || 'dark') === 'dark' ? 'light' : 'dark'); localStorage.getItem('mode') === 'dark' ? document.querySelector('body').classList.add('dark') : document.querySelector('body').classList.remove('dark')

إنها معقدة بعض الشيء ، لكنني في الأساس أتحقق مما إذا كانmodeالممتلكات فيالتخزين المحليهو "مظلم" (ويتم تعيينه افتراضيًا على dark إذا لم يتم تعيينه بعد ، باستخدام امتداد||عامل) ، وقمت بتعيين عكس ذلك في التخزين المحلي.

ثم أقوم بتعيين ملفdarkفئة لbodyعنصر HTML ، حتى نتمكن من استخدام CSS لتصميم الصفحة في الوضع المظلم.

يتم تشغيل برنامج نصي آخر بمجرد تحميل DOM ، ويتحقق مما إذا كان الوضع مظلمًا. إذا كان الأمر كذلك ، فإنه يضيفdarkفئة لbodyعنصر HTML:

document.addEventListener('DOMContentLoaded', (event) => {
  ((localStorage.getItem('mode') || 'dark') === 'dark') ? document.querySelector('body').classList.add('dark') : document.querySelector('body').classList.remove('dark')
})

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

ثم أضفت الكثير من تعليمات CSS إلى CSS ، وكلها مسبوقة بـbody.dark. مثل هذه:

body.dark {
  background-color: rgb(30,34,39);
  color: #fff;
}
body.dark code[class*=language-],
body.dark table tbody>tr:nth-child(odd)>td,
body.dark table tbody>tr:nth-child(odd)>th {
  background: #282c34
}

الآن يجب أن تعمل الأشياء بالفعل! هنا موقعي في الوضع المظلم:

Dark homepage

Dark post page

أضفت الdarkفئة لbodyعنصر افتراضيًا ، لجعل الوضع المظلم هو الوضع الافتراضي:

<body class="dark">
  ...
</body>

لماذا؟ أولاً ، لقد أحببته أكثر. بعد ذلك ، أجريت استطلاعًا على Twitter وأعجب الناس به أكثر.

Poll

ولكن أيضًا لسبب تقني ، سبب بسيط جدًا في الواقع. لا أقوم بتخزين اختيار المستخدم من جانب الخادم ، لذلك ليس لدي طريقة لمعرفة الوضع حتى يتوفر التخزين المحلي.

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

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

أفضل القيام بذلك في الوضع الفاتح: اعرض صفحة مظلمة لبضعة أجزاء من الثانية ثم اجعلها بيضاء مرة أخرى.


المزيد من الدروس المعملية: