Theme-color is a hint for browser interface colors on supporting devices. It can help the browser toolbar visually match your site.
What You Need to Know
Not every browser uses the hint in the same way. It does not recolor your website's body or buttons; CSS controls the page itself.
Theme-color is a browser UI hint, not a guaranteed way to recolor every browser interface.
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
This example keeps the idea small. Copy it carefully, then follow the explanation instead of guessing what the browser will do.
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="theme-color" content="#304ffe">
<title>Color Theme</title>
</head>
<body>
<h1>My App</h1>
</body>Let’s Understand the Example
- A meta element gives the browser short information about the document. Different attributes control different hints.
- The head contains useful page information for the browser, such as its title and character encoding.
- 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.
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 “Color Theme”. The page itself shows “My App” as a heading; those two labels are allowed to be different.
Open the page and compare what appears in the browser tab with the heading inside the document. Both have different jobs.
Try It Yourself
- Pick a different theme color and compare on a supporting mobile browser.
- 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
- Expecting the meta theme color to change the background of the HTML document.
- The title in the browser tab and the heading visible in the page are different pieces of information.
Key Takeaways
- Theme-color is a hint for browser interface colors on supporting devices.
- A meta element gives the browser short information about the document. Different attributes control different hints.
- Theme-color is a browser UI hint, not a guaranteed way to recolor every browser interface.