Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Selecting text in dark theme is hiding the texts with links #1924

Open
bhaskar253 opened this issue Dec 31, 2024 · 3 comments
Open

Selecting text in dark theme is hiding the texts with links #1924

bhaskar253 opened this issue Dec 31, 2024 · 3 comments

Comments

@bhaskar253
Copy link

bhaskar253 commented Dec 31, 2024

Description

Selecting text in dark theme is hiding the texts with links

Steps to Reproduce

Set website theme as dark mode or system (with dark mode enabled)

Expected Result

Texts with links should be readable even after selection

Actual Result

Text with links gets hidden upon selection

Additional Context

ScreenShot

@bhaskar253
Copy link
Author

After investigating in dev tools below style looks as cause

:is(html[class~=dark] *)::selection {
    CONTAIN-INTRINSIC-BLOCK-SIZE: AUTO 100PX;
    --tw-bg-opacity: 1;
    background-color: rgb(225 0 152 / var(--tw-bg-opacity, 1));
}

If I reduce --tw-bg-opacity property value to 0.5 from 1, text becomes readable.

@bhaskar253
Copy link
Author

bhaskar253 commented Jan 1, 2025

graphql.github.io/src/globals.css

::selection {
  @apply bg-primary/50 dark:bg-primary;
}

is this correct place to apply fix?

@saihaj
Copy link
Member

saihaj commented Jan 2, 2025

cc @dimaMachina ^

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants