Highlight text issue fix

[nooras]

Closes #1973

Description

Highlight text issue fix for dark-mode

@benjie Please review the pr. Let me know if any changes are required.

[vercel]

@nooras is attempting to deploy a commit to the The GraphQL Foundation Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
graphql-github-io	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 19, 2025 9:05pm

[benjie]

Thanks; this fixes the link being completely invisible 🙌

If you're interested in raising a follow-up PR, the pink-on-pink of the link is still hard to read, it would be nice to have links revert to the plain text (non-link) colour when inside a text selection.

Thanks again!

[nooras]

Thanks; this fixes the link being completely invisible 🙌

If you're interested in raising a follow-up PR, the pink-on-pink of the link is still hard to read, it would be nice to have links revert to the plain text (non-link) colour when inside a text selection.

Thanks again!

Hi @benjie

I am trying to make a change for a link to non-link color when selected.
But its not working for all. Here its changing the Blue box color to that color which is I mentioned in css file.
Is it fine? or is there some other way?

Have added below css for selection:
color: rgba(51,65,85,var(--tw-text-opacity));

I have tried color: inherit as well but its not working. Can you please guide me to proceed?

[benjie]

Hi @nooras; your results in the screenshot look good to me. I'm afraid I can't advise you as I'm not particularly familiar with the method of styling the website.

[nooras]

Hi @nooras; your results in the screenshot look good to me. I'm afraid I can't advise you as I'm not particularly familiar with the method of styling the website.

Hi @benjie

Update:
The changes i have tried its not working for both!! Either its working for Dark mode/ Light mode. The css i have applied for light mode its not clearly visible for dark mode and vice versa.
Default style are coming from nextra framework that I am not able to override!!
If u have any other suggestion let me know.
Thanks

[benjie]

@dimaMachina Maybe you have some ideas regarding styling of selected links here? I'm suggesting that the link colour be made the same as the text colour when selected, not sure if that's possible.