Text selection/highlight is not visible at all in dark themes (CSS ::selection rule)

[adhirajsinghchauhan]

Select Topic Area

Bug

Body

Text has been selected and dragged upwards to show the bug: not highlighted

Disabling this rule in DevTools fixes it, but of course it doesn't persist across reloads. It's apparently defined in syntax-theme-codemirror.scss (link 404s but this is what DevTools reports):

[data-color-mode=auto][data-dark-theme*=dark] ::selection {
    background-color: var(--color-accent-muted);
}

Notice how the text is selected & highlighted

---

I've tried all dark themes, even colour-blind ones. I've enabled these feature previews, but disabling them doesn't fix it:

Same deal with extensions. I feel this issue is not related to either feature previews or 3rd party extensions.

[mbt-ludovic-c]

I had the same issue but it went away when I turned off experimental features in chrome.

A relaunch of chrome was required to apply the changes and I could not find the exact flag after the relaunch, only a lot of more specific flag. I turned on the "activate web bluetooth despite being on linux" and the issue didn't came back on.

So I guess it's a browser issue and it's fixed by chrome now providing more fine-grained flags?

[adhirajsinghchauhan]

I reset all Chrome (v114.0.5735.199) flags, restarted the browser, but the issue still exists for me. I had already tried with extensions disabled earlier. Curiously, it doesn't happen on Firefox, and DevTools there doesn't show that erroneous CSS rule at all. Could you check it too? You can filter by searching for ::selection.

Anyway, I ended up using this uBlock Origin filter to disable that CSS rule. It persists across reloads and restarts, of course:

github.com#?#[data-color-mode=auto][data-dark-theme*=dark] ::selection:style(background-color: unset!important)

[mbt-ludovic-c]

I used User JavaScript and CSS to set a new CSS rule for selection and I kept it after fixing the bug. I find black on neon orange (#f90) for selection quite nice, at least with the high contrast dark theme.

If you are curious, devtools show syntax-theme-codemirror.scss because github is serving the information mapping the actual minified CSS to the source files but not the source files. The CSS file with the rules causing all the troubles is (currently) global-d31d56021874.css.

For some reason, the devtools show the variable --color-accent-muted as not defined but if I change the value of the variable, the new value is applied so it is definitely defined. Some of the use of var in the source code use the form with a fallback value in case the variable is undefined, maybe github could add that.

My version of chrome is slightly older, 114.0.5735.133 on ubuntu.

[adhirajsinghchauhan]

Not sure what changed since June, but this is no longer an issue. Closing.