Note: this is for the Firefox bookmarklet version of Hypothes.is. I’d bet something similar would work for the Chrome extension, but someone in the Chrome ecosystem will have to poke at it.

If I were cooler, I’d be using the official config options to control the look and feel of the Hypothes.is annotation interface. I am instead a grubby little monster with grabby hands, so witness what I have done:

The trouble with the shadow DOM is that everything that’s meant to make it reliable to inject into a page also makes it Very Hard to style adversarially from that outer page. So we will use JavaScript to apply poor dev’s dark mode.

sidebarContainer = document.querySelector("hypothesis-sidebar").shadowRoot.querySelector(".sidebar-container");
sidebarContainer.style = "filter: invert(1) hue-rotate(180deg);"

This is the JS that applies dark mode to the sidebar. Unfortunately, if you do this naively you’re going to get either a flash or a race condition. So I figured out a way to do it, though…

…at some cost of complexity.

Anyway, I don’t know if I’ll even use this, but here’s a (unminified) bookmarklet to open up dark mode hypothes.is:

annotate