Change the scrollbar background

[vitorfloriano]

Problem

I believe it would be nice if the default scrollbar style was something like this:

html {
    scrollbar-color: var(--theme-popup-border) transparent;
}

This results in the scrollbar having the background color of the element it scrolls, making it more distinguishable:

Also, the thumb color could better indicate the state (focused, not focused, hover) if a different variable was used for the thumb color and the themes had styles for that.

As reference, this is how some popular websites are stylized:

ChatGPT:

Claude:

I currently override the style with my custom CSS, but I believe adopting that as default would be nicer for mdBook's users. :)

Proposed Solution

The simplest way to solve this is changing the html rule on css/chrome.css:

html {
-    scrollbar-color: var(--scrollbar) var(--bg);
+    scrollbar-color: var(--scrollbar) transparent;
}

Notes

No response