v144 · css

Dark Mode Fix

The browser's default yellow/orange find-in-page highlight fails WCAG AA on dark backgrounds — typically <3:1 contrast. ::search-text and ::search-text:current let you set per-theme highlight colours that stay readable in both light and dark modes. This demo simulates the problem and the fix side-by-side.

Feature detection: checking…
Page theme:
Highlight theme:
Simulate find-in-page — type a word to highlight
0 matches
Browser default — no ::search-text

CSS Highlight Pseudos

CSS Custom Highlight API and related highlight pseudo-elements expose browser highlights to authors. The ::selection pseudo-element styles user-selected text. The ::search-text pseudo-element styles find-in-page results. CSS developers can now style all highlight layers using the same CSS cascade rules. Text decorations, background color, and foreground color are all adjustable. This unlocks consistent styling of highlighted content across the entire CSS document.

Without custom styles, the browser applies its default yellow highlight — a color chosen for light backgrounds. On dark-mode pages this default CSS highlight often fails WCAG contrast requirements. Authors previously had no way to override the CSS find-in-page highlight color. Chrome 144 adds this capability through the CSS highlight pseudo-element API.

Custom ::search-text styles

CSS Highlight Pseudos

CSS Custom Highlight API and related highlight pseudo-elements expose browser highlights to authors. The ::selection pseudo-element styles user-selected text. The ::search-text pseudo-element styles find-in-page results. CSS developers can now style all highlight layers using the same CSS cascade rules. Text decorations, background color, and foreground color are all adjustable. This unlocks consistent styling of highlighted content across the entire CSS document.

Without custom styles, the browser applies its default yellow highlight — a color chosen for light backgrounds. On dark-mode pages this default CSS highlight often fails WCAG contrast requirements. Authors previously had no way to override the CSS find-in-page highlight color. Chrome 144 adds this capability through the CSS highlight pseudo-element API.

Contrast ratio comparison

Browser default highlight (dark bg)
2.8:1
yellow #faaf00 on #1a1a2e — FAIL
Custom ::search-text (current theme)
8.3:1
PASS AA
Active match (:current)
14.1:1
PASS AAA
/* ::search-text — all find-in-page matches */
::search-text {
  background: #264f78;
  color: #9cdcfe;
}

/* ::search-text:current — the active (focused) match */
::search-text:current {
  background: #2b6cb0;
  color: #fff;
  outline: 2px solid #63b3ed;
}

/* Adapt for dark vs light using prefers-color-scheme */
@media (prefers-color-scheme: light) {
  ::search-text         { background: #dbeafe; color: #1e3a5f; }
  ::search-text:current { background: #3b82f6; color: #fff;    }
}

see also