تم دعم الوضع المظلم (Dark Mode) على منصات أنظمة التشغيل المختلفة في الآونة الأخيرة بشكل كامل في الإصدارات الحديثة من أنظمة تشغيل الحواسيب (windows 10 , Linux, Mac) وأنظمة الهواتف الذكية (android, ios)، لكثرة طلب المستخدمين لهذه الميزة، حيث يساعد الوضع المظلم أو "الوضع الداكن" في تحسين الرؤية للمستخدمين الذين يشتكون من ضعف البصر وأولئك الذين لديهم حساسية للضوء الساطع مما يجعل من السهل على أي شخص تصفح شاشة الأجهزة في بيئة منخفضة الإضاءة، دون التأثير على العينين والتسبب في إجهادها، كما يقلل من استهلاك الطاقة بشكل كبير وتوفير عمر البطارية على الأجهزة المحمولة وخاصة الأجهزة التي تملك شاشات OLED.
لم يقتصر توفر الوضع المظلم على واجهات التطبيقات والبرامج فقط، ولكن يمكن إضافة دعم هذه الميزة لصفحات مواقع الويب لتسهيل تصفح هذه المواقع في الأماكن منخفضة الإضاءة أو اثناء الليل دون التسبب في إجهاد العين أو التأثير على أسلوب النوم عند تصفح هذه المواقع لأوقات طويلة.
كيف تضيف دعم الوضع الليلي (Dark Mode) لتصميم موقع الويب الخاص بك؟
إضافة الوضع المظلم (Dark Mode) ليس بالأمر الصعب، فمن خلال إضافة أسطر قليلة لتصميم موقعك باستخدام لغة تنسيق المحتوى css يصبح موقعك داعم لهذه الميزة على الأجهزة المفعل عليها الوضع الليلي أو الداكن والتبديل بين الوضع الفاتح والغامق حسب تفعيل الميزة من قبل المستخدم في تفضيلات النظام، بالنسبة للهواتف الذكية العاملة بنظام (أندرويد و ios)، أو حاسوب يعمل بنظام ويندوز 10 أو نظام لينكس أو أجهزة Mac.
توفر css ميزة التحقق من نظام الألوان المختار من قبل المستخدم عبر السمة prefers-color-scheme والتي من خلالها نستطيع إضافة التصميم الخاص بنا الداعم للوضع الليلي (Dark Mode) بكل سهولة ودون تعقيد وذلك بإضافة الأسطر التالية:
@media (prefers-color-scheme: dark) {
... تصميم الوضع المظلم
}
@media (prefers-color-scheme: light) {
... تصميم الوضع الفاتح أو العادي
}
سنبدأ تطبيق الشرح بمثال بسيط يوضح الفكرة وعلى اساسه يمكن تطبيقه على تصميم موقعك عندما تتضح معك الفكرة بشكل كامل.
سنقوم بإنشاء صفحة Html بسيطة ولتكن الصفحة التالية:
<!DOCTYPE html>
<html lang="ar" dir="ltr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>مثال على Dark Mode</title>
<style>
header {
background: #321280;
height: 70px;
width: 100%;
text-align: center;
color: white;
}
footer {
background: #321280;
height: 80px;
width: 100%;
position: absolute;
bottom: 0;
right: 0;
text-align: center;
color: white;
}
.content {
margin: 50px auto;
width: 600px;
height: 200px;
background: aqua;
/* text-align: center; */
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<header>Title Header</header>
<div class="content"><p> Dark Mode </p></div>
<footer>footer</footer>
</body>
</html>
الآن سنقوم بإضافة محدد الوسائط @media (prefers-color-scheme: dark) لكود تنسيق الصفحة والذي من خلاله سنضيف تنسيق الألوان للوضع الداكن كالتالي:
@media (prefers-color-scheme: dark) {
body {
background:#121212;
color:#fff;
}
header, footer {
background: #403b3b;
color: white;
}
.content {
background: #403b3b;
}
}
بعد إضافة الكود السابق سنحصل على النتيجة التالية:
لاتنسى قبل تجربة الكود السابق من تفعيل الوضع المظلم على جهازك من إعدادات النظام، حتى يعمل الكود بشكل صحيح.
الآن سيصبح موقع الويب يتغير بين التصميم الداكن (Dark Mode) والتصميم الفاتح حسب تفضيلات المستخدم لواجهة النظام وبشكل تلقائي ودون تدخل من قبل المستخدم.
تحسين التصميم بإستخدام المتغيرات (CSS Variables) في css.
CSS Variables مهمة جداً في عملية التنسيق فمن خلالها يمكن تحسين تصميم الكود واختصار التعليمات وعدم تكراره في عدة أماكن في استايل تنسيق الموقع.
سنقوم بإنشاء متغيرات عامة لتنسيق الوان الخلفية والخطوط لنتمكن من تغير اللون بشكل سهل عند التبديل بين أوضاع التصميم في مثالنا السابق نحتاج إلى متغير أساسي وسيكون لخلفية القالب ومتغير لألوان الخطوط ومتغير ثانوي لخلفية المحتوى كالتالي:
:root {
--body-bg-color:#dddddd;
--scand-bg-color:#00ffff;
--text-color:#000000;
--layout-color:#321280;
}
لكي نستخدم المتغيرات التي قمنا بعملها سنحتاج إلى الدالة var لأسناد المتغير لخاصية معينة فمثلاً متغير لون الخلفية سيكون بالشكل التالي background: var(--body-bg-color);.
سنغير الكود الذي سيظهر في الوضع المظلم وسيكون كالتالي:
@media (prefers-color-scheme: dark) {
:root {
--body-bg-color:#121212;
--scand-bg-color:#403b3b;
--text-color:#ffffff;
--layout-color:#403b3b;
}
}
سنحصل على نفس النتيجة السابقة بدون CSS Variables ولكن بكود نظيف ومرتب وسهل التغير والتحكم وبشكل مختصر، في هذا المثال البسيط قد لا يكون استخدام CSS Variables ذو أهمية كبيرة لكون الصفحة صغيرة ولا تحتاج الى تنسيقات كثيرة ولاكن تأتي الأهمية الحقيقية للمتغيرات عندما تقوم بإضافة التنسيق لموقع حقيقي يحتوي على كثير من الاقسام والتنسيقات المختلفة والتي تجعل من الصعب التعديل عليها وتحديثها إن تطلب الأمر.
المظهر الجمالي واختيار تنسيق الألوان المناسبة للوضع الداكن (dark mode) .
عند عمل التصميم الغامق لصفحات موقعك يجب اختيار وتحديد الألوان التي ترغب في استخدامها بشكل سليم حتى تتناسب ألوان النصوص والأدوات مع لون الثيم للموقع، ويكون باختيار الطبقة المطفية من كل لون ترغب في استخدامة والابتعاد عن الطبقات الفاتحة للون بشكل كبير حتى لا تسبب إهتزاز في الرؤية عند النظر إليها.
كما قد تسبب تشوية في التصميم العام وتؤثر على تجربة المستخدم.
راجع الدليل التالي dark mode design والذي يوفر دليل متكامل لإنشاء ثيم ليلي أو بما يسمي الثيم المظلم (Dark Mode) للواجهات الرسومية في التطبيقات أو صفحات الويب.
المتصفحات الداعمة للخاصية prefers-color-scheme
الكود كامل للمثال الذي قمنا بالشرح علية:
<!DOCTYPE html>
<html lang="ar" dir="ltr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>مثال على Dark Mode</title>
<style>
:root {
--body-bg-color:#dddddd;
--scand-bg-color:#00ffff;
--text-color:#000000;
--layout-color:#321280;
}
body {
margin: 0;
padding: 0;
background: var(--body-bg-color);
color: var(--text-color);
}
header, footer {
display: flex;
justify-content: center;
align-items: center;
background: var(--layout-color);
color: var(--text-color);
height: 70px;
width: 100%;
color: white;
}
footer {
position: absolute;
bottom: 0;
right: 0;
}
.content {
margin: 50px auto;
width: 600px;
height: 200px;
background: var(--scand-bg-color);
color: var(--text-color);
display: flex;
justify-content: center;
align-items: center;
}
@media (prefers-color-scheme: dark) {
:root {
--body-bg-color:#121212;
--scand-bg-color:#403b3b;
--text-color:#ffffff;
--layout-color:#403b3b;
}
}
</style>
</head>
<body>
<header>Title Header</header>
<div class="content"><p> Dark Mode </p></div>
<footer>footer</footer>
</body>
</html>
للمزيد من المعلومات حول كيفية عمل التصميم الغامق (dark mode) وعن prefers-color-scheme قم بمراجعة الأدلة التالية:
أزال المؤلف هذا التعليق.
ردحذفwwww
ردحذف