search

everydotorg / donate-button

A free donate and p2p fundraising button so nonprofit websites can accept cryptocurrency, stocks, and cash - credit, debit, bank, PayPal, Venmo, Apple Pay, Google Pay.
https://www.every.org
MIT License
52 stars 8 forks source link

unreadable text when browsing in dark mode #384

Closed andrewrk closed 3 months ago

andrewrk commented 10 months ago

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/

image

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:

image

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:

image

Any suggested workaround would be welcome.

andrewrk commented 10 months ago

Found a workaround:

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

Thank you for reporting @andrewrk! It should be resolved by https://github.com/everydotorg/donate-button/pull/417