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

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

اكتشف كيف يمكنك إضافة خيار الوضع المظلم إلى مواقع الويب وتطبيقات الويب الخاصة بك، باستخدام مزيج من CSS وJavaScript.

فهم الوضع المظلم

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

إعداد مشروعك

قبل تنفيذ ذلك، تأكد من إعداد المشروع وجاهز للعمل عليه. يجب أن تكون ملفات HTML وCSS وJavaScript منظمة بطريقة منظمة.

كود HTML

ابدأ بالترميز التالي لمحتوى صفحتك. سيتمكن الزائر من استخدام theme__switcher عنصر للتبديل بين الوضع الداكن والفاتح.

<body>
<navclass="navbar">
<spanclass="logo">Company Logo





instagram viewer


span>
<ulclass="nav__lists">
<li>Aboutli>
<li>Blogli>
<li>Contactli>
ul>


<divid="theme__switcher">
<imgid="theme__image"src="./toggle.svg"alt="" />
div>
nav>


<main>
 Lorem ipsum dolor sit amet consectetur adipisicing elit.
 Odit deserunt sit neque in labore quis quisquam expedita minus
 perferendis.
main>
<scriptsrc="./script.js">script>
body>

كود CSS

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

@import url("https://fonts.googleapis.com/css2?family=Quicksand: wght@400;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}


html { font-size: 62.5%; }


body { font-family: "Quicksand", sans-serif; }


.navbar {
display: flex;
padding: 2rem;
font-size: 1.6rem;
align-items: center;
color: rgb(176, 58, 46);
background-color: #fdedec;
}


.navbarspan { margin-right: auto; }


.logo { font-weight: 700; }


.nav__lists {
display: flex;
list-style: none;
column-gap: 2rem;
margin: 0 2rem;
}


#theme__switcher { cursor: pointer; }


main {
width: 300px;
margin: 5remauto;
font-size: 2rem;
line-height: 2;
padding: 1rem 2rem;
border-radius: 10px;
box-shadow: 2px 3.5px 5pxrgba(242, 215, 213, 0.4);
}

في الوقت الحالي، يجب أن تبدو الواجهة الخاصة بك كما يلي:

تنفيذ الوضع المظلم باستخدام CSS وJavaScript

لتنفيذ الوضع المظلم، عليك تحديد مظهره باستخدام CSS. ستستخدم بعد ذلك JavaScript للتعامل مع التبديل بين الوضع الداكن والوضع الفاتح.

إنشاء فئات الموضوع

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

.dark {
background: #1f1f1f;
color: #fff;
}
.light {
background: #fff;
color: #333;
}

اختيار العناصر التفاعلية

أضف جافا سكريبت التالي إلى ملفك script.js ملف. يحدد الجزء الأول من التعليمات البرمجية ببساطة العناصر التي ستستخدمها للتعامل مع التبديل.

// Get a reference to the theme switcher element and the document body
const themeToggle = document.getElementById("theme__switcher");
const bodyEl = document.body;

إضافة وظيفة التبديل

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

// Function to set the theme
functionsetTheme(theme) {
// If the theme is "dark," add the "dark" class, remove "light" class,
// and adjust filter style
 bodyEl.classList.toggle("dark", theme "dark");


// If the theme is "light," add the "light" class, remove "dark" class,
 bodyEl.classList.toggle("light", theme !== "dark");


// adjust filter of the toggle switch
 themeToggle.style.filter = theme "dark"? "invert(75%)": "none";
}


// Function to toggle the theme between light and dark


functiontoggleTheme() {
 setTheme(bodyEl.classList.contains("dark")? "light": "dark");
}


themeToggle.addEventListener("click", toggleTheme);

يؤدي هذا إلى تغيير سمات صفحتك بنقرة واحدة على حاوية التبديل.

تحسين الوضع المظلم باستخدام JavaScript

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

اكتشاف تفضيلات المستخدم

يتضمن ذلك التحقق من سمة نظام المستخدم قبل تحميل موقع الويب وضبط موقعك ليتوافق. وإليك كيف يمكنك القيام بذلك باستخدام matchMedia وظيفة:

// Function to detect user's preferred theme
functiondetectPreferredTheme() {
// Check if the user prefers a dark color scheme using media queries
const prefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
 setTheme(prefersDarkMode);
}


// Run the function to detect the user's preferred theme
detectPreferredTheme();

الآن، سيرى أي مستخدم يزور موقعك تصميمًا يتوافق مع المظهر الحالي لجهازه.

تفضيل المستخدم المستمر مع التخزين المحلي

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

functionsetTheme(theme) {
 bodyEl.classList.toggle("dark", theme "dark");
 bodyEl.classList.toggle("light", theme !== "dark");
 themeToggle.style.filter = theme "dark"? "invert(75%)": "none";


// Setting the theme in local storage
 localStorage.setItem("theme", theme);
}


// Check if the theme is stored in local storage


const storedTheme = localStorage.getItem("theme");


if (storedTheme) {
 setTheme(storedTheme);
}


functiondetectPreferredTheme() {
const prefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;


// Getting the value from local storage
const storedTheme = localStorage.getItem("theme");
 setTheme(prefersDarkMode && storedTheme !== "light"? "dark": "light");
}

احتضان التصميم الذي يركز على المستخدم

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