demo · v135

Find-in-page that respects your palette

The accessibility argument in the explainer: the default browser yellow is the wrong choice on a dark-mode page — low contrast, blown highlight. With ::search-text as a CSS highlight pseudo, the site can scope the highlight under a @media (prefers-color-scheme: dark) rule and use a palette-correct colour.

::search-text in this browser: ?

light palette

dark palette

/* one stylesheet, two themes */
::search-text {
  background: #b87b00;
  color: #fdfcf8;
}
@media (prefers-color-scheme: dark) {
  ::search-text {
    background: #1a73e8;
    color: #fdfcf8;
    outline: 1px solid #5fa8ff;
  }
  ::search-text:current {
    background: #d11a2a;
  }
}

see also