Using "Look and feel > Theme color" triggers .h5p-invert-shades class, obscuring card content.

[patrickgrey]

Hi, I tried to change the "Theme color" in "Look and feel". This resulted in “.h5p-memory-game.h5p-invert-shades .h5p-memory-card .h5p-back:before” being added to the before pseudo element of the .h5p-back div. This covers the card content img with a #000 opacity 0.5 overlay which makes it hard to read the img. I also noticed that the selected theme color is added inline to the .h5p-back div but only on the "color" property. This won't therefore affect the cards (maybe it is for the description, I don't know). There is no way I can see of resetting the theme selection to prevent .h5p-invert-shades being added. So, if I want to fix the issue, I'd have to recreate the game again. Hope that helps. Cheers.

[icc]

Hi!
Currently, the invert-shades class is triggered by the contrast ratio between the theme color and white to ensure readability.
Would you be able to share a screenshot of the issue you're experiencing?

[patrickgrey]

Thanks for the quick response. Sure, here are some screenshots of the output and the setting. Note, the issue existed before I added a new background image to the card. Let me know if you need anything else.

[patrickgrey]

I should add that the content images on the card are text with transparent background. I could use an opaque image but I think the overlay would still go over that?

[patrickgrey]

OK, I'm starting to understand it better now. Sorry, I should have read your reply better. I was wrong, the pseudo element is not covering the img, it just appeared that way as the img is transparent. I can fix this by changing the theme colour to a much darker one or use an opaque image. This is probably an edge case but might be worth mentioning in the instructions? I'm happy to add a pull request for that if you want. I'm guessing https://github.com/h5p/h5p-memory-game/blob/master/semantics.json should be edited?

[icc]

Ah, yes, I'm glad you figured it out.
That is correct, feel free to add a PR with a better description as I think that can be helpful for others.