CSS Dark Mode

पूरी तरह dark room में एक bright tablet screen पर पढ़ने की कल्पना करें। bright white background आपकी आँखों को नुकसान पहुँचा सकता है और strain पैदा कर सकता है। HTML Dark Mode इस समस्या को solve करता है। यह एक design setting है जो आपकी webpage colors को आपके user की system preferences या manual theme choices के साथ automatically match करने के लिए adapt होने देती है। low-light environments में dark backgrounds और comfortable text contrast इस्तेमाल करने के लिए अपनी color schemes adjust करके, आप अपने readers की eyesight protect करते हैं और mobile devices पर battery consumption कम करते हैं।

In this page:

prefers-color-scheme Query
Dark Mode के लिए CSS Variables इस्तेमाल करना
color-scheme Meta Tag
Manual Class Toggles
Images/Icons को Dim और Invert करना

Syntax

css

@media (prefers-color-scheme: dark) {
  :root {
    --variable-name: value;
  }
  body {
    background-color: color;
    color: color;
  }
}

prefers-color-scheme Query

prefers-color-scheme media query आपकी webpage को automatically detect करने देता है कि किसी visitor ने अपनी device settings में dark mode enable किया है या नहीं। यह आपको JavaScript की ज़रूरत के बिना सीधे CSS में dark styling rules लागू करने देता है।

Note:

load पर automated, eye-friendly dark mode themes configure करने के लिए prefers-color-scheme इस्तेमाल करें।
Accepted values:
@media (prefers-color-scheme: dark) — dark preference
@media (prefers-color-scheme: light) — light preference
no-preference — historical value, आमतौर पर unmatched
नोट: OS या browser setting को reflect करता है

Warning: system preferences check करने में fail होना उन users पर एक bright white layout force कर सकता है जो comfortable dark themes prefer करते हैं।

उदाहरण: The prefers-color-scheme Query

css

<style>
body { font-family: sans-serif; padding: 1rem; }
@media (prefers-color-scheme: dark) {
  body {
    background: #111;
    color: #eee;
  }
}
</style>
<p>Switch your OS to dark mode and this page turns dark.</p>

Dark Mode के लिए CSS Variables इस्तेमाल करना

हर element के लिए duplicate style rules लिखने के बजाय, आप root selector के अंदर CSS custom properties (variables) इस्तेमाल करके अपने page colors define कर सकते हैं। themes switch करने के लिए, आप बस अपने variables को एक central जगह पर update करते हैं।

Note:

अपनी dark mode themes को update और maintain करना जल्दी और आसान बनाने के लिए CSS variables इस्तेमाल करें।
Accepted values:
:root { --bg: ...; } — light values
@media (prefers-color-scheme: dark) { :root { --bg: ...; } } — dark values
var(--bg) — consumers unchanged रहते हैं
color-scheme: light dark — native UI match करता है

Warning: सुनिश्चित करें कि आपके color variables दोनों themes में high contrast रखें ताकि आपका content readable रहे।

उदाहरण: Using CSS Variables for Dark Mode

css

<style>
body { font-family: sans-serif; padding: 1rem; }
:root {
  --bg: white;
  --text: black;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: black;
    --text: white;
  }
}
body {
  background: var(--bg);
  color: var(--text);
}
</style>
<p>Colors follow your OS light/dark setting.</p>

color-scheme Meta Tag

color-scheme meta tag या CSS property browser को बताती है कि आपकी webpage light और dark दोनों themes support करती है, scrollbars और form buttons को automatically adjust होने देते हुए। scrollbar-color automatic color-scheme adjustment से एक कदम आगे जाकर आपको scrollbar के exact thumb और track colors manually set करने देता है, उपयोगी जब आपकी dark theme browser के default dark scrollbar palette के बजाय custom brand colors इस्तेमाल करती हो।

Note:

browser को इसे जल्दी load कराने के लिए अपने head section के अंदर color-scheme meta tag declare करें।
Accepted values:
color-scheme: normal — default, कोई declared color scheme नहीं (browser light render करता है)
color-scheme: light — सिर्फ light
color-scheme: dark — सिर्फ dark
color-scheme: light dark — दोनों support करता है
meta name="color-scheme" — HTML equivalent
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

Warning: इसे declare करने में fail होना scrollbars को otherwise dark page पर bright white दिखा सकता है।

उदाहरण: The color-scheme Meta Tag

css

<style>
body { font-family: sans-serif; padding: 1rem; color-scheme: light dark; }
<head>
  <meta name="color-scheme" content="light dark">
</head>
</style>
<!-- The meta tag goes in <head>; here it is shown with a themed page -->
<meta name="color-scheme" content="light dark">
<p>Form controls and scrollbars follow your OS theme.</p>
<input placeholder="A themed input">

Manual Class Toggles

जबकि system preferences सुविधाजनक हैं, users अक्सर themes switch करने के लिए एक manual toggle button चाहते हैं। आप इसे JavaScript इस्तेमाल करके अपने html tag पर एक custom class (जैसे '.dark-mode') लागू करके और अपनी CSS के अंदर उस class को style करके handle कर सकते हैं।

Note:

user की manual theme selection को localStorage में save करें ताकि उनकी preference visits के बीच persist रहे।
Accepted values:
.dark { ... } — html या body पर लागू class
[data-theme="dark"] — attribute approach
classList.toggle(dark) — JavaScript toggle
localStorage — choice याद रखता है

Warning: सुनिश्चित करें कि आपका manual toggle button उन keyboard users के लिए accessible है जो mouse से navigate नहीं कर सकते।

उदाहरण: Manual Class Toggles

css

<style>
body {
  background: white;
  color: black;
}
body.dark-mode {
  background: black;
  color: white;
}
</style>
<body class="dark-mode">Toggled via a JS-added class</body>

Images/Icons को Dim और Invert करना

Bright white images और illustrations किसी dark page पर jarring दिख सकते हैं। आप dark mode में अपनी images को थोड़ा dim करने या icons को invert करने के लिए CSS filters इस्तेमाल कर सकते हैं ताकि वे बहुत bright न दिखें।

Note:

dark mode में अपनी images की brightness soften करने और उन्हें page में blend करने के लिए एक हल्का opacity filter लागू करें।
Accepted values:
filter: brightness(0.8) — किसी image को dim करता है
filter: invert(1) — किसी icon को invert करता है
opacity: 0.85 — किसी image को soften करता है
filter: none — reset करता है
inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords

Warning: standard photographic images को invert न करें, क्योंकि यह उनके colors को distort कर देगा और उन्हें negatives जैसा दिखा देगा।

उदाहरण: Dimming and Inverting Images/Icons

css

<style>
body { font-family: sans-serif; padding: 1rem; }
@media (prefers-color-scheme: dark) {
  img {
    opacity: 0.85;
  }
}
</style>
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='80'%3E%3Crect width='120' height='80' fill='%23f90'/%3E%3C/svg%3E" alt="Sample image">

Live Example

Chapter Quiz — Complete all 25 topics to unlock

0/25 topics done

Complete these topics first:

← Previous Lesson CSS Pagination (Print) Next Lesson → CSS Accessibility

CSS Dark Mode

prefers-color-scheme Query

Dark Mode के लिए CSS Variables इस्तेमाल करना

color-scheme Meta Tag

Manual Class Toggles

Images/Icons को Dim और Invert करना

Chapter Quiz — Complete all 25 topics to unlock

Login to run this code