[Feature/element] URL bar completely white

[inxomnyaa]

Sanity checks (must complete)

• I have read and followed the installation instructions in the README
• I have not modified the userChrome.css file
• I have tested the latest release for my Firefox version, or commit on master/beta branch (beta is for Firefox Beta only)

Describe the bug
The url bar and box appear fully white, making text unreadable

To Reproduce
Steps to reproduce the behavior:

1. Use any theme in the latest version, even defaut ones

Screenshots

System info

• OS: [e.g. Windows 10]
• Firefox version: 100.0b2

[missuo]

I had the same problem on macOS 12.3.1 with Firefox 100.0b2.

[Lord-Lavios]

I changed the --toolbar-field-background-color, --toolbar-hover-background-color, and --toolbar-field-focus-background-color value in the variables.css file to something other than a hsl(), and it works. rgb(43, 42, 51) is a close enough color for the Firefox dark theme.

[missuo]

I changed the --toolbar-field-background-color, --toolbar-hover-background-color, and --toolbar-field-focus-background-color value in the variables.css file to something other than a hsl(), and it works. rgb(43, 42, 51) is a close enough color for the Firefox dark theme.

Thanks a lot. I also succeeded.

[mtzfox]

@Lord-Lavios thanks, that worked for me.

[juanpabloalfonzo]

I changed the --toolbar-field-background-color, --toolbar-hover-background-color, and --toolbar-field-focus-background-color value in the variables.css file to something other than a hsl(), and it works. rgb(43, 42, 51) is a close enough color for the Firefox dark theme.

Worked for me as well, thanks! Just a note that for me it was --toolbar-field-hover-background-color instead of --toolbar-hover-background-color in case anyone runs into this in their variables.css file. The other two variables had the same name as yours though.

[melodicwang]

This theme is the best stlye for firefox, and it is one of the reason that i sitll use firefox not chrome.

I changed the --toolbar-field-background-color, --toolbar-hover-background-color, and --toolbar-field-focus-background-color value in the variables.css file to something other than a hsl(), and it works. rgb(43, 42, 51) is a close enough color for the Firefox dark theme.

I use a Mac, so now it works great in dark mode, but when it switches to light mode the bar stays dark, is there any way to make a real fix so that way it switches between the two like it used to

[Grogs]

when it switches to light mode the bar stays dark, is there any way to make a real fix so that way it switches between the two like it used to

I added the following around line 170 in variables.css (under :root:not(:-moz-lwtheme):not([privatebrowsingmode=temporary])):

	--toolbar-field-background-color: rgb(241, 243, 245) !important;
	--toolbar-field-hover-background-color: rgb(232, 235, 236) !important;
	--toolbar-field-focus-background-color: rgb(255, 255, 255) !important;

when it switches to light mode the bar stays dark, is there any way to make a real fix so that way it switches between the two like it used to

I added the following around line 170 in variables.css (under :root:not(:-moz-lwtheme):not([privatebrowsingmode=temporary])):

	--toolbar-field-background-color: rgb(241, 243, 245) !important;
	--toolbar-field-hover-background-color: rgb(232, 235, 236) !important;
	--toolbar-field-focus-background-color: rgb(255, 255, 255) !important;

It almost worked, matches the colour but now weird translucent results

[DoNotResuscitate]

Any plans to fix this in the latest version of this?

[quarkquartet]

Same issue here

[privacyguy123]

id argue the color it's meant to be is rgb(28, 27, 34)

id argue the color it's meant to be is rgb(28, 27, 34)

Still doesn't change the fact that it only works in dark mode