demo · v133
Fluent across light / dark / high contrast
Fluent scrollbars adapt to OS appearance and forced-colors. Four scrollers below each declare different scrollbar-color against light, dark, high-contrast light, and high-contrast dark backgrounds — with a live probe of the platform settings the OS exposes through CSS.
On Windows, set Settings > Accessibility > Contrast themes to switch your OS into High Contrast and watch every
::scrollbar-thumb recolour automatically.light
scroll me…
line 1
line 2
line 3
line 1
line 2
line 3
dark
scroll me…
line 1
line 2
line 3
line 1
line 2
line 3
high contrast — light
scroll me…
line 1
line 2
line 3
line 1
line 2
line 3
high contrast — dark
scroll me…
line 1
line 2
line 3
line 1
line 2
line 3
prefers-color-scheme
—
prefers-contrast—
forced-colors—
scrollbar-width support—
scrollbar-color support—
what Fluent brings
Fluent scrollbars are not just a repaint. They (a) respect the standard CSS scrollbar-color / scrollbar-width properties, (b) listen to the OS forced-colors and contrast settings, and (c) match the Windows 11 fluent shadow / hover / thumb-expand animations — so Chrome on Windows finally looks native instead of like a transplant from Chromium-on-Linux.