Code language: HTML
<meta name="color-scheme" content="dark light">
The browser will use this information in tandem with the user’s browser or device settings to determine what colors to use for everything from background and foregrounds to form controls and scrollbars. The primary use for
<meta name="color-scheme">is to indicate compatibility with—and order of preference for—light and dark color modes.
— Standard metadata names - HTML: HyperText Markup Language | MDN
When this meta tag is added, the browser takes the user’s color scheme preferences into consideration when rendering UA-controlled elements of the page (like a
<button>). It renders colors for the root background, form controls, and spell-check features (as well as any other UA-controlled styles) based on the user’s preference.[…]
Although themes are manually styled for the most part (which overrides the UA styles), informing the browser about the supported themes helps to avoid even the slightest chance of a potential FOIT situation. This is true for those occasions where HTML has rendered but CSS is still waiting to load.