Colored tab chrome

Vlad hello there! I'm very interested in this feature. I think having the option to tint the window to the current tab theme-color website's attribute makes it an immersive experience, just like Safari. I like the settings mockup you posted a while ago.

Maybe this helps the development: I made a Firefox extension that does that. This is the extension: colorf0x. This was possible because Firefox exposes an API to manipulate some aspects of the browser via extensions, like the colors of the UI.

The bit you may be interested is the code in the file background.js. Specifically, the functions getForegroundScheme() and toolbar_field_colorCSS(). I also make usage of the chroma.js library to manipulate the colors.

Spent a long time trying to get the color algorithms just right to get the best text contrast (white or black) depending on the background color. Some colors may have the same level of computed luminance, but we don't perceive the same luminance with our eyes with certain hues. This code gets everything just right. It also computes different colors for the tabs and URL bar in a smart way, so the perceived HUEs and coloration remains consistent by changing the relative brightness (according to the WCAG definition).

I've put a lot of effort to match the colors like Chrome for Android does, so the equations and algorithms are there and may be useful for this feature. In my extension, it ignores the dark theme setting of the browser/system because some websites have a theme-color for dark color schemes.

Also, please if you happen to implement this feature, would be great to have an option to enable or disable the transparency effects in the toolbar. Most websites with these theme-color attributes usually look the best with opaque windows because they blend with an opaque header. I've came across some sites with Orion that have a gradient black background in the header, but looks messy with the elements appearing again in Orion toolbar when they should have disappeared completely in the header's site.

Safari seems to implement transparency support in the theme-color tag, but haven't tested it further to see how it works. A simple support for enforced opaqueness + theme-color + watch if the values changes dynamically in the DOM should be enough at least for a first itteration.

Hopefully you find this helpful. Thank you so much!

Am following up on this feature as well. I don't like the idea of a static color. I like the immersive effect of an adaptive tab/tool bar.

This Firefox extension: Adaptive Tab Bar Color, has done an incredible job with this. I was actually pretty blown away by how good it is. To be honest, I think it even does a better job than Safari since Safari needs a the website developers to include a property or some type of flag which some websites don't bother to do. Makes the experience feel a little fragmented.

I tried to see if that Firefox extension worked in Orion, but it didn't. Would've been sweet. However, I think this kind of thing should be built into the browser.

Here's the repo for that Firefox extension's repo—maybe it can inspire a solution.

Marking this done as it finally landed in Orion RC. Let us know the feedback!