How to use the dark mode for the new homepage scroll bar?

[ouweiya]

I see that the scroll bar is displayed well in dark mode.
To achieve this effect, is the pseudo element selector used?

::-webkit-scrollbar,::-webkit-scrollbar-thumb

[enjidev]

Hai 👋 you can try this one:

.dark {
  color-scheme: dark;
}

[ouweiya]

Simple mode
dark:[color-scheme:dark]

[enjidev]

ah, that's better!

[rutikwankhade]

can you please give an example of how I can use it with scrollbars?

[ouweiya]

Add dark:[color-scheme:dark] to any element class name that produces scrolling

[lukewarlow]

I would recommend doing [color-scheme:light_dark] instead. That tells the browser you support both light and dark and will switch when the setting changes. Will (I think) avoid issues in Safari with dynamic color-scheme properties not updating scrollbars properly (fwiw I have fixed this so next Safari release should work correctly)

[Drammy]

I find thatdark:[color-scheme:dark] breaks when using darkMode: 'media' and I toggle dark mode back and forth on the OS.

Anyone else find this? If not, can you please help..?

edit: I've only tested this on safari on Mac so far.

[lukewarlow]

I'll take a look and see if I can make a minimal reproduction in safari to report it there as a bug.

[lukewarlow]

Just a heads up here's the safari bug: https://bugs.webkit.org/show_bug.cgi?id=244494

I've submitted a PR to the WebKit repository that should fix this.

[Drammy]

That's great, thanks for the update!

[lukewarlow]

That bug fix has been merged so 🤞 the next Safari release (or potentially the one after that) will include the bug fix.

[thexmep]

In reaction I have solved it like this. in css
.dark::-webkit-scrollbar {
background-color: #333;
}

.dark::-webkit-scrollbar-thumb {
background-color: #555;
}