search

twbs / bootstrap

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
https://getbootstrap.com
MIT License
170.37k stars 78.8k forks source link

Chrome/Edge default color-scheme scrollbars #40414

Open coliff opened 4 months ago

coliff commented 4 months ago

Prerequisites

Describe the issue

Edge/Chrome recently changed the way the default color-scheme works for websites root scrollbars. If a user has dark mode enabled and the site doesn't specify a color-scheme in the CSS then dark mode will be used for the root scrollbars.

REF: https://developer.chrome.com/release-notes/125#used_color_scheme_root_scrollbars

To avoid this I think we should add color-scheme: light at the top of the :root, [data-bs-theme=light]

Reduced test cases

You can see this by going to: https://getbootstrap.com/ (if you have OS-set dark mode and switch theme to light). image Note the dark scrollbar. Tested on Chrome 125 and Edge 125 on Windows 11 Pro.

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Microsoft Edge

What version of Bootstrap are you using?

v5.3.3

julien-deramond commented 4 months ago

Thanks @coliff for the heads-up on this topic, we'll look into it precisely to understand what changed :) It might be closed by https://github.com/twbs/bootstrap/pull/39295.