DEV Community

Cover image for HTML Tip: Theme Colors
Alvaro Montoro
Alvaro Montoro

Posted on • Originally published at alvaromontoro.com

5

HTML Tip: Theme Colors

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">
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

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.

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (1)

Collapse
 
ant_f_dev profile image
Anthony Fung

Nice tip - thanks for sharing Alvaro!

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay