Question

What defines color of the browser tab in Bootstrap?

I failed to find it in Bootstrap documentation. And searching Stackoverflow didn't bring a result either.

I guess it's something like main theme color. It demonstrates itself differently in different browsers, typically tinting the tab bar.

In Safari, you have to select Compact in Preferences > Tabs > Tab layout, and have Show color in compact tab bar selected in Preferences > Advanced.

If the setting is off, the color shows when pulling the page down, like a color behind the background.

A good example is the GetBootstrap.com website which tints the browser with rgb(115, 84, 173) or #7354AD, but I cannot find the colour in CSS - it might have an alpha applied.

I thought it might be using a manifest.json file with theme_color or background_color parameter, where I could finally get rid of the tint of Bootstrap in one of the examples, but I wasn't able to choose another color.

Thanks!

screenshot of getbootstrap.com homepage with color tint in Safari

 4  50  4
1 Jan 1970

Solution

 1

The coloring of tabs or the browser's user interface cannot be controlled with CSS, but instead requires a meta tag named theme-color.

For your getbootstrap.com example, it currently looks like this:

<meta name="theme-color" content="#712cf9">

Note that this is not universally supported, and might require additional configuration by the user. For more details about browser support, see here.

2024-07-19
Robby Cornelissen