search

gravity-ui / uikit

https://gravity-ui.com
MIT License
555 stars 87 forks source link

fix(theme): add option for controlling :root color-scheme #1468

Closed resure closed 4 months ago

resure commented 5 months ago

Curently UIKit provides custom scrollbars by default that can be disabled using nativeScrollbar option on the ThemeProvider.

However, on Chrome-based browsers on Windows, native scrollbars appear white even when dark mode on the body is enabled (and setting color-scheme: dark on the body tag does not help).

Example

Screenshot 2024-03-30 195922

To get proper dark scrollbars we need to set color-scheme: dark on the :root element (html tag). GitHub itself, for example, is doing exactly that.

This PR adds color-scheme styling to :root (but this new styles only apply when uikit theme is not scoped).

Examples with color-scheme on :root

Screenshot 2024-03-30 214755 Screenshot 2024-03-30 203519

gravity-ui-bot commented 5 months ago

Preview is ready.

gravity-ui-bot commented 5 months ago

Playwright Test Component is ready.