[Calzifer]

> 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.

[Calzifer]

Also

> it is also not possible to theme the settings areas.

I don't see a reason why this should not work. If by settings area the author means the settings page which in modern Thunderbird is more or less a web page in the content area, it should be stylable with userContent.css instead of userChrome.css.

The hard part is to find the right @-moz-document selectors for each individual content page.

[notpushkin]

Would it be possible to make a PostCSS plugin for this?

[Calzifer]

Don't know what exactly PostCSS is but with a JavaScript addon it would probably be wiser to inject the custom css directly into the shadow dom instance if possible and avoiding such hacks.

Also, by the way, when JavaScript addons get involved: userChrome.css is applied quite unfortunate in the css cascade. It gets low priority that is why they are usually full of !important rules. With JavaScript it is possible to add custom css instead as so called author stylesheet which makes it easier to override default styles. (never tried it myself)

https://old.reddit.com/r/FirefoxCSS/comments/msoqte/how_can_...