CSS How to Use Media Query for Dark Mode

Use the CSS media query @media (prefers-color-scheme: dark) to apply styles when the user prefers dark mode, for example: @media (prefers-color-scheme: dark) { body { background: black; color: white; } }.

Examples

Input@media (prefers-color-scheme: dark) { body { background: black; color: white; } }

OutputThe page background becomes black and text color white when dark mode is enabled in the user's system.

Input@media (prefers-color-scheme: dark) { p { color: lightgray; } }

OutputParagraph text changes to light gray color only if dark mode is active.

Input@media (prefers-color-scheme: light) { body { background: white; color: black; } }

OutputThe page background is white and text black when light mode is preferred.

How to Think About It

To support dark mode, check the user's system preference using the prefers-color-scheme media feature. Write CSS inside @media (prefers-color-scheme: dark) to style elements for dark mode. This way, the browser automatically applies these styles if the user prefers dark colors.

Algorithm

1

Detect user's color scheme preference using media query <code>prefers-color-scheme</code>.

2

Write CSS rules inside <code>@media (prefers-color-scheme: dark)</code> block for dark mode styles.

3

Optionally, write styles inside <code>@media (prefers-color-scheme: light)</code> for light mode.

4

The browser applies the correct styles based on user preference automatically.

Code

css

@media (prefers-color-scheme: dark) {
  body {
    background-color: #121212;
    color: #e0e0e0;
  }
}

body {
  background-color: white;
  color: black;
}

Output

The page background is white with black text by default, but if the user prefers dark mode, the background changes to dark gray (#121212) and text to light gray (#e0e0e0).

Dry Run

Let's trace how the browser applies styles when user prefers dark mode.

1

Check user preference

User's system preference is dark mode.

2

Apply media query styles

Browser applies styles inside @media (prefers-color-scheme: dark) block.

3

Render page

Background is #121212 and text color is #e0e0e0.

Step	User Preference	Applied Background	Applied Text Color
1	dark	none yet	none yet
2	dark	#121212	#e0e0e0
3	dark	#121212	#e0e0e0

Why This Works

Step 1: Detect user preference

The media query prefers-color-scheme checks if the user prefers dark or light mode.

Step 2: Apply conditional styles

CSS inside @media (prefers-color-scheme: dark) runs only if dark mode is preferred.

Step 3: Automatic switching

The browser automatically switches styles based on system settings without extra JavaScript.

Alternative Approaches

JavaScript detection

css

if(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  document.body.style.backgroundColor = '#121212';
  document.body.style.color = '#e0e0e0';
}

Allows dynamic style changes but requires scripting and is less efficient than pure CSS.

Manual toggle with CSS classes

css

body.dark-mode { background-color: #121212; color: #e0e0e0; }

User manually toggles dark mode by adding/removing a class; no automatic detection.

Complexity: O(1) time, O(1) space

Time Complexity

Applying media queries is handled by the browser instantly without loops, so it is constant time.

Space Complexity

No extra memory is needed beyond CSS rules, so space complexity is constant.

Which Approach is Fastest?

Using pure CSS media queries is fastest and most efficient compared to JavaScript detection.

Approach	Time	Space	Best For
CSS media query	O(1)	O(1)	Automatic, efficient dark mode styling
JavaScript detection	O(1)	O(1)	Dynamic control but more complex
Manual toggle	O(1)	O(1)	User-controlled theme switching