graphql / graphql/graphql.github.io

Dark mode code block ("CodeMirror") sections display a mysterious white square

Offen
#1,797 3 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Vorherrschende Sprache
TypeScript
Sterne
889
Forks
1.5k
Ø Merge
4 T. 12 Std.
Gemergte PRs (30 T.)
21

Beschreibung

### Description

When looking at the interactive code block (maybe called "CodeMirror") sections in dark mode, there is a white square that doesn't seem to do anything. I could see this on Chrome, Firefox, and Safari.

### Steps to Reproduce

1. Go to a page with an interactive code block (e.g., https://graphql.org/learn/queries/)
2. You may see something like this:

Screenshot 2024-10-19 at 19 44 36

### Expected Result

I would expect not to see the white square.

### Actual Result

...I saw the white square.

### Additional Context

There's a small chunk of CSS that sets this white square to be white:
```css
.CodeMirror-scrollbar-filler,
.CodeMirror-gutter-filler {
background-color: white; /* The little square between H and V scrollbars */
}
```
On light mode, this makes the square invisible (because the background is also white). However, this CSS doesn't seem to account for dark mode.

My proposed fix is a little lazy. I'll just make the square invisible on dark mode:
```css
.CodeMirror-scrollbar-filler:is(html[class~=dark] *) ,
.CodeMirror-gutter-filler:is(html[class~=dark] *) {
background-color: transparent; /* The little square between H and V scrollbars */
}
```

I think that a larger fix might be ideal in the future, because the scrollbars are invisible anyway, so this square doesn't seem to have any use (see: #1617). But maybe my proposed fix is OK in the meantime.

Beitragsleitfaden

Beitragsleitfaden öffnen

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.