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.

  • cgtjsiwy
    link
    fedilink
    arrow-up
    2
    ·
    1 month ago

    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.

    • ISOmorph@feddit.orgOP
      link
      fedilink
      arrow-up
      2
      ·
      1 month ago

      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.