Dark mode implementation based on system settingWhat it checks and how to fix it

What it checks

Looks at the rendered page for dark mode support: a prefers-color-scheme media query in an inline style block, or a color-scheme meta tag that includes dark. It passes when either is found; it warns when the page only has dark-mode classes or a data-theme attribute, with no way to follow the visitor's system setting; a page with no dark mode at all is skipped.

Why it matters

A large share of visitors run their phone or computer in dark mode. A site that ignores that setting flashes a bright white page at them, and a manual dark theme that does not follow the system preference makes every first visit start in the wrong theme. Declaring color-scheme also makes the browser render form controls and scrollbars to match.

How to fix it

Tell the browser which schemes the page supports, and style dark mode from the system preference:

<meta name="color-scheme" content="light dark">

:root {
  --bg: #ffffff;
  --text: #111827;
}

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

body {
  background: var(--bg);
  color: var(--text);
}

If you also offer a manual toggle (for example a data-theme attribute), use the system preference as its default value and keep the user's choice in localStorage. With Tailwind CSS, the default dark: variant already follows prefers-color-scheme.