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

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

@Lord-Lavios thanks, that worked for me.

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.

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

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

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

Same issue here

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

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

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

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

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

You are GOAT. Works for me.

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

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

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.

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.

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.

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])