add dark mode and compound colors

I've finally played around with hookshot dark mode and, while i'm at it, the new compound libraries.

compound-design-tokens seems to be where the colors are stored, at least that's the only place I found them. However, it puts them into css classes such as .cpd-theme-light.cpd-theme-light and I haven't found a way to access them based on media queries because of that. so right now I can only statically add the class e.g. <html lang="en" class="cpd-theme-dark"> in index.html.

~~Best idea I got for now is adding the proper class onload with js based on ?theme=$org.matrix.msc2873.client_theme that then I'd need to add to the widget URL.~~

To do:

[ ] ticky boxes to primary green
[ ] use compound for green but disabled buttons
[x] generic webhook and github icons are black pngs, i guess they would need to become svgs that use --foreground-color. this is kinda blocked on not having SVGs though

My dev env is local and I don't have access to all supported services, so my testing is limited, but here is how it looks for me:

light mode: