1-Minute HTML Tip: Theme Colors
With theme color, we can specify a color that user agents can use to provide a customized experience. Mobile browsers usually change the color of the address and tool bars, and desktop browsers may use it as a background color (only visible when exceeding the scroll).
This video shows how to use theme-colors (with meta tags) and a couple of tricks with it.
Blog post with more details: https://alvaromontoro.com/blog/68041/...
(Also available on Medium: / 1-minute-html-tip-theme-colors )
----
"Transcript" from the video (with additional details):
You have a website. You can style it in many different ways... but the address and tool bars break the flow. They stand out and don't match the design.
Theme colors to the rescue!
Place this code in the ‹head›*:
```
‹meta name="theme-color" content="#bc5bf3"›
```
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 the behavior may change from browser to browser as the HTML standard doesn't specify how to use the color, only to use it to highlight the page or the surrounding interface.
Some information about theme-color:
Supported by most mobile browsers and some desktop browsers!
No impact if not supported
Automatic accessibility: if you pick a dark color, the text will automatically be light (and vice versa)
Supports the media attribute, so you can specify different colors for different situations. Example*:
```
‹meta name="theme-color" content="#bc5bf3"›
‹meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000"›
```
*beware, the tag brackets are not standard because YouTube doesn't allow them in the description.
----
Music: Bensound.com/royalty-free-music
License code: BDJXEK0DVJVEDOR5