White on black - Thunderbird

From MozillaZine Knowledge Base

This page contains an example of how to use your userContent.css file to display messages in Thunderbird in white text on a black background. You might want to do this if you have a visual impairment or a preference for this kind of color scheme.

You can adapt this example for other colors. For a one-page tutorial on colors in style rules, see: CSS: Getting Started: Color

Note:  The techniques on this page do not affect Thunderbird's user interface colors. Thunderbird's user interface colors are derived from your system colors. You can also change them by using a theme.


Working with userContent.css

Use your operating system to go to your profile directory. Go to the chrome directory there. Use a text editor to edit the file userContent.css, creating the file if it does not already exist.

When you save the file, ensure that your editor saves it as plain text, not in some fancy format.

To see the effect of your changes, restart Thunderbird after saving the file. Check the effect in both plain text and HTML messages. (Some HTML messages might be difficult to read, or might override your settings.)

Style rules for white on black

The basic style rule for white text on a black background is:

body {color: white !important; background-color: black !important;}

Fixing links

The basic rule makes links almost invisible. You can fix them by adding a rule for links, making them a paler blue:

:link {color: #aaf !important;}

Fixing the Welcome page

Ugly black areas appear on the Welcome page. You can fix this by enclosing all the other style rules in:

@-moz-document url-prefix(mailbox:) {
  /* all the other rules go here */

Making folder panes white on black

Add the following to your UserChrome.css:

/*  Folderpane & Messagepane */
treechildren {
	color: #ffffff !important;
	background-color: #000000 !important;

Problems with HTML mail

Many HTML mails are badly broken, and don't work properly with white on black settings. A possible work-around is to use the following UserContent.css:

body {color: white; background-color: black}
:link {color: #aaf}

td {color: black; background-color: white}
:link {color: #0000c8}

@-moz-document url-prefix(mailbox:) {
  /* all the other rules go here */

This changes the default HTML colours to black background and white text, but does not use the !important attribute so that they can be overridden by HTML tags and other CSS in HTML mails. This makes basic HTML mails which are just text appear in white on black, but more complex mails tend to use tables or other layout features with their own custom colours which are preserved.

Other side effects might also need to be fixed. If you know how to fix them, please contribute to this page.