Skip to content

bug(Angular Material): Scrollbars are light in dark themes #26072

Open
@StefanTieber

Description

@StefanTieber

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Scrollbars are always light in Chromium browsers.
This can be easily fixed by adding CSS color-scheme: dark; to the body.
However, I believe that this should be part of the theme. Hence the bug.

Firefox handles scroll bars a bit differently so it is not relevant for Firefox, at least not for the scrollbars.

Reproduction

Steps to reproduce:

  1. Import an angular material dark theme like purple-green.css in your styles.
  2. Open the website in Chrome.
  3. See the dark website with light scroll bars.

Or simply go to https://material.angular.io/ in Chrome and switch to a dark theme.

Expected Behavior

Scrollbars are light in light theme and dark in dark theme.

Actual Behavior

Scrollbars are always light in Chromium Browsers.

Environment

Tested on

  • Angular: 14.2.5
  • CDK/Material: 14.2.5
  • Browser(s): Google Chrome 107.0.5304.107
  • Operating System (e.g. Windows, macOS, Ubuntu): Windows 10

Metadata

Metadata

Assignees

No one assigned

    Labels

    P4A relatively minor issue that is not relevant to core functionsarea: theming

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions