Color scheme metadata tells the browser that the document can work with light or dark native controls. It helps built-in form widgets choose suitable styles in supporting environments.
What You Need to Know
The page itself still needs appropriate CSS for readable colors. Metadata is a capability hint, not a command that makes every design accessible.
Think of an HTML document as a small book: the browser needs a title and some information about how to read it, while visitors need the actual chapters and text.
Example: See It in Action
Add this example to the appropriate part of a practice HTML page. Read each line before you open the page in your browser.
If this is only part of a document, place metadata and style elements in the head of a complete HTML page. Keep ordinary visible content in its body.
<head>
<meta name="color-scheme" content="light dark">
<title>Theme-Aware Forms</title>
</head>
<body><input aria-label="Your nickname">
</body>Let’s Understand the Example
- The head contains useful page information for the browser, such as its title and character encoding.
- A meta element gives the browser short information about the document. Different attributes control different hints.
- The title names the page in the browser tab. It is different from the heading shown on the page.
- Name is the key the browser normally sends when a form control is submitted.
- Content stores the value supplied by a meta element.
- Aria-label supplies an accessible name when a visible label is unavailable or inadequate.
Some of the markup affects the browser tab or page settings rather than appearing as visible text. Check the browser tab and inspector as well as the page itself.
What Should You See?
The browser tab should show “Theme-Aware Forms”.
Open the page and compare what appears in the browser tab with the heading inside the document. Both have different jobs.
Try It Yourself
- Test a text input in the browser's light and dark appearance settings.
- Save your changes, open or refresh the page, and compare the result with the original example.
- Tell a friend what your change did. If you are not sure, undo it, refresh the page, and compare.
Common Beginner Mistakes
- Declaring light dark when the page has dark text on a fixed dark background.
- The title in the browser tab and the heading visible in the page are different pieces of information.
Key Takeaways
- Color scheme metadata tells the browser that the document can work with light or dark native controls.
- The head contains useful page information for the browser, such as its title and character encoding.
- The page itself still needs appropriate CSS for readable colors. Metadata is a capability hint, not a command that makes every design accessible.