Change highlight colour

[googlechromelabs]

Change highlight colour

[tomayac]

Developers can change the highlight color as outlined in the article:

Styling text fragments

By default, browsers style text fragments the same way they style mark (typically black on yellow, the CSS system colors for mark). The user-agent stylesheet contains CSS that looks like this:

:root[::target-text](https://drafts.csswg.org/css-pseudo/#selectordef-target-text) {
  color: MarkText;
  background: Mark;
}

As you can see, the browser exposes a pseudo selector ::target-text that you can use to customize the applied highlighting. For example, you could design your text fragments to be black text on a red background. As always, be sure to check the color contrast so your override styling does not cause accessibility issues and make sure the highlighting actually visually stands out from the rest of the content.

:root::target-text {
  color: black;
  background-color: red;
}