Live Long and Prosper!

But to the problem at hand:

What is happening in Firefox 96

Firefox 96 now harmonizes more parts of Firefox with your toolbar theme. When the text color on your background tabs is light/white, it triggers Firefox to use a dark background on menus, the sidebar, the Library window, and various built-in pages. Firefox also signals sites that you have a dark theme preference.

(I realize that many users consider their toolbar theme purely decorative and don't want Firefox to use it to drive colors in other parts of the browser. We are hoping that eventually there's a checkbox for this on the Settings page, but that probably is some time away.)

What to do about this now

(1) For people willing to change their toolbar theme

The fastest workaround for now is to change your theme to one that uses dark text. By dark text I mean, for example, the built-in Light theme, or an add-on theme with black or dark text on the tabs. That doesn't need to be blinding, it can have a pastel color. As examples:

• Firefox Logo: https://addons.mozilla.org/firefox/addon/firefox-b/
• Winter snow: https://addons.mozilla.org/firefox/addon/blue-winter-snow/
• Green shoots: https://addons.mozilla.org/firefox/addon/printania/
• Great wave: https://addons.mozilla.org/firefox/addon/japan-style-kanagawa-gr-232767/
• Kitten: https://addons.mozilla.org/firefox/addon/savage-black-kitten/

I have attached a screenshot illustrating the difference between a theme with light text on the tabs and dark text on the tabs.

A theme change will fix the toolbar drop-down menu color.

(2) For people who can't part with their toolbar theme

There is a setting for the built-in pages, and for websites that have light/dark responsive themes. (This is the middle panel of the attached screenshot.) However, this doesn't modify toolbar drop-drop panels.

Currently, the only way to decouple your page (content) theme preference from your toolbar theme is through the back door:

(1) In a new tab, type or paste about:config in the address bar and press Enter/Return. Click the button accepting the risk.

More info on about:config: Configuration Editor for Firefox. The moderators would like us to remind you that changes made through this back door aren't fully supported and aren't guaranteed to continue working in the future.

(2) In the search box in the page, type or paste layout.css.prefers-color-scheme.content-override and pause while the list is filtered

(3) Double-click the preference to display an editing field, and change the value to whatever you prefer from the list below, then press Enter or click the blue check mark button to save the change.

• 0 => Force a Dark background
• 1 => Force a Light background
• 2 => Follow the System theme (default in Firefox 94)
• 3 => Follow the Browser toolbar theme (default in Firefox 95+)

The about:config page should immediately reflect your saved change.

What about other aspects of the UI?

For the sidebar, menus, and toolbar drop-down panels, there is an unofficial, community-supported option, which is to override the built-in styles using your own style rules in a userChrome.css file. I think people are still pondering how to do that efficiently, however, if it's urgent for you, I will suggest how to change the toolbar drop-down menu color in a follow-up reply.

WARNING: Unofficial, community-supported solution. Due to rapid evolution of UI styling, this is not guaranteed to work in future versions.

The rules used for the attached "before and after" screenshot can be found at:

https://www.userchrome.org/firefox-89-styling-proton-ui.html#menucolors

If you already have a userChrome.css file set up, you just need to add the rules from that section to your file.

If it's your first time, make sure you have a good 10 minutes of quiet time to work through it.

(A) Generate and download a userChrome.css file

Paste the rules from the above link into the editor on this page:

https://www.userchrome.org/download-userchrome-css.html

Then click "Generate CSS File" and save the userChrome.css file to your computer. (See second attached screenshot)

Use the downloads list on the toolbar to open the downloads folder directly to the new userChrome.css file. (See third attached screenshot)

Minimize that file browser window for later reference.

(B) Create a new chrome folder in your profile folder

The following article has the detailed steps for that (#1, #2, and I recommend #3)

https://www.userchrome.org/how-create-userchrome-css.html

I have videos for both Windows and Mac in case the text is not clear.

(C) Move the userChrome.css file you generated in Step A into the chrome folder you created in Step B

(D) Set Firefox to look for userChrome.css at startup -- see step #6 in the above article.

The next time you exit Firefox and start it up again, it should discover that file and apply the rules.

Success?

I suggest bookmarking any thread you get userChrome.css code from for future reference (in case the rule stops working).