Here's the big idea: let's use CSS variables to make theming Firefox as easy as using a color picker!
How can we do it?
Firefox uses a set of built-in special shortcut colors, like HighlightText or ButtonText. These are
customized for each major OS (linux, windows, mac).
(If you're curious, you can see a complete list of colors on
MDN here.)
Firefox has also entered into the era of CSS variables, and you can dynamically change the value of a CSS variable: just use JS to toggle the variable's value in a style attribute on the element you want to restyle. That's it!
Putting these two facts together, we can replace every occurrence of the special colors with
a variable that has the same name: CaptionText becomes var(--CaptionText), and so on.
We can script these values by twiddling a style attribute on the topmost element in the XUL DOM.
OK, great. That means we could create an about:theme page, where users can fill in fields for each of the default colors, with a color picker available if you need it.
This sounds pretty rad! Let's build it and see how it goes :-)