Join the AMA (Ask Me Anything) with the Firefox leadership team to celebrate Firefox 20th anniversary and discuss Firefox’s future on Mozilla Connect. Mark your calendar on Thursday, November 14, 18:00 - 20:00 UTC!

This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

All TB text is shown as gray against black background

more options

All TB text is shown as gray against black background, so I can barely read it. Tiny sample screenshot below. I selected dark mode because the light mode was hurting my eyes, but this is almost as bad. Can someone please give me instructions for changing the text from gray to white and making it boldface? This applies to all TB panes. I know how to edit prefs.js if that will do it. Thank you!

Also, there are many incorrect instructions for navigating Thunderbird posted here. Can the old ones please be deleted?

All TB text is shown as gray against black background, so I can barely read it. Tiny sample screenshot below. I selected dark mode because the light mode was hurting my eyes, but this is almost as bad. Can someone please give me instructions for changing the text from gray to white and making it boldface? This applies to all TB panes. I know how to edit prefs.js if that will do it. Thank you! Also, there are many incorrect instructions for navigating Thunderbird posted here. Can the old ones please be deleted?
Attached screenshots

Chosen solution

This code will change the background color of the Threads and Folder Panes to grey and the text to white, and make the folder names bold:

#folderTree,
#threadTree
{
  background-color: grey !important;
  color: white !important;
  font-weight: bold !important;
  font-size: 12pt !important;
}

Help/Troubleshooting, Profile Folder, Open Folder, close TB, create a new folder named chrome, create a new document in chrome with a text editor, name it userChrome.css, Save as type: All files *.*, copy in the above code, change the numbers and colors as desired. Double-click toolkit.legacyUserProfileCustomizations.stylesheets to true in Options/General/Config. editor, restart TB.

Read this answer in context 👍 0

All Replies (6)

more options

Chosen Solution

This code will change the background color of the Threads and Folder Panes to grey and the text to white, and make the folder names bold:

#folderTree,
#threadTree
{
  background-color: grey !important;
  color: white !important;
  font-weight: bold !important;
  font-size: 12pt !important;
}

Help/Troubleshooting, Profile Folder, Open Folder, close TB, create a new folder named chrome, create a new document in chrome with a text editor, name it userChrome.css, Save as type: All files *.*, copy in the above code, change the numbers and colors as desired. Double-click toolkit.legacyUserProfileCustomizations.stylesheets to true in Options/General/Config. editor, restart TB.

more options

Thank you! Changing the background color to black produced a great result, except that the list of email summaries is not bold-faced. I tried adding "#messagesBox" to the selector list but that didn't work.

more options

You could make the Threads Pane bold, but since unread messages are bold by default, you would probably want to change the color to distinguish from read messages.

more options

I can't discover what the Threads Pane selector should be. I'm already using #threadTree, and there are several other possibilities. Perhaps you could take a look and tell me the right selector? I really don't understand the layout design fully. I consider myself lucky that Ctrl+Shift+i worked in TB, when it could have been hidden.

It is so interesting that TB is, at least in part, a browser-based app that is somehow made to appear completely independent to the user. Someday I would love to create a text editor that works this way. I already have a partial design that uses HTML5 graphics to show and locate characters using the mouse. The project looks doable, if I can somehow hide the underlying browser. And I'd have to choose between Firefox and Chrome, which is difficult because the choice depends on which features I might need. Maybe I'll use Neutron or Neutralino.

In general, I'd love to program in JavaScript, but every time I use JavaScript I worry that it is so incredibly insecure as compared to good old PHP. Any reasonably performing encryption scheme I put into JS code to make it work only in conjunction with a local or remote server, for example, could be broken easily just by editing the code. Remote code that is run locally in the browser is such a strange design.

more options

What exactly to you still need to adjust? Google 'thunderbird userchrome threads pane font' and you should find the answer.

more options

One answer was "Unfortunately, I was unable to find the CSS class for the message list." Another was "#threadTree>treechildren", but this does not work.