muckSponge/MaterialFox

[Feature/element] URL bar completely white

inxomnyaa opened this issue · 24 comments

inxomnyaa commented

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
image

System info

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

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

Lord-Lavios commented

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.

  • 👍1
  • ❤️4
missuo commented

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.

  • 👍2
mtzfox commented

@Lord-Lavios thanks, that worked for me.

juanpabloalfonzo commented

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.

  • 👍1
melodicwang commented

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

Deleted user commented

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 commented

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;
  • 🎉1
  • ❤️1
Deleted user commented

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;

Capture d’écran 2022-05-08 à 23 31 46

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

DoNotResuscitate commented

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

quarkquartet commented

Same issue here
image

privacyguy123 commented

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

Deleted user commented

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 commented

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

DoNotResuscitate commented

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

fmeyertoens commented

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.

  • ❤️3
Trident6355 commented

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

quarkquartet commented

You are GOAT. Works for me.

Deleted user commented

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.

Capture d’écran 2022-05-20 à 08 49 57

Capture d’écran 2022-05-20 à 08 50 13

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

fmeyertoens commented

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

Deleted user commented

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.
Capture d’écran 2022-05-22 à 13 53 56

quarkquartet commented

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. Capture d’écran 2022-05-22 à 13 53 56

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.

  • 👍2
missuo commented

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. Capture d’écran 2022-05-22 à 13 53 56

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.

58786c951d55b9343b314

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

paralin commented

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