[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.

[ghost]

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;

[ghost]

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)

[ghost]

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

[Trident6355]

Does anyone actually bother with this?
Guess I have to switch to Chrome since this issue essentially makes this theme unusable

[DoNotResuscitate]

@muckSponge do you have any insight into what changed with the latest Firefox version to break this?

[fmeyertoens]

The CSS selector used to detect a dark theme (:-moz-lwtheme-brighttext) seems not to work anymore:

MaterialFox/chrome/global/variables.css

Lines 159 to 164 in 8b1a7b1

	:root:-moz-any(:-moz-lwtheme-brighttext, [privatebrowsingmode=temporary])
	{
	--toolbar-field-background-color: #202124 !important;
	--toolbar-field-hover-background-color: #292a2d !important;
	--toolbar-field-focus-background-color: #202124 !important;
	}

Replacing it with [lwtheme-brighttext] should restore the old behavior.

[Trident6355]

You Sir are a legend. Thank you very much! Fixed it for me.

[quarkquartet]

You are GOAT. Works for me.

[ghost]

The CSS selector used to detect a dark theme (:-moz-lwtheme-brighttext) seems not to work anymore:

MaterialFox/chrome/global/variables.css

Lines 159 to 164 in 8b1a7b1

	:root:-moz-any(:-moz-lwtheme-brighttext, [privatebrowsingmode=temporary])
	{
	--toolbar-field-background-color: #202124 !important;
	--toolbar-field-hover-background-color: #292a2d !important;
	--toolbar-field-focus-background-color: #202124 !important;
	}

Replacing it with [lwtheme-brighttext] should restore the old behavior.

Only problem now is that private browsing is off, lol
I commend anybody who knows how to code XD

[fmeyertoens]

Just to be sure, you only changed line 159 to: :root:-moz-any([lwtheme-brighttext], [privatebrowsingmode=temporary])?

[ghost]

Just to be sure, you only changed line 159 to: :root:-moz-any([lwtheme-brighttext], [privatebrowsingmode=temporary])?

Someone has a good eye, I accidentally slashed the [privatebrowsingmode=temporary]), so apologies for the mixup, this is what it looks like now.

[quarkquartet]

Just to be sure, you only changed line 159 to: :root:-moz-any([lwtheme-brighttext], [privatebrowsingmode=temporary])?

Someone has a good eye, I accidentally slashed the [privatebrowsingmode=temporary]), so apologies for the mixup, this is what it looks like now.

I think the current correct code should be:

:root:-moz-any([lwtheme-brighttext], [privatebrowsingmode=temporary])
{
	--toolbar-field-background-color: #202124 !important;
	--toolbar-field-hover-background-color: #292a2d !important;
	--toolbar-field-focus-background-color: #202124 !important;
}

It works perfect for me.

[missuo]

Just to be sure, you only changed line 159 to: :root:-moz-any([lwtheme-brighttext], [privatebrowsingmode=temporary])?

Someone has a good eye, I accidentally slashed the [privatebrowsingmode=temporary]), so apologies for the mixup, this is what it looks like now.

I think the current correct code should be:

:root:-moz-any([lwtheme-brighttext], [privatebrowsingmode=temporary])
{
	--toolbar-field-background-color: #202124 !important;
	--toolbar-field-hover-background-color: #292a2d !important;
	--toolbar-field-focus-background-color: #202124 !important;
}

It works perfect for me.

This is almost perfect, but I think the URL could be a little darker in black in the Light theme.

[paralin]

Thanks for the solutions: just to summarize to anyone reading this thread:

1. Edit chrome/global/variables.css
2. Go to line 159
3. Replace it with :root:-moz-any([lwtheme-brighttext], [privatebrowsingmode=temporary])