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;
}