1237912 - Use site's "theme-color" meta tag for desktop Firefox UI

Status: UNCONFIRMED

(Firefox :: Theme, enhancement)

Description

[takatomatsuki]

Attachment: ff-theme-color.png

User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:44.0) Gecko/20100101 Firefox/44.0
Build ID: 20160104162232

Comment 1

[takatomatsuki]

Vivaldi uses the site's "theme-color" meta tag to colour tabs and the navigation bar (if enabled by the user), and uses the favicon icon's colour if there is no theme-color metatag. Chrome for Android does similar (but not on desktop). There's a bug for Firefox for Android to do it (bug 1098544).

I'd like to see an option for Firefox for Desktop to be able to use the theme-color metatag to colour the tabs/navigation, as a user option. It could be similar to lightweight themes and I've attached an image to show how Vivaldi looks, how Firefox on Windows 10 and Windows 7 looks, and how Firefox could look (mock-up) if it took a colour on 10/7.

This also seems like something that would get casual users talking about Firefox a bit.

Comment 2

[takatomatsuki]

Attachment: Example CSS for UI colouring in Windows Aero theme

I've attached some CSS as an example of colouring in the Windows Aero theme (can be applied with Stylish), just as a proof of concept matching https://airhorner.com/ - change the variable to match the site you're viewing.

It would benefit from the navigation buttons being adjusted to white on a dark background like with "lightweight themes" (as in the mock up images) but I've not included that.

Comment 3

[takatomatsuki]

Found a related bug, Bug 1196266, about Windows 10's coloured titlebar feature. Optionally having the titlebar colour based on the site's colour (rather than Windows 10's interface colour) would be closely linked with this. 
Vivaldi Beta 3 now supports applying the site colour to that part of the interface (instead of the tabs), otherwise the bar is either "light" or "dark". Could do similar for Firefox.

Comment 4

[Devin Hussey]

Attachment: theme-color mockup.png

I used Stylish for this; basically, I set the tab background to rectangular, and set a box shadow gradient and border like in FFDE. 

Basically what I did in CSS for each tab:

.tabbrowser-tab .tab-background {
  box-shadow:  inset 0px 0px 0px #C13832, inset 0px 30px 30px -30px #C13832;
}
.tabbrowser-tab[visuallyselected]) .tab-background {
  opacity: 1;
  background: white;
  box-shadow: inset 0px 2px 0px #C13832, inset 0px 30px 30px -30px #C13832;
}
.tab-background {
  transition: box-shadow 0.2s ease, opacity 0.2s ease !important;
  opacity: 0.5;
  border-bottom: 1px solid transparent !important;
}
.tabbrowser-tab:not([visuallyselected]):hover .tab-background {
  opacity: 1;
  background: rgba(255, 255, 255, 0.5) !important;
}
.tab-background-start, .tab-background-end  {
  display: none;
}
.tab-background-middle {
  background: transparent !important;
  margin-left: 0px;
  margin-right: 0px;
  border-right: 0;
  border-left: 0;
}
.tab-background {
  margin-left: 0px;
  margin-right: 0px;
  border-right: 0;
  border-left: 0;
}

Comment 5

[Devin Hussey]

Now that I think of it, it is starting to remind me of IE9. :P

But I think the theme-color is something that should be used for desktop, too, not just limited to mobile.

I know this is a bit old, but I really like the theme-color and it would be nice to have it implemented.

Comment 6

[Tim Nguyen :ntim]

I've made an add-on that does that back in June: https://addons.mozilla.org/fr/firefox/addon/vivaldifox/

Comment 7

[Devin Hussey]

(In reply to Tim Nguyen :ntim (use needinfo?) from comment #6)
> I've made an add-on that does that back in June:
> https://addons.mozilla.org/fr/firefox/addon/vivaldifox/

Cool! The only issue I see is that when navigating back, the color doesn't update. 

But that is what forking on GitHub is for! :)

Comment 8

[takatomatsuki]

Since this was filed Vivaldi now provides options to choose between toolbar/tabs, or the top of the browser (which Firefox currently styles with the OS theme in Windows 10) or disable completely, plus options for reducing intensity when out of focus or applying a texture.
Firefox has also changed design a lot since then and the examples given aren't relevant now. OS-level dark mode has also become popular and wouldn't work so well with this. In addition to what Vivaldi provides there are now new places in Firefox where this could be applied such as the blue bar at the top of active tabs.

I would suggest this bug be closed and someone create a new one with a more detailed and updated proposal. Tim Nguyen's Vivaldifox may be a good starting point of reference.

Comment 9

[Oliver Medhurst [:canadahonk]]

This is (recently?) specified in the HTML spec for meta elements: https://html.spec.whatwg.org/multipage/semantics.html#meta-theme-color