unreadable text when browsing in dark mode

[andrewrk]

Hello Every.org team,

Thanks for your wonderful organization and for this handy widget. It's almost perfect for us except for a little CSS bug.

In this screenshot, it is difficult to see but I have typed "1000" into the Donation Amount box. You can see the problem live at https://ziglang.org/zsf/

In normal or light mode, which is the setting most users browse with, this is not a problem. But users who have their system theme set to dark mode will not be able to see the donation amount.

You can simulate this in Firefox with this button:

I've been trying to work around the issue but it's tricky because of the shadow DOM. I didn't know about the shadow DOM until today so I've been trying things like

#donation-input {
  color:black
}

and scratching my head as to why it wasn't taking effect.

This affects the "Private Note" field as well:

Any suggested workaround would be welcome.

[andrewrk]

Found a workaround:

let style = document.createElement('style');
style.innerHTML = '#donation-input { color: black; } #privateNote { color: black }';
document.getElementById("shadow-wrapper").shadowRoot.appendChild(style);