• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Implemented Adding Theme Color Meta In Style

ibnesayeed

Well-known member
#1
For about half years from now, Chrome for Android on Lollipop supports theme-color meta tag which affects the color of the address bar of the browser and since system status bar in Android Lollipop is adaptive, it changes the color too to nicely blend with the application. This not only gives a unique touch to the web pages, but it is also helpful in recognizing the relevant tab from the multitasking deck of cards as each browser tab now appears as a separate card there in Lollipop along with other applications. I would suggest adding @primaryMedium color by default there. For reference please have a look at http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android

HTML:
<meta name="theme-color" content="@primaryMedium">
 
#6
You could use that add-on or you could edit the PAGE_CONTAINER template as per that comment on StackOverflow.
I quite like that add-on solution since it's probably the one that's the most upgrade friendly.
However it would be nice for such an add-on to be able to select a colour from the palette.

Here the template you should edit:
Admin CP -> Appearance -> Templates -> PAGE_CONTAINER

Here is what I added to mine:
HTML:
    <!-- SL: Specify favicon and status bar colour for various browsers -->
    <link rel="icon" href="/favicon.ico?v=2" />
    <!-- Chrome, Firefox OS and Opera -->
    <meta name="theme-color" content="@contentBackground">
    <!-- Windows Phone -->
    <meta name="msapplication-navbutton-color" content="@contentBackground">
    <!-- iOS Safari -->
    <meta name="apple-mobile-web-app-status-bar-style" content="@contentBackground">
    <!-- --------------------- -->
 
Last edited: