Hi dylanjmork, is it just an inert block of gray or does it seem to be related to some other element? Does it make any difference whether the window is "maximized" or "resizable"?

Could you give some examples of the themes that are affected?

If you could share a link to a screenshot of the problem, or attach a screenshot to a reply, that might help in recognizing it.

It is inert yes, it seems related to the aspect ratio or size of the browser. Once you reach a certain resizing of the application It appears, so it only seems to affect either large monitors or higher resolution monitors (Mine is 4k). The theme I was using in the screenshot is called Matte Black V2, but this affects MANY themes, I would say that it affected a majority of themes I tried. Also I did include a picture the first time but I guess it didn't get uploaded, I will upload it again. Thank you for your quick reply.

One other thing. The wider you make the application the larger the gray bar gets.

Thank you for the screenshot and other info.

I tried this: https://addons.mozilla.org/firefox/addon/matte-black-v2/

When I simulate a high-res display, I see the problem. The header image is 3,000 pixels wide, and Firefox right-justifies it in the toolbar area so that any artwork on the right end is always visible. This exposes an unthemed area at the left.

But with this much older theme: https://addons.mozilla.org/firefox/addon/dark-fox-18066/

Whose artwork is only 2,500 pixels wide, I don't see the problem.

The difference seems to be that the newer theme has a shade of gray for its

--lwt-accent-color

while the older one has black, and Firefox is using the accent color for the background behind the artwork. "Accent" for "background" is strange; I'm not sure if it's a temporary error in Firefox or the new way that color is selected. Theme authors can ask Mozilla to change that.

From your perspective as an end-user, you could request updates to the problem themes. That might create other issues.

As a self-help fix, you could consider using custom style rules in a userChrome.css file. That's an optional settings file Firefox reads at startup and applies to the toolbar area. I'll see if I can work something up.

Okay, most people haven't heard about userChrome.css yet. When you have 10 minutes to focus on it, here's how it works:

This assumes you do not already have a userChrome.css file. If you do already have a working userChrome.css file, you just need to add the rule under (A) to your file.

(A) Select and copy the following style rule code

/* Dark theme with image, force a black background */
#main-window[lwtheme-image="true"][lwthemetextcolor="bright"] {
  background-color: #000 !important;
}

(B) Generate and download a userChrome.css file

Open the following page and paste the above rules into the editor, replacing the sample rule:

https://www.userchrome.org/download-userchrome-css.html

Then click "Generate CSS File" and save the userChrome.css file to your computer. (See first attached screenshot)

Use the downloads list on the toolbar to open the downloads folder directly to the new userChrome.css file. (See second attached screenshot)

Minimize that Windows Explorer window for later reference.

(C) Create a new chrome folder in your profile folder

The following article has the detailed steps for that (#1, #2, and I recommend #3)

https://www.userchrome.org/how-create-userchrome-css.html

I have videos for both Windows and Mac in case the text is not clear.

(D) Move the userChrome.css file you generated in Step B into the chrome folder you created in Step C

The next time you exit Firefox and start it up again, it should discover that file and apply the rules. You should end up with black filling that empty space. A difficult-to-view before-and-after screenshot is attached.

Okay, even though "accent color" is a weird name for background color, that is what it says on the developer site, so I think the developers will need to release an update with an accent color that better matches the header image.

accentcolor: The color of the header area background, displayed in the part of the header not covered or visible through the images specified in "headerURL" and "additional_backgrounds".

From: https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme#colors

P.S. I emailed the theme author a link to this thread.

jscher2000 said

P.S. I emailed the theme author a link to this thread.

Author here,

Your issue was (because I fixed it) not a bug but indeed the accentcolor variable jscher2000 talked about. This actually used to represent the colour of the current tab bar (back when I made the theme) but now represents colour of the header not covered by the given image. Just update the theme and your issue should be resolved.

jscher2000 said

Okay, most people haven't heard about userChrome.css yet. When you have 10 minutes to focus on it, here's how it works: This assumes you do not already have a userChrome.css file. If you do already have a working userChrome.css file, you just need to add the rule under (A) to your file. (A) Select and copy the following style rule code

/* Dark theme with image, force a black background */
#main-window[lwtheme-image="true"][lwthemetextcolor="bright"] {
  background-color: #000 !important;
}

(B) Generate and download a userChrome.css file

Open the following page and paste the above rules into the editor, replacing the sample rule:

https://www.userchrome.org/download-userchrome-css.html

Then click "Generate CSS File" and save the userChrome.css file to your computer. (See first attached screenshot)

Use the downloads list on the toolbar to open the downloads folder directly to the new userChrome.css file. (See second attached screenshot)

Minimize that Windows Explorer window for later reference.

(C) Create a new chrome folder in your profile folder

The following article has the detailed steps for that (#1, #2, and I recommend #3)

https://www.userchrome.org/how-create-userchrome-css.html

I have videos for both Windows and Mac in case the text is not clear.

(D) Move the userChrome.css file you generated in Step B into the chrome folder you created in Step C

The next time you exit Firefox and start it up again, it should discover that file and apply the rules. You should end up with black filling that empty space. A difficult-to-view before-and-after screenshot is attached.

elibroftw said

jscher2000 said

P.S. I emailed the theme author a link to this thread.

Author here,

Your issue was (because I fixed it) not a bug but indeed the accentcolor variable jscher2000 talked about. This actually used to represent the colour of the current tab bar (back when I made the theme) but now represents colour of the header not covered by the given image. Just update the theme and your issue should be resolved.

I want to thank both of you for providing me with really great answers and for helping to explain what was actually happening. Thank you for creating the workaround, Jscher. Also, thank you for updating your theme, elibroftw. Hopefully this post will be helpful to others in the future