Upcoming DXPeditions panel coloring on dark themes

[bgritzmacher]

The color coding on the upcoming DXPeditions panel doesn't work or look right when using a theme other than the default one, resulting in text that is hard to read, and the coloring doesn't apply on the odd columns:

Looking through the code, I also tested the color for worked before locations, and it results in a contrast that is even harder to read.

I use darkly, but I found similar results with the other dark themes.

This also presents an accessibility concern: color shouldn't be the only way to convey this information.

[github-actions[bot]]

Uh oh! @bgritzmacher, the image you shared is missing helpful alt text. Check your discussion body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

[magicbug]

this has now been addressed in the dev branch

[bgritzmacher]

I simulated those changes using the developer tools in Chrome and Firefox on my instance and it's still a bit off, at least on the Darkly theme:

The first two rows have #not_worked_before set and the other two have #worked_before.

Going through some more with a the developer tools, I think it may be specific to if the theme has a CSS override for --bs-table-accent-bg variable that is not an RGBA value.

Modifying it to an RGBA value with alpha transparency allows the color to come through, depending on how much transparency is set.

From a brief check, the Darkly and Superhero themes have overrides that change --bs-table-accent-bg

[github-actions]

Uh oh! @bgritzmacher, the image you shared is missing helpful alt text. Check #2988 (reply in thread).

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

[DJLax5]

Hi I've noticed that as well. I also use Darkly and find this color choice unfortunate.

On my screen, the black text on the dark background is barely readable. It is readable very well on the rows which are green/red but not on the other ones. I don't have a color combination that works for everything... Maybe white text on regular rows and black text on the red/green rows?