Dark mode issue in the ingredients webcomponent

[teolemon]

What

Dark mode issue in the ingredients webcomponent Reproducible at https://hunger.openfoodfacts.org/ingredient-spellcheck

[arybhatt4533]

Hi @teolemon, I've reproduced the contrast issues in the ingredients webcomponent on the Hunger Games site.
Currently, I'm actively contributing to the OFF Server (Perl backend) with PRs for Memcached implementation and Environmental Score logic. However, I'm keen on improving the overall user experience, so I’d like to bridge the gap by fixing this UI bug.

My plan is to:
Audit the current hardcoded colors in the webcomponent.
Implement a robust CSS custom properties (variables) system that respects prefers-color-scheme: dark.
Ensure the ingredients spellcheck highlights remain accessible across both themes.
Looking forward to making the webcomponent theme-agnostic!