graphql.github.io icon indicating copy to clipboard operation
graphql.github.io copied to clipboard

Selecting text in dark theme is hiding the texts with links

Open bhaskar253 opened this issue 11 months ago • 3 comments

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 avatar Dec 31 '24 11:12 bhaskar253

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 avatar Jan 01 '25 03:01 bhaskar253

graphql.github.io/src/globals.css

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

is this correct place to apply fix?

bhaskar253 avatar Jan 01 '25 04:01 bhaskar253

cc @dimaMachina ^

saihaj avatar Jan 02 '25 20:01 saihaj