How can you implement a dark mode stylesheet using CSS media queries?

• A. Use @media (prefers-color-scheme: dark) { ... } or toggle CSS variables to switch color values.
• B. Use @media (color-scheme: light) { ... }
• C. Use @supports (color: #000) { ... }
• D. Use @font-face to define dark fonts

Answer: (A)

The main idea is to let the browser switch styles based on the user’s system preference using the prefers-color-scheme media feature. You define your colors with CSS custom properties (variables) and then override those variables inside a media query for dark mode. By using the same variables throughout your CSS, changing to a dark theme becomes a single, centralized change—no need to rewrite many rules. This approach also respects the user’s settings automatically, and you can add a manual toggle later by applying a class or data attribute that overrides the same variables if you want a user-controlled option.

The other options don’t fit because one targets the light color scheme rather than detecting when the user is in dark mode, which won’t apply the dark styles appropriately. The third uses feature detection that isn’t about switching themes, and the fourth is about font loading, which has nothing to do with color theming.