q-carousel thumbnails scrollbar does not render correct in dark mode

[drharryhe]

What happened?

Setting carousel dark property as true, but the thumbnails scrollbar is in light mode.
As illustrated bellow:

What did you expect to happen?

The thumbnails's scrollbar should in dark mode. like this:

Reproduction URL

https://codepen.io/pen?&editors=101

How to reproduce?

1. set carousel dark and thumbnails property as true
2. add many pictures as q-carousel-slide
3. when pictures' thumbnails is wider than carousel's width, the thumbnails's scrollbar is not in dark mode

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Components (quasar)

Platforms/Browsers

No response

Quasar info output

Relevant log output

Additional context

No response

[rstoenescu]

Hi,

We shouldn't tamper with the scrollbar, because there is no standard way to customize it. And using a QScrollArea is out of the question for perf reasons.

However, you can customize it yourself as the following works in Chrome (only):

::-webkit-scrollbar
  height: 12px
  width: 14px
  background: transparent
  z-index: 12
  overflow: visible

::-webkit-scrollbar-thumb
  width: 10px
  background-color: #d5dbe4
  border-radius: 10px
  z-index: 12
  border: 4px solid rgba(0, 0, 0, 0)
  background-clip: padding-box
  transition: background-color .2s
  margin: 4px
  min-height: 32px
  min-width: 32px

::-webkit-scrollbar-thumb:hover
  background: #d5dbe4