HTML डार्क मोड
In this page:
<meta name="color-scheme" content="light dark">
<style>
@media (prefers-color-scheme: dark) {
selector { property: value; }
}
</style>सिस्टम प्रेफरेंस को सुनना
आप prefers-color-scheme मीडिया क्वेरी का उपयोग करके यह पता लगा सकते हैं कि यूज़र ने अपनी डिवाइस सेटिंग्स में डार्क मोड इनेबल किया है या नहीं। यह आपकी CSS स्टाइलशीट को बिना किसी JavaScript स्क्रिप्ट की ज़रूरत के अपने-आप अपने रंग एडजस्ट करने देता है।
उदाहरण: Listening to System Preferences
<style>
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
}
</style>color-scheme Meta टैग
color-scheme meta टैग ब्राउज़र को बताता है कि आपका वेबपेज लाइट और डार्क दोनों थीम्स सपोर्ट करता है। यह ब्राउज़र को नेटिव एलिमेंट्स (जैसे scrollbars, form buttons, और input fields) को पेज थीम से मैच करने के लिए अपने-आप एडजस्ट करने का निर्देश देता है।
उदाहरण: The color-scheme Meta Tag
<head>
<meta name="color-scheme" content="light dark">
</head>CSS Variables से Dynamic Colors
हर एलिमेंट के लिए डुप्लीकेट स्टाइल रूल्स लिखने के बजाय, आप root सिलेक्टर के अंदर CSS custom properties (variables) का उपयोग करके अपने पेज के रंग परिभाषित कर सकते हैं। थीम्स बदलने के लिए, आप बस अपने variables को एक ही सेंट्रल जगह पर अपडेट करते हैं।
उदाहरण: Dynamic Colors with CSS Variables
<style>
:root {
--bg-color: white;
--text-color: black;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
</style>Data Attributes से थीम्स टॉगल करना
जहाँ सिस्टम प्रेफरेंसेस सुविधाजनक हैं, वहीं यूज़र्स को अक्सर थीम्स बदलने के लिए एक मैनुअल टॉगल बटन भी चाहिए होता है।
आप अपने HTML टैग पर एक कस्टम data एट्रिब्यूट (जैसे data-theme="dark") लगाने के लिए JavaScript का उपयोग करके, और उस एट्रिब्यूट को अपने CSS के अंदर स्टाइल करके इसे हैंडल कर सकते हैं।
उदाहरण: Toggling Themes with Data Attributes
<html data-theme="dark">
</html>
<style>
[data-theme="dark"] { background-color: black; }
</style>Image और Vector Flash को रोकना
चमकीली सफेद इमेजेज़ और इलस्ट्रेशन्स डार्क पेज पर कर्कश (jarring) दिख सकते हैं। आप अपनी इमेजेज़ को थोड़ा धीमा करने या डार्क मोड में आइकन्स को इनवर्ट करने के लिए CSS फिल्टर्स का उपयोग कर सकते हैं, ताकि वे बहुत ज़्यादा चमकीले न लगें।
उदाहरण: Preventing Image and Vector Flash
<style>
[data-theme="dark"] img {
filter: brightness(0.8);
}
</style>JavaScript से थीम चुनाव को पहचानना और सेव करना
सिर्फ सिस्टम प्रेफरेंस को अपने-आप फॉलो करने के अलावा, ज़्यादातर साइट्स यूज़र्स को एक टॉगल बटन से मैनुअली थीम ओवरराइड करने देती हैं, फिर उस चुनाव को localStorage का उपयोग करके याद रखती हैं ताकि यह विज़िट्स के बीच बना रहे, चाहे ऑपरेटिंग सिस्टम में जो भी सेट हो।
उदाहरण: Detecting and Saving Theme Choice with JavaScript
<script>
const theme = localStorage.getItem('theme') || 'light';
document.documentElement.setAttribute('data-theme', theme);
</script>- prefers-color-scheme support शामिल करना भूल जाना, जो low-light readers पर bright white theme force कर देता है।
- color-scheme meta tag छोड़ देना, जिससे dark mode में scrollbars और inputs bright white दिखते रह जाते हैं।
- pure black (#000) और pure white (#fff) values इस्तेमाल करना, जो एक harsh, high-contrast display बना सकता है जो आंखों पर zor डालता है।
- HTML Dark Mode को prefers-color-scheme media query से automatically detect किया जा सकता है।
- color-scheme meta tag browser को बताता है कि scrollbars और native inputs को active theme से match करके style करे।
- आसान theme styling के लिए CSS variables इस्तेमाल करें, और blinding glare रोकने के लिए CSS filters से अपनी images customize या dim करें।
standard prefers-color-scheme queries और color-scheme meta tags सभी modern browsers द्वारा natively supported हैं।
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: