How can I change the color of header bar and address bar in the newest Chrome version on Lollipop?
To swiftly alter the color of Chrome's header and address bar on Android Lollipop, insert the meta tag with the theme-color attribute in the <head>:
Replace #HEX with your chosen hexadecimal color code to observe an immediate shift in Chrome's UI.
Step-by-step application
Incorporating the theme-color tag
Comprehend that a consistent color scheme across your web application and the browser interface, can meaningfully enhance user experience. The meta tag with the name attribute set to theme-color is the instrumental link for this UI transformation.
Dealing with compatibility issues
This nifty tag doesn't operate universally. Refer to caniuse.com to verify how well this tool fits into the browser compatibility matrix. Remember, the dark mode can override your chosen theme color.
Different operating environments
In the diverse world of web, different platforms require different approaches. For Windows Phone, apply:
On its iOS counterpart, employ:
Select among default, black or black-translucent options based on your preference. For enabling full screen, go with:
Perfecting your web app's aesthetics
Enrich your web application by including a 192x192px PNG favicon for a sharper display on Chrome for Android.
Pro-tip: In Chrome settings, use the "Merge Tabs and Apps" option for a harmonious color theme in the task switcher.
Activating your new theme
After inserting the meta tag, refresh your web page to apply your new theme. If updates aren't immediately visible, verify that you're viewing it on a supportive Android device and ensure cache is cleared.
Overtaking dark mode
If your theme is being overridden by dark mode, consider employing media queries or JavaScript to set meta tag's content based on device settings.
Was this article helpful?