Add the Ability To Change Toolbar Color on Windows 11

[rods012]

Problem Description

By default PWAsForFirefox doesn't use the system titlebar (which I like), but on Windows the toolbar always defaults to white.

Proposed Solution

It would be interesting if the extension either followed the system accent color settings OR at least followed the system's light or dark theme.

Additional Information

Here is my current settings as an example: I am on Windows 11 and have dark mode active, but the toolbar continues to be white.

[filips123]

By default it will use the color specified by the website in the theme_color option in the manifest or theme-color meta tag. Maybe the PWA you use specified the color to be white.

You can disable this with the "Allow web apps to override a theme (titlebar) color" option the the app browser settings, and then use normal Firefox themes to style the titlebar.

For matching with the system titlebar color, you can try this CSS, but I'm not sure if it works. You can check instructions for enabling UserChrome CSS here. In the future, I will also try to add this as an option.

[filips123]

You can use the following UserChrome CSS to use the accent color on active window:

#navigator-toolbox:not(:-moz-window-inactive),
#scrollbutton-up:not(:hover):not(:active):not(:-moz-window-inactive),
#scrollbutton-down:not(:hover):not(:active):not(:-moz-window-inactive),
.tabbrowser-tab:not(:-moz-window-inactive) {
  background: AccentColor !important;
  color: AccentColorText !important;
  fill: AccentColorText !important;
}

#firefox-view-button[open] > .toolbarbutton-icon,
.tab-background:is([selected], [multiselected]) {
  background-color: color-mix(in srgb, currentColor 18%, transparent) !important;
  background-image: none !important;
}

You will also have to disable "Allow web apps to override a theme (titlebar) color" in the app browser settings.

In the future, I might add this as an option, but I need to test it more to see what it does on other operating systems.