Thunderbird custom CSS via userContent.css

You can tweak the Thunderbird CSS, just as you can in Firefox: https://munix.dk/override-style-web-site-firefox-usercontentcss.

You need to activate Developer Tools with these steps:

1. Open Preferences > Config Editor, and change these values:

• Set devtools.chrome.enabled to True
• Set devtools.debugger.remote-enabled to True
• Set devtools.debugger.prompt-connection to False
• Set devtools.inspector.showAllAnonymousContent to True

From Mozilla Thunderbird > [SOLVED] Explore the DOM.

2. Download userContent.css (and userChrome.css) template from the link on https://kb.mozillazine.org/UserChrome.css.

Place the chrome folder under PROFILE_FOLDER/chrome/userContent.css (for example ~/.thunderbird/q6ch11j1.default/chrome/userContent.css)

Note that the userContent.css file is for elements such as links, whereas userChrome.css is for the Thunderbird graphical user interface itself, for example the search field.

3. Find the values with the Developer Tool (ctrl+shift+i). Open a message, and press the shortcut, and change the CSS to your liking. For details, see Mozilla Thunderbird > [SOLVED] Explore the DOM again.

To highlight links, and allow tabbing to the next link with better visual feedback add this in userContent.css. Shut down and restart Thunderbird for it to take effect:

@namespace url(http://www.w3.org/1999/xhtml);

:focus-visible {
  outline: gray 3px dotted !important;
}

Result: