Thunderbird is the leading free and open-source email, calendaring, newsfeed, and chat client with more than 20 million active monthly users across Windows, macOS, and Linux. One of Thunderbird's core principles is the use and promotion of open and decentralized standards.
This is an unofficial forum for Mozilla Thunderbird and feel free to join and discuss
I've managed to customize Thunderbird to better fit my KDE theme using the browser toolbox as guide. However, the toolbox doesn't work for the new message window. I can't find out how to change the default background color there. I would appreciate If anyone could point me in the right direction. The screenshot shows the part I'm trying to modify.
After some trial and error, I found that adding the following to userContent.css seems to work:
@-moz-document url(about:blank?compose) {
body {
background-color: red;
}
}
Thunderbird's source code also has some function that reads preferences editor.use_custom_colors and editor.background_color and sets the default color based on those, but it seems that the function is never called. Code rot I guess.
Thank you so much, this worked. Two points though:
You can change the colors there, and it does work as well.
Thanks for the correction. I must've overlooked something when looking at how the preferences are loaded. :)
Could you explain to me how you went about approaching the issue?
At first, I looked into Thunderbird's source code and tried to simply identify the element that I could use in userChrome.css. I found that the element is called #messageEditor in messengercompose.xhtml. However, this doesn't work because the editor textboxes are apparently iframe-like things that load another website inside them (probably to prevent copypaste injection attacks or something). Even if I added * {background-color: red} in userChrome.css, it couldn't match the textbox.
I figured out the userContent.css way when I opened the debugger in Thunderbird's developer tools and set a breakpoint in the script that manages the textbox. For example, here's how to find it for the new calendar event editor:
So the calendar editor lives inside about:blank. However, about:blank is used in lots of places, so it would be good to add some extra conditions instead of changing the background of all about:blank pages used throughout Thunderbird. Luckily, the above picture shows that there's a link element that can be used as an extra condition like this:
@-moz-document url(about:blank) {
html:has(link[href="chrome://messenger/skin/shared/editorContent.css"]) body {
background-color: red;
}
}
The tricky part is finding the right code to put a breakpoint into. It helps if you have a local copy of the comm-central source code files (as instructed in Thunderbird docs), since it includes XHTML files for digging around. The new calendar event window is in the somewhat logical path calendar/base/content/item-editing/calendar-item-iframe.xhtml, and the related scripts are right next to it in calendar-item-iframe.js.
Thank you so much for taking the time to teach me how to fish. I admit I was not seeing myself crawling through the source to find out how to alter those settings.
Here is another picture showing Dolphin with the "correct" background color and the new event window, which also has the same color I'm trying to change in the new message window
