prefers-color-scheme: initial theme according to the system

Useful to know

With the media application prefers-color-scheme, the site can report a preferred light or dark color scheme. The @media (prefers-color-scheme: dark) example applies certain styles when a dark scheme is requested. This is a presentation preference, not room lighting information. [1]

A practical approach is to define color variables for background, text, frames and links, and in the query to change their values. So the same structure can get a different palette without copying the whole CSS.

Check the forms, logos, photos, and focus states in both schemas. Inverting the colors of the entire page is rarely enough for a consistent result. If it has its own theme button, the human-selected mode should have a clear relationship with the system preference, instead of the two settings fighting each other.