Add this to your <head> and most dark mode problems disappear:

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

I spent years watching developers wrestle with dark mode by writing endless media queries, fighting browser defaults, and wrestling with scrollbar styling. Then I saw this tag in a codebase I inherited and everything clicked.

The color-scheme meta tag tells the browser two things: which color schemes your page supports, and which one to prefer when rendering browser UI elements. Form controls, scrollbars, text selection, native dialogs. The stuff your CSS cannot touch.

It is not just a flag

What surprised me is that you can change it with JavaScript:

const colorScheme = document.querySelector('meta[name="color-scheme"]');

// Lock to dark mode
colorScheme.content = 'dark';

// Or back to light
colorScheme.content = 'light';

The browser reacts immediately. No CSS, no state management. This is useful for sites that want an explicit override rather than relying on prefers-color-scheme.

Pair it with CSS

The meta tag alone only affects browser chrome. For your own content, you still need the CSS counterpart:

:root {
  color-scheme: light dark;
}

Together, these two lines handle the browser UI and enable the light-dark() function, which is the cleanest way to write dual-mode colors:

background-color: light-dark(#ffffff, #121212);
color: light-dark(#1a1a1a, #e5e5e5);

The order matters

Notice the examples use light dark not dark light. The first value is the preferred scheme. This affects things like initial-color-scheme and how certain system integrations work. Most tutorials get this right, but I have seen dark light in the wild more than once, and it is not the same.

Skip the magic

This tag does not automatically darken your page. It does not read your CSS variables and invert them. It tells the browser what you support, and then the browser decides how to render its own UI when your page is open.

That limitation is also the feature. You stay in control of your design. The browser just stops fighting you.

If you have ever shipped a dark mode that looked broken because form inputs stayed white, or scrollbars were stuck in light mode, this tag is the first thing to check. It is three lines and it has been well-supported for years.