أبسط كود لتطبيق الوضع الليلي في موقعك | الماس لتطوير الذات

الاستماع للمقالة:

كيف الحال أصحابي؟ يا رب دايما بخير وصحة وسعادة. هديتي اليوم لكل من يمتلك موقعا أو مدونة أو مهتم ببرمجة الويب وتطوير المواقع. وهي عبارة عن شرح أبسط كود لتطبيق الوضع الليلي في موقعك. best dark mode code. وهو يعتمد على أكواد لغة html ، وهي لغة ترميز ، وكذلك لغة JavaScript وهي لغة تجعل صفحات الويب تفاعلية، تستجيب لتفاعل المستخدم معها. وكذلك لغة CSS وهي خاصة بتصميم صفحات الويب وتنسيق ألوانها ومحاذاتها وكل ما يخص اللمسة الجمالية.

ودرسنا اليوم عن شرح طريقة أبسط كود لتطبيق الوضع الليلي في موقعك أو كما يسميه البعض الوضع المظلم. ويمكن تطبيق هذا الكود على مدونات blogger أو مدونات WordPress أو أي برمجة مواقع. وحقيقة هذا الوضع هي .....

الفكرة الرئيسية للوضع الليلي.

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

تغيير لون الرابط في الوضع الليلي.

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

شرح ابسط كود لتطبيق الوضع الليلي:

ويتكون الكود من div على شكل مربع توجد في وسط الشاشة ناحية اليسار. وثابتة fixed في هذا الموضع ولونها أسود في الوضع الطبيعي. ثم تتحول إلى اللون الأبيض في الوضع المظلم.

<div id='toggles' onclick='changeTheme()' title='Change to dark mode'></div>

 ويعني هذا السطر إنشاء div ومعرف هذه الأداة هو toggles وعند الضغط عليها يتم تنفيذ دالة  changeTheme لتغيير القالب. وانص التلميح الذي يظهر عند الوقوف بالفارة عليه هو: Change to dark mode أي تغيير إلى الوضع الليلي.

ولكي تظهر هذه الأداة في منتصف يسار الشاشة تحتاج إلى هذا الكود بلغة CSS . 

<style>#toggles {position: fixed;top: 50%;left: 0px;transform: translateY(-50%);width: 30px;height: 30px;line-height: 30px;text-align: center;cursor: pointer;background: #000;z-index:100;}</style>

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

<script>

if(localStorage.getItem("themeMode") === "dark"){

addCssDark();

}else{

localStorage.setItem("themeMode", "light");

}

function changeTheme(){

if(localStorage.getItem("themeMode") === "light"){

addCssDark();

localStorage.setItem("themeMode", "dark");

}else{

document.getElementById("masdark").remove();

document.getElementById("toggles").classList.remove("active");

localStorage.setItem("themeMode", "light");

document.getElementById("toggles").title = "Change to dark mode";

}

}

function addCssDark(){

document.head.innerHTML = document.head.innerHTML + '<style id="masdark">html, html * {color: #eeeeee !important; background-color: #292929 !important;} a {color: #8db2e5 !important;} a:visited {color: rgb(211, 138, 138) !important;} #toggles.active {background: #fff !important;}</style>';

document.getElementById("toggles").classList.add("active");

document.getElementById("toggles").title = "Change to light mode";

}

</script>

تعالوا بنا نوضح هذا الكود:  السطر الأول لاختبار التخزين المحلي في المتصفح localstorage فإذا كانت قيمة المتغير themeMode تساوي dark يقوم يقوم بتنفيذ الدالة المعرفة بعد ذلك addCssDark وهي لاضافة اكواد css الى راس الصفحة. وإذا لم تكن قيمة المتغير dark يقوم بتخزين قيمة light في نفس المتغير themeMode .

بعد ذلك دالة changeTheme والتي يتم تنفيذها عند الضغط على ال div وفيها يتم التحقق من المتغير themeMode  في التخزين المحلي للمتصفح. فإذا كان light يتم تنفيذ الدالة  addCssDark التي ستأتي بعد ذلك. وهي فضافة كود css لراس الصفحة. ثم تخزين قيمة dark في المتغير themeMode  . وإذا لم تكن قيمة المتغير light يعني أنها dark ويريد الرجوع إلى الوضع العادي. يتم حذف كود css من راس الصفحه . ثم حذف كلاس active من الزر toggles والتي تغيره من ابيض الى اسود والعكس. ثم تخزين في المتصفح قيمة light . وكذلك تغيير نص التلميح للزر الى Change to dark mode.

بعدها كود الدالة addCssDark وهي المسئولة عن اضافة اكواد css الى راس الصفحة حيث تعتمد على أن راس الصفحة يساوي النص الموجود في الراس بالاضافة الى ..... ويجب التنبيه الى كلمة important في اكواد css وتعني اولوية تنفيذ هذه الاكواد اذا تعارضت مع غيرها. ثم يتم اضافه class الى الزر toggles ليتحول الى اللون الابيض وتغيير نص التلميح title للزر الى Change to light mode .

بعض التحسينات على كود الوضع الليلي.

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

*********

من فضلك صديقي... ادعمنا بالاشتراك في قناتي على يوتيوب. ثم فضلا قم بتفعيل زر الجرس للحصول على التنبيهات وقت صدور الفيديو. وقم بالتعليق ولو بحرف لكي تدعمنا للاستمرار من أجلكم. وتسعدنا متابعتكم لصفحتنا على فيس بوك.

***************

وأخيراً، كما قيل: "الدال على الخير كفاعله"، لذا ندعوكم لنشر هذه الصفحة مع أصدقائكم عبر جميع وسائل التواصل الاجتماعي لتعم الفائدة. نسأل الله أن يعلّمنا ما ينفعنا وأن ينفعنا بما علّمنا. ترقبوا المزيد، فالقادم أفضل بإذن الله. تابعونا عبر هذا الوسم #ostazmas.