> Also, note that some areas of ThunderBird are rendered outside of the influence of userChrome.css in a "Shadow DOM" - as such, it is not possible to fully theme all elements of Thunderbird.
With some limitations it is possible to restyle Shadow DOM elements. It is just a lot harder to select the right element if it is inside a shadow dom.
I found a workaround (don't remember where I found it) which I use extensively in my personal userChrome.css.
The basic concept (afair) is that you can write selectors which match inside the shadow dom as long as they do not need to "cross" the shadow dom "boundary".
A good starting point for me is often to select by tag and part attribute, e.g. image[part="icon"] { ... }
Now the trick to style a particular instance of a web component (shadow dom instance) is to use variables and defaults.
With a selector which targets the "root element" of the shadow dom I set variables for any value I want to change and with a selector which is fully inside the shadow dom I add styles using the variable (which is then only defined for that particular instance) or a default which effectively cancels my custom style anywhere else.
As concrete example the dialog to create new calendar events has a drop down box to select the calendar where each entry is prefixed with a dot with calendar color.
The menulist has a shadow dom and the menupopup another. I styled those dots as squares (for fun and because I think the modern web is to round).
So to set the variables on the "outside" I have:
menulist#item-calendar {
--parthack-boxmarker-radius: 0;
--parthack-boxmarker-image-size: 1em;
--parthack-boxmarker-border: inset 0 0 0 1px color-mix(in srgb, black 20%, transparent);
}
and to apply it
menuitem.menuitem-iconic > hbox.menu-iconic-left > image.menu-iconic-icon {
border-radius: var(--parthack-boxmarker-radius) !important;
width: var(--parthack-boxmarker-image-size, revert-layer) !important;
height: var(--parthack-boxmarker-image-size, revert-layer) !important;
box-shadow: var(--parthack-boxmarker-border, none);
}
(the variable prefix "parthack" has no special meaning; it just evolved because I initially used it to hack styles onto shadow dom elements over the part attribute)
Now this will change only the icons only in the menulist with id 'item-calendar' and leave others unchanged. Whether I use revert-layer as default or something else depends on what style the element has by default and try and error.
