Highlighted text styles can make text unreadable in rare cases

[glin]

With the Bootstrap 5 theme, highlighted text has a light blue background color that looks good in most cases, but makes text unreadable in the rare cases where you have lighter text and a dark background. The color seems to adapt to custom background colors set through bslib variables, so dark themed sites still look fine.

But on my default-light themed site, there are a few places that use a dark background with light text, and the highlight color doesn't adapt. Here's an example from my site that uses a dark background with light text:

I've put a workaround in my site now, so this isn't a big issue anymore and maybe too uncommon to account for. But for these edge cases, it would be nice to either set the text color on highlighted text so it's always readable (which may help contrast elsewhere like in code blocks), or just use the browser default highlight colors.

Workarounds

At first I wanted to override the highlight styles back to the browser defaults, but couldn't find a great way to do that. There are these Highlight and HighlightText system colors, but they don't exactly match the defaults in every browser.

::selection{
  background: Highlight;
  color: HighlightText;
}

In the end, I just made the highlighted text color match the body text color in extra.scss:

::selection {
  color: $body-color;
}

[hadley]

Do you think that css is generally safe to apply? I think so, because from my reading of https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity, it looks like CSS specificity is a tuple of (id, class, type) and ::selector is a type. So this should only affect cases where you haven't manually specified a body colour via id or class. And that's backed up by the fact that selecting code on your site doesn't make the syntax highlighting go away.

[hadley]

Another example at https://sebkrantz.github.io/collapse/reference/GRP.html, which uses a dark background for examples.

[glin]

I think it's generally safe to apply. But from my memory of this, I think what I wanted to do most was just remove the custom selection background color that pkgdown adds. I believe that would be safest option, just going back to the system default selection colors, and then users could override that if they wanted to.

For another reason, I had also read on MDN that customizing the selection colors was discouraged for accessibility reasons, since selection colors are supposed to be customizable at the system level: https://developer.mozilla.org/en-US/docs/Web/CSS/::selection#accessibility_concerns

[hadley]

Ooooh, sorry, I missed that pkgdown was overriding the default. It looks like it was implemented in 0a7bd65, which doesn't have a linked PR or issue, which suggests that I just did it because I thought it was cool and it can be safely removed.