HTML & CSS Interview Question #110

What is the prefers-color-scheme media feature?

Responsive Design, Modern CSS, Variables, Transitions & Animations Senior Advanced

Quick Interview Answer

prefers-color-scheme detects whether the user or operating system expresses a preference for a light or dark color scheme. CSS can use it to provide an automatic theme when the application has not selected another strategy.

Detailed Explanation

prefers-color-scheme detects whether the user or operating system expresses a preference for a light or dark color scheme. CSS can use it to provide an automatic theme when the application has not selected another strategy.

Dark mode should be designed intentionally. Simply inverting colors can create poor contrast, unreadable images, or inconsistent components.

Code Example

body {
    background: white;
    color: #111827;
}

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