How to change the color of header bar and address bar in newest Chrome version on Lollipop

Question

Haven t found anything on this topic yet  I really like the ability to change the color of address bar and header color on Overview  Is there any easy way to do this       I think you need Android 5 0 Lollipop for this to work  and Chrome s Merge Tabs and Apps set to On

User · Answer

From the Official documentation       For example  to set the background color to orange     lt meta name  theme-color  content   db5945  gt       In addition  Chrome will show beautiful high-res favicons when they   re provided  Chrome for Android picks the highest res icon that you provide  and we recommend providing a 192  192px PNG file  For example     lt link rel  icon  sizes  192x192  href  nice-highres png  gt

User · Answer

Found the solution after some searching  You need to add a  lt meta gt  tag in your  lt head gt  containing name  quot theme-color quot   with your HEX code as the content value  For example   lt meta name  quot theme-color quot  content  quot  999999 quot    gt   Update  If the android device has native dark-mode enabled  then this meta tag is ignored   Chrome for Android does not use the color on devices with native dark-mode enabled   source  https   caniuse com  search theme-color

User · Answer

For example  to set the background to your favorite Branding color  Add Below Meta property to your HTML code in HEAD Section   lt head gt           lt meta name  theme-color  content  Your Hexadecimal Code  gt         lt  head gt    Example   lt head gt           lt meta name  theme-color  content   444444  gt         lt  head gt    In Below Image  I just mentioned How Chrome taken your theme-color Property    Firefox OS  Safari  Internet Explorer and Opera Coast allow you to define colors for elements of the browser  and even the platform using meta tags    lt  -- Windows Phone -- gt   lt meta name  msapplication-navbutton-color  content   4285f4  gt   lt  -- iOS Safari -- gt   lt meta name  apple-mobile-web-app-capable  content  yes  gt   lt meta name  apple-mobile-web-app-status-bar-style  content  black-translucent  gt    Safari specific styling  From the guidelinesDocuments Here  Hiding Safari User Interface Components  Set the apple-mobile-web-app-capable meta tag to yes to turn on standalone mode  For example  the following HTML displays web content using standalone mode    lt meta name  apple-mobile-web-app-capable  content  yes  gt    Changing the Status Bar Appearance  You can change the appearance of the default status bar to either black or black-translucent  With black-translucent  the status bar floats on top of the full screen content  rather than pushing it down  This gives the layout more height  but obstructs the top  Here   s the code required    lt meta name  apple-mobile-web-app-status-bar-style  content  black  gt    For more on status bar appearance  see apple-mobile-web-app-status-bar-style   For Example   Screenshot using black-translucent    Screenshot using black

User · Answer

You actually need 3 meta tags to support Android  iPhone and Windows Phone   lt  -- Chrome  Firefox OS and Opera -- gt   lt meta name  theme-color  content   4285f4  gt   lt  -- Windows Phone -- gt   lt meta name  msapplication-navbutton-color  content   4285f4  gt   lt  -- iOS Safari -- gt   lt meta name  apple-mobile-web-app-status-bar-style  content   4285f4  gt

[android] How to change the color of header bar and address bar in newest Chrome version on Lollipop?

Examples related to android

Examples related to html

Examples related to google-chrome