How To Set A Meta Theme Color For Your Website
If you are just a beginner, you may ask yourself what are meta tags??
Meta tags are snippets of text that describe a page’s content and they don’t appear on the page itself, but only in the page’s code.
These are tags used in HTML and XHTML documents to provide structured metadata about a Web page.
Well, enough of that, Friend have you ever visited a site and its toolbar or web address zone adopted the site's navigation bar color, Making the mobile Network signals bars network_cell, battery battery_charging_full and time timer to be wrapped in that theme color.
Well, there is no much logic behind the scenes, In this simple article, I will provide you with a single line of code to achieve that.
We will use the meta-theme color, Using it is one way to show mobile users that the site they have visited is legit or a big brand.
The meta-theme color was released way back in Chrome for Android version 39 on 12th/November/2014 (Google Developers doc site).
There are very many websites that use this meta theme-color, Examples of some of the top websites that use the meta-theme color on their mobile sites include:
|SITE NAME||SITE LINK|
|Facebook Mobile site||https://m.facebook.com/|
|Materializecss Mobile site||https://materializecss.com/|
|Instagram Mobile site||https://www.instagram.com/|
|Medium Mobile site||https://medium.com/|
Absorbing this amount of content would be a lot if you are just reading it, So I have put together a very simple video for you to understand this Meta Theme Color.
The syntax is pretty simple: add a meta tag to your page’s
with the name="theme-color", and set the content to any valid CSS color.
<meta name="theme-color" content="#00796b">
In a nutshell, using this meta-theme color tag will acutely increase the wow factor of your website on mobile devices.collections_bookmark Category :: Howto
date_range Published :: 4 months ago At: 06:38 PM
person Writer :: Code
- LEARN MORE
YOU MAY LIKE THESE POSTS