New Tab UI Text Colors
I recently updated my Firefox to v158 from v156, and now the text colors of some of the UI elements on a new tab (e.g. Firefox wordmark, web shortcuts, Recent Activity header) which were previously white, have been changed to black (or a color close to black).
I use a custom wallpaper for new tabs, which didn't alter these particular colors on v156. Switching the background in the Customize menu shows the white text on some of the default wallpapers and the dark text on others. I have attached example screenshots to show how these elements looked before and after the update. I used the Developer Tools console to do this.
I assume this has to do with the "modernized" Nova UI redesign (which I have disabled) Mozilla is now forcing on its userbase instead of making it optional. Reverting these properties via the Developer Tools console does not make them permanent. I would rather not have to change my current wallpaper if I can help it.
Is there any other way I can make the text white again without changing the background or downgrading? Or if I can make them permanent with the console?
All Replies (3)
Chosen Solution
Things are changing constantly, for light theme it is dark now, and for dark theme it's white. If you don't want to change you theme, you can configure your modifications in the userChrome.css, for instance:
@-moz-document url("about:newtab") {
.logo-and-wordmark .wordmark {
fill: #fbfbfe;
}
}
Aren't you already running some custom tweaks on top? This seems to pick the right contrast for me in factory defaults trying out a few schemes and backgrounds: (also tried own PNG/JPG pictures with wild colors, and even animated GIF and the luminosity seemed to adapt as before 🤷 …)
🎥 https://zensnap.io/video/1d6f4ee1-3f30-4f32-8a2c-89a2847076cf
TyDraniu said
Things are changing constantly, for light theme it is dark now, and for dark theme it's white. If you don't want to change you theme, you can configure your modifications in the userChrome.css, for instance: @-moz-document url("about:newtab") { .logo-and-wordmark .wordmark { fill: #fbfbfe; } }
Thanks for this, truly. I've never created or edited a CSS file, so I did some experimenting with it and successfully changed all the aforementioned text colors back to white, among some other personal tweaks. My problem is solved.
You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.