Skip to content

Chrome/Edge default color-scheme scrollbars #40414

@coliff

Description

@coliff

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    Status

    No status

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions