SchwarzIT / onyx

🚀 A design system and Vue.js component library created by Schwarz IT
https://onyx.schwarz
Apache License 2.0
57 stars 6 forks source link

Implement correct logo text color on 3rd party pages #1356

Open larsrickert opened 5 months ago

larsrickert commented 5 months ago

We use an onyx logo in all our README files (e.g. this one) which already adjust in light/dark mode.

However, the README is sometimes also integrated in other pages like the Nuxt module or npmjs which might have their own dark mode applied so the text color does not update in dark mode.

Maybe we can find a way for the SVG text color to adjust based on the application font color.

Image

JoCa96 commented 3 months ago

@larsrickert Is the issue still reproducible? Looks fine on my system with dark mode.

larsrickert commented 3 months ago

@larsrickert Is the issue still reproducible? Looks fine on my system with dark mode.

The issue only occurs when the README is embedded by some 3rd party, like in the Nuxt module docs and you set your system preference to light + manually setting the Nuxt docs to dark

Our README logo adjusts its font color based on the users system settings. But this does not work if the application light/dark theme differs from this