CSS Function

prefers-color-scheme

The prefers-color-scheme media feature detects the user's system-level preference for light or dark color themes.

Syntax

@media (prefers-color-scheme: light | dark)

Parameters

Name	Type	Required	Description
light	keyword	No	Matches when the user prefers a light theme
dark	keyword	No	Matches when the user prefers a dark theme

Examples

Dark mode styles

Apply dark theme when user prefers dark mode.

css

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

Conditional image

Swap images based on color scheme.

html

<picture>
  <source srcset="dark-logo.png" media="(prefers-color-scheme: dark)">
  <img src="light-logo.png" alt="Logo">
</picture>

Tailwind dark mode

Tailwind's dark: variant uses prefers-color-scheme by default.

html

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100">Content</div>

Browser Support

✓

Chrome

v76++

✓

Firefox

v67++

✓

Safari

v12.1++

✓

Edge

v79++

✓

Opera

v62++

Tailwind Equivalent

You can achieve similar results in Tailwind CSS using the following utility classes:

dark: variant with darkMode: 'media' in config (or class strategy for manual toggle)

Frequently Asked Questions

Can I detect the preference in JavaScript?▼

Yes. Use window.matchMedia('(prefers-color-scheme: dark)').matches and listen for changes with addEventListener('change', ...).

Should I use media strategy or class strategy in Tailwind?▼

Use class strategy if you want a manual toggle. Use media strategy for automatic system-preference detection. Many sites use class strategy with JavaScript to support both.

Explore CSS Color Tools

Try our free tools to work with prefers-color-scheme and other CSS color functions.

Open Tools