HTML & CSS · Middle · Question 59 of 75

How do you follow the user's system dark theme in plain CSS?

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

✓Correct answer: With the prefers-color-scheme media feature, usually redefining CSS variables
2With @media (theme: dark)
3Only with JavaScript

Explanation

If the site also has a manual theme toggle, combine it with a class or data-theme attribute that takes priority over the media query.

Further reading

Test yourself

Take the HTML & CSS · Middle quiz: questions and options are shuffled, and you get a review of your mistakes at the end.