Changing Tab color on Chrome Android


(Alex) #1

Hello,
I was wondering how I could add a colored tab to my website when viewed with Android devices using Google Chrome (For instance, Yahoo! has a purple browser tab and Github has a black browser tab).
I found this source, but how could I do this to my Discourse website?

Simply add this code in your theme or child theme‘s header.php file just before the closing </head> tag.
<meta name="theme-color" content="#ff6600" />

Thank you.


(Cameron:D) #2

By default this is already set to be the same as the forum header colour, which is set by the Admin > Customise > Colours > current colour set> Header Background value.

If you want it to be a different colour you could try add that tag to the </head> section of the current theme, but having two of the same tag might give unpredictable results.


(Alex) #3

It’s not working, I tried adding <meta name="theme-color" content="#333333"/> to the <head> of both the simple and dark themes only on mobile devices and it is not displaying a colored tab :confused:


(Cameron:D) #4

Yeah, that’s kind of what I thought might happen. Chrome is taking the value of the first theme-color tag it finds (Which is already set to your forum header colour) and is using that, so I’m not sure if there is a way to override just the value that goes into the theme-color - presumably you’ll need a plugin, but maybe a theme component can work too.


(Joe) #5

You can change the header background color value in your color scheme:

This will change two things:

  • The toolbar color in Android
  • The forum header

You can then use CSS to override the color for the forum header background like so:

.d-header {
  background-color: #111111;
}

Login oauth button size not fit
(Alex) #6

I have no idea why it’s not working still, what you’re saying is correct :confused:


(Kane York) #7

Make sure you create a new Theme and apply the color scheme there.


original:
It’s not working because it’s a shade of grey.

It’ll work if you make it closer to black, or make it a non-grey color.


(Alex) #10

Sorry but that didn’t work.


(Joe) #11

I have a feeling you’re not actually applying the color scheme. The highlight color in your screenshot is

(Red circle is mine)

While the highlight color on your site is:

so you’re making the changes in a non-active color scheme. Which explains why it’s not working for you.

Be sure to make the changes in your current active color scheme.