डार्क मोड एक लोकप्रिय प्राथमिकता बन गया है, इसलिए आपको अपनी साइटों और अपने वेब ऐप्स पर इसका समर्थन करना चाहिए।

हाल के वर्षों में, डार्क मोड ने यूजर इंटरफेस विकल्प के रूप में महत्वपूर्ण लोकप्रियता हासिल की है। यह हल्के टेक्स्ट के साथ गहरे रंग की पृष्ठभूमि प्रदान करता है, जो न केवल आंखों के तनाव को कम करता है बल्कि बैटरी जीवन को भी बचाता है, खासकर OLED स्क्रीन पर।

जानें कि आप सीएसएस और जावास्क्रिप्ट के संयोजन का उपयोग करके अपनी वेबसाइटों और वेब ऐप्स में डार्क मोड विकल्प कैसे जोड़ सकते हैं।

डार्क मोड को समझना

डार्क मोड एक वैकल्पिक रंग योजना है आपकी वेबसाइट के लिए जो पारंपरिक प्रकाश पृष्ठभूमि को गहरे रंग से बदल देती है। यह आपके पृष्ठों को आंखों के लिए आसान बनाता है, विशेषकर कम रोशनी की स्थिति में। उपयोगकर्ता के अनुकूल होने के कारण डार्क मोड कई वेबसाइटों और एप्लिकेशन पर एक मानक सुविधा बन गया है।

अपना प्रोजेक्ट सेट करना

इसे लागू करने से पहले, सुनिश्चित करें कि आपके पास एक प्रोजेक्ट तैयार है और उस पर काम करने के लिए तैयार है। आपकी HTML, CSS और JavaScript फ़ाइलें संरचित तरीके से व्यवस्थित होनी चाहिए।

instagram viewer

HTML कोड

अपने पृष्ठ की सामग्री के लिए निम्नलिखित मार्कअप से प्रारंभ करें। एक आगंतुक इसका उपयोग करने में सक्षम होगा थीम__स्विचर अंधेरे और प्रकाश मोड के बीच टॉगल करने के लिए तत्व।

<body>
<navclass="navbar">
<spanclass="logo">Company Logospan>
<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>

सीएसएस कोड

उदाहरण को स्टाइल करने के लिए निम्नलिखित सीएसएस जोड़ें। यह डिफ़ॉल्ट लाइट मोड के रूप में कार्य करेगा जिसे आप बाद में डार्क मोड दृश्य के लिए नई शैलियों के साथ बढ़ाएंगे।

@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);
}

फिलहाल, आपका इंटरफ़ेस इस तरह दिखना चाहिए:

सीएसएस और जावास्क्रिप्ट का उपयोग करके डार्क मोड लागू करना

डार्क मोड को लागू करने के लिए, आप सीएसएस का उपयोग करके इसके स्वरूप को परिभाषित करेंगे। फिर आप डार्क और लाइट मोड के बीच स्विचिंग को संभालने के लिए जावास्क्रिप्ट का उपयोग करेंगे।

थीम कक्षाएं बनाना

प्रत्येक थीम के लिए एक कक्षा का उपयोग करें ताकि आप आसानी से दो मोड के बीच स्विच कर सकें। अधिक संपूर्ण प्रोजेक्ट के लिए, आपको इस पर विचार करना चाहिए कि कैसे डार्क मोड आपके डिज़ाइन के हर पहलू को प्रभावित कर सकता है.

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

इंटरैक्टिव तत्वों का चयन करना

निम्नलिखित जावास्क्रिप्ट को अपने में जोड़ें स्क्रिप्ट.जे.एस फ़ाइल। कोड का पहला बिट केवल उन तत्वों का चयन करता है जिनका उपयोग आप टॉगल को संभालने के लिए करेंगे।

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

टॉगल कार्यक्षमता जोड़ना

इसके बाद, लाइट मोड के बीच टॉगल करने के लिए निम्नलिखित जावास्क्रिप्ट का उपयोग करें (रोशनी) और डार्क मोड (अँधेरा) कक्षाएं। ध्यान दें कि वर्तमान मोड को इंगित करने के लिए टॉगल स्विच को बदलना भी एक अच्छा विचार है। यह कोड ऐसा करता है एक सीएसएस फ़िल्टर.

// 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);

यह टॉगल कंटेनर के एक क्लिक से आपके पेज की थीम बदल देता है।

जावास्क्रिप्ट के साथ डार्क मोड को बढ़ाना

निम्नलिखित दो सुधारों पर विचार करें जो आपकी डार्क मोड साइटों को आपके आगंतुकों के लिए उपयोग में अधिक सुखद बना सकते हैं।

उपयोगकर्ता प्राथमिकताओं का पता लगाना

इसमें वेबसाइट लोड होने से पहले उपयोगकर्ता के सिस्टम थीम की जांच करना और आपकी साइट को मिलान के लिए समायोजित करना शामिल है। यहां बताया गया है कि आप इसका उपयोग कैसे कर सकते हैं मैचमीडिया समारोह:

// 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");
}

उपयोगकर्ता-केंद्रित डिज़ाइन को अपनाना

डार्क मोड लुक से परे चला जाता है; यह उपयोगकर्ता की सुविधा और प्राथमिकताओं को पहले रखने के बारे में है। इस दृष्टिकोण का पालन करके, आप उपयोगकर्ता के अनुकूल इंटरफेस बना सकते हैं और बार-बार आने को प्रोत्साहित कर सकते हैं। जैसे ही आप कोड और डिज़ाइन करते हैं, उपयोगकर्ता की भलाई को प्राथमिकता देते हैं, और अपने पाठकों के लिए बेहतर डिजिटल अनुभव प्रदान करते हैं।