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

UNCONFIRMED
Unassigned

Status

()

Firefox
Theme
--
enhancement
UNCONFIRMED
3 years ago
2 years ago

People

(Reporter: takatomatsuki, Unassigned)

Tracking

({uiwanted})

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(3 attachments)

(Reporter)

Description

3 years ago
Created attachment 8705489 [details]
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
(Reporter)

Updated

3 years ago
Component: Untriaged → Theme
OS: Unspecified → Windows
Hardware: Unspecified → All
(Reporter)

Comment 1

3 years ago
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.
(Reporter)

Updated

3 years ago
Summary: Add meta theme-colour support for the UI of desktop Firefox → Add meta theme-color support for the UI of desktop Firefox

Updated

3 years ago
Severity: normal → enhancement
Keywords: uiwanted
Summary: Add meta theme-color support for the UI of desktop Firefox → Use site's "theme-color" meta tag for desktop Firefox UI
(Reporter)

Comment 2

3 years ago
Created attachment 8708740 [details]
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.
(Reporter)

Comment 3

2 years ago
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

2 years ago
Created attachment 8784846 [details]
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

2 years ago
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

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

Comment 7

2 years ago
(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! :)
You need to log in before you can comment on or make changes to this bug.