HTML और CSS से अपनी वेबसाइट का डार्क मोड (Dark Mode Toggle) कैसे बनाएं?
Website Dark Mode Toggle Kaise Banaye, TaknikiGyan.com पर मित्रों एक बार फिर से आपका स्वागत है। मित्रों क्या आपने कभी गौर किया है कि आजकल लगभग हर बड़ी वेबसाइट और ऐप में एक डार्क मोड बटन जरूर होता है?
Website Dark Mode Toggle
रात के वक्त जब हम फोन या लैपटॉप पर कोई साइट खोलते हैं, तो तेज सफेद रोशनी आँखों को चुभने लगती है। यार, इसी समस्या का शानदार समाधान है डार्क मोड! यह न सिर्फ यूजर की आँखों को आराम देता है, बल्कि वेबसाइट को एक बेहद मॉडर्न और प्रीमियम लुक भी देता है। आज के इस आर्टिकल में मैं आपको बिल्कुल अपनी भाषा में, बिना किसी भारी-भरकम और जटिल फ्रेमवर्क के, सिर्फ साधारण HTML, CSS और थोड़ी सी JavaScript की मदद से अपनी वेबसाइट पर डार्क मोड बनाना सिखाने जा रहा हूँ। आइए मिलकर इसे स्टेप-बाय-स्टेप समझते हैं!
🌙 डार्क मोड बनाने के मुख्य चरण
प्रिय मित्रों, अपनी वेबसाइट में डार्क मोड जोड़ने के लिए हमें मुख्य रूप से किन तीन चीज़ों पर काम करना होगा, उसकी सूची नीचे दी गई है:
| क्र.सं. | हिस्सा | इसका क्या काम है? |
|---|---|---|
| 1 | HTML स्ट्रक्चर | वेबपेज का लेआउट तैयार करना और एक टॉगल बटन जोड़ना। |
| 2 | CSS वैरिएबल्स | लाइट और डार्क मोड के हिसाब से रंगों (Colors) को सेट करना। |
| 3 | JavaScript लॉजिक | बटन क्लिक करने पर थीम बदलना और यूजर की पसंद याद रखना। |
🚀 स्टेप-बाय-स्टेप डार्क मोड बनाने का तरीका
1. HTML कोड तैयार करें
सबसे पहले हम अपने वेबपेज पर एक साधारण सा ढांचा बनाएंगे जिसमें एक हेडर, कुछ टेक्स्ट और थीम बदलने के लिए एक बटन (Toggle Button) होगा।
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<title>Dark Mode Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>डार्क मोड ट्यूटोरियल</h1>
<p>यह एक साधारण वेबपेज है जिस पर हम डार्क मोड सेट करना सीख रहे हैं।</p>
<button id="theme-toggle">🌙 डार्क मोड ऑन करें</button>
</div>
<script src="script.js"></script>
</body>
</html>2. CSS वैरिएबल्स और स्टाइलिंग लिखें
अब हम CSS में रूट वैरिएबल्स का इस्तेमाल करेंगे ताकि जब बॉडी पर ‘dark-mode’ क्लास जुड़े, तो रंग अपने आप बदल जाएं।
:root {
--bg-color: #ffffff;
--text-color: #1e293b;
--btn-bg: #059669;
--btn-text: #ffffff;
}
body.dark-mode {
--bg-color: #0f172a;
--text-color: #f8fafc;
--btn-bg: #38bdf8;
--btn-text: #0f172a;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
font-family: 'Poppins', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
transition: background 0.3s, color 0.3s;
}
.container {
text-align: center;
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
button {
background-color: var(--btn-bg);
color: var(--btn-text);
border: none;
padding: 12px 24px;
font-size: 1em;
border-radius: 8px;
cursor: pointer;
font-weight: bold;
transition: background 0.2s;
}3. JavaScript से टॉगल फंक्शन जोड़ें
आखिर में हम जावास्क्रिप्ट लिखेंगे जो बटन क्लिक होने पर बॉडी पर क्लास टॉगल करेगी और यूजर की पसंद को ब्राउज़र में सेव रखेगी।
const toggleBtn = document.getElementById('theme-toggle');
const body = document.body;
if (localStorage.getItem('theme') === 'dark') {
body.classList.add('dark-mode');
toggleBtn.textContent = '☀️ लाइट मोड ऑन करें';
}
toggleBtn.addEventListener('click', () => {
body.classList.toggle('dark-mode');
if (body.classList.contains('dark-mode')) {
localStorage.setItem('theme', 'dark');
toggleBtn.textContent = '☀️ लाइट मोड ऑन करें';
} else {
localStorage.setItem('theme', 'light');
toggleBtn.textContent = '🌙 डार्क मोड ऑन करें';
}
});💡 Website Dark Mode Toggle : TaknikiGyan.com की खास एक्सपर्ट टिप
साथियों, localStorage का उपयोग करना बहुत जरूरी है, क्योंकि इससे जब यूजर पेज रिफ्रेश करता है या दोबारा वेबसाइट पर आता है, तो उसकी चुनी हुई थीम (डार्क या लाइट) वैसे की वैसे बनी रहती है!
❓ अक्सर पूछे जाने वाले सवाल (FAQs)
क्या इसके लिए किसी भारी प्लगइन की जरूरत है?
बिल्कुल नहीं भाई! ऊपर दी गई बहुत ही हल्की कोडिंग से आप बिना किसी प्लगइन के अपनी साइट पर डार्क मोड चला सकते हैं।
क्या यह मोबाइल और डेस्कटॉप दोनों पर काम करेगा?
हाँजी, यह पूरी तरह से रिस्पॉन्सिव है और मोबाइल, टैबलेट व पीसी सभी डिवाइस पर बेहतरीन काम करता है।
⚠️ जरूरी चेतावनी और सावधानी
डार्क मोड बनाते वक्त इमेजेस (Photos) के कलर पर जरूर ध्यान दें। बहुत ज्यादा ब्राइट तस्वीरें डार्क बैकग्राउंड पर अजीब लग सकती हैं, इसलिए CSS में जरूरत पड़ने पर इमेज की ओपेसिटी (Opacity) हल्की कम कर सकते हैं।
फॉलो करें:
निष्कर्ष (Conclusion)
Website Dark Mode Toggle Kaise Banaye, दोस्तों डार्क मोड जोड़ना आज के समय में किसी भी वेबसाइट के लिए एक बहुत ही शानदार फीचर बन चुका है। इसे अपनी साइट पर लागू करके आप न केवल अपनी कोडिंग स्किल्स को बेहतर बनाते हैं, बल्कि विजिटर्स को भी एक प्रीमियम और आरामदायक अनुभव देते हैं। उम्मीद है यह जानकारी आपके बहुत काम आएगी। नीचे दिए गए हमारे अन्य आर्टिकल्स को भी जरूर पढ़ें!
अन्य लोकप्रिय और उपयोगी जानकारियां
🛠️ क्या आप भी TaknikiGyan.com जैसी प्रोफेशनल वेबसाइट बनवाना चाहते हैं?
नमस्ते दोस्तों! अगर आप भी बिना किसी भारी-भरकम प्लगइन के, बिल्कुल साफ-सुथरी कोडिंग वाली, मोबाइल और डेस्कटॉप फ्रेंडली वेबसाइट बनवाना चाहते हैं, तो आप बिल्कुल सही जगह पर आए हैं। हम आपको 95+ (Green Score) स्पीड के साथ पूरी तरह ऑप्टिमाइज़्ड वेबसाइट बनाकर देते हैं, वो भी मार्केट रेट से बेहद कम और किफायती कीमत में!
📬 संपर्क करने के लिए यहाँ ईमेल करें या नीचे कमेंट बॉक्स में लिखें:
