CSS Dark Mode

What is CSS Color Mode?

CSS color mode refers to designing your website to support dark mode and light mode themes — automatically switching based on the user’s system settings.

Why Support Color Modes?

Improves user experience
Reduces eye strain in low light (dark mode)
Makes your site look modern and adaptive

How to Detect User’s Preference

Use the @media (prefers-color-scheme) CSS media feature.

Light & Dark Mode Example
/* Light mode (default) */
body {
  background: #ffffff;
  color: #000000;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  body {
    background: #121212;
    color: #ffffff;
  }
}

The browser automatically applies the correct mode based on the user’s OS settings.

Style Specific Elements

/* Light theme button */
button {
  background-color: #f0f0f0;
  color: #333;
}

/* Dark theme override */
@media (prefers-color-scheme: dark) {
  button {
    background-color: #333;
    color: #f0f0f0;
  }
}

Combine with CSS Variables for Easy Theming

:root {
  --bg-color: #ffffff;
  --text-color: #000000;
}

@media (prefers-color-scheme: dark) {
  :root {
  --bg-color: #121212;
  --text-color: #ffffff;
 }
}

body {
  background: var(--bg-color);
  color: var(--text-color);
}

This makes it super easy to switch themes site-wide!

Feature	What It Does
`@media (prefers-color-scheme: dark)`	Targets users in dark mode
`@media (prefers-color-scheme: light)`	Targets users in light mode
`CSS Variables`	Makes color theming easier and reusable