تحميل أفضل ٣ تطبيقات لكل مسلم للأذان ومواقيت الصلاة وقراءة القرآن الكريم وسماعة صوت وصورة والأذكار

إضافة الوضع الأسود بسهولة لمواقع الويب

سنتعرف فى هذه المقالة على الطريقة التي من خلالها يمكنك التغيير من الوضع العادي إلي الوضع الأسود والعكس ، أصبح الوضع الأسود أو Dark Mode الميزة الأساسية في كل تطبيق أو برنامج أو حتى نظام تشغيل ، وذلك بسبب تزايد الطلب عليه من قبل المستخدمين في كل مكان ، وهكذا مواقع الويب بدأت أيضاً فى هذة الميزة والتزايد على هذه الميزة التي أصبح يفضلها الكثير من المستخدمين لأجهزة الحاسوب والهواتف الذكية لكثرة الجلوس ساعات طويلة امام شاشتها كأنها لا تسبب إزعاج للعين تدعم الوضع الأسود ، لذلك إذا كنت تتوفر على موقع ويب على الإنترنت فقد ترغب في إضافة هذه الميزة لزوار موقعك ، صحيح أن الأمر يتطلب معرفة بلغات برمجة الويب مثل الجافاسكربت و CSS و HTML ولكن لماذا عليك تضييع الوقت في تعلم تلك اللغات إذا كان بالإمكانك إضافة الوضع بواسطة كود صغير ، وذلك بفضل السكربت الجاهز Darkmode.js

 .

.

فتابع معي لمعرفة كيفية تطبيق الكود على موقعك

.

🌟

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

.

طريقة إضافة الوضع الأسود إلى موقع الويب

لإضافة الوضع الأسود بسهولة إلى موقعك ما عليك سوى نسخ ولصق هذا الكود في قسم الفوتر لموقعك

.

<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.3.4/lib/darkmode-js.min.js"></script> <script> new Darkmode().showWidget(); </scrpt>

.

لتحميل ملف TXT لنسخ الكود منه إضغط هنا ↓

.

ملحوظة !

تأكد من نسخ الكود فقط بدون مساحة فارغة قبله أو بعده

بعد حفظ التغييرات حدث الصفحة وسوف تلاحظ زر أسود عائم أسفل يمين الموقع ومن خلال النقر على الزر يتحول الموقع بالكامل إلى الوضع الأسود والعكس

الخيارات التي يدعمها السكربت

var options = { bottom: '64px', // default: '32px' right: 'unset', // default: '32px' left: '32px', // default: 'unset' time: '0.5s', // default: '0.3s' mixColor: '#fff', // default: '#fff' backgroundColor: '#fff', // default: '#fff' buttonColorDark: '#100f2c', // default: '#100f2c' buttonColorLight: '#fff', // default: '#fff' saveInCookies: false, // default: true, label: '' // default: '' } const darkmode = new Darkmode(options); darkmode.showWidget();

من الخيارات السابقة تستطيع تغيير مكان الزر العائم

وقت تأثير حركة التحول ، الألوان ، الكوكيز ، وكذلك تسمية الزر .