Here’s a quick video with a demo of theme color in action and how to use it. Below, there is a description (it’s basically a “transcript” with additional details).
You have a website. You can style it in many ways, but the address bar and the toolbar break the flow. They stand out and don’t match the design. That’s because they are part of the browser itself, and you don’t have control over them… or do you?
Theme colors to the rescue!
Place the following code in the <head> (and change the content attribute to match the color you want):
<meta name="theme-color" content="#cc99cc">
If the browser supports theme colors, it will turn the top bars of the specified color (on mobile) or use the color to paint the background in some cases.
Notice that this behavior may change from browser to browser as the HTML standard doesn’t specify how to use the color; it only suggests that browsers should use it to highlight the page or the surrounding interface.
Some information about theme-color:
- Most mobile browsers (and some desktop browsers) support it!
- It doesn’t impact your page if it’s not supported; the browser will look the same as it usually does.
- It comes with automatic accessibility: if you pick a dark color, the text will automatically be light (and vice versa), ensuring that there will be enough color contrast for accessibility.
- It can be combined with the media attribute to specify different colors for different situations.
One example of that last point. You could have the following code:
<meta name="theme-color" content="#cc99cc">
<meta name="theme-color"
media="(prefers-color-scheme: dark)"
content="#000">
Then, the UI will be purple by default (#cc99cc), and it will change to black (#000) if the person has activated the dark mode in their system.
Top comments (1)
Nice tip - thanks for sharing Alvaro!