Dark Mode CSS

Dark mode CSS is the set of styles that switch a page to a dark color scheme. Browsers expose the operating system setting through the prefers-color-scheme media query, and developers usually define colors as CSS variables so one block of overrides flips the whole theme.

Why it matters

Many users choose dark themes to reduce glare or save battery on OLED screens. Respecting the preference is expected, and a page that ignores it can flash bright white at night. A good implementation also needs readable contrast in both themes, adjusted images and a way to override the system choice with a manual toggle.

Example

:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --text: #1a1a1a;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #121212; --text: #e8e8e8; }
}
:root[data-theme="dark"] { --bg: #121212; --text: #e8e8e8; }
body { background: var(--bg); color: var(--text); }

color-scheme tells the browser to darken built-in controls and scrollbars too. The data-theme selector supports a manual toggle.

Common mistakes

• Pure black backgrounds with pure white text, which can be harsh; slightly softer values read better.
• Hard-coded colors that bypass the variables.
• Applying the stored theme after load, causing a flash of the wrong theme.
• Forgetting to check contrast in both modes.

Related

• CSS variables
• Media query
• WCAG
• CSS

यह पेज सामान्य जानकारी है, जिसे हमारी संपादकीय टीम ने लिखा है और दस्तावेज़ीकरण बदलने पर अपडेट किया जाता है। सर्वर और प्रदाता अलग-अलग होते हैं, इसलिए बदलाव पहले सुरक्षित तरीके से जाँचें। देखें: संपादकीय नीति और अस्वीकरण.