Change scrollbar color for TOC, nav, etc.?

[MaximilianKohler]

For dark theme, I don't like that the scrollbar gets brighter when you don't hover over it. For me, it's too bright in dark mode. I was trying to set it to a single color as I don't need it to change.

After failing at that, I did a search and found this code: #6782 (reply in thread) from @kamilkrzyskow

/* First unset all rules that break Chrome styling */
.md-typeset pre > code,
.md-search__scrollwrap,
.md-sidebar__scrollwrap {
    scrollbar-color: unset;
    scrollbar-width: unset;
}
.md-typeset pre > code:hover,
.md-search__scrollwrap:hover,
.md-sidebar__scrollwrap:focus-within,
.md-sidebar__scrollwrap:hover {
    scrollbar-color: unset;
}
.md-tooltip2__inner {
    scrollbar-width: unset;
}

/* Wrap new scrollbar properties in @supports rule for browsers without `::-webkit-scrollbar-*` support */
/* This way chrome won't override `::-webkit-scrollbar-*` selectors */
/* https://developer.chrome.com/docs/css-ui/scrollbar-styling */
@supports not selector(::-webkit-scrollbar) {
    .md-typeset pre > code,
    .md-search__scrollwrap,
    .md-sidebar__scrollwrap {
        scrollbar-color: var(--md-default-fg-color--lighter) #0000;
        scrollbar-width: thin;
    }
    .md-typeset pre > code:hover,
    .md-search__scrollwrap:hover,
    .md-sidebar__scrollwrap:focus-within,
    .md-sidebar__scrollwrap:hover {
        scrollbar-color: var(--md-accent-fg-color) #0000;
    }
    .md-tooltip2__inner {
        scrollbar-width: thin;
    }
}

/* Restore hover color for Chrome */
@supports selector(::-webkit-scrollbar) {
    .md-typeset pre > code:hover::-webkit-scrollbar-thumb,
    .md-search__scrollwrap:hover::-webkit-scrollbar-thumb,
    .md-sidebar__scrollwrap:focus-within::-webkit-scrollbar-thumb,
    .md-sidebar__scrollwrap:hover::-webkit-scrollbar-thumb {
        background-color: var(--md-accent-fg-color);
    }
}

So I changed mine to:

[data-md-color-scheme="slate"] {

/* First unset all rules that break Chrome styling */
.md-typeset pre > code,
.md-search__scrollwrap,
.md-sidebar__scrollwrap {
    scrollbar-color: unset;
    scrollbar-width: unset;
}
.md-typeset pre > code:hover,
.md-search__scrollwrap:hover,
.md-sidebar__scrollwrap:focus-within,
.md-sidebar__scrollwrap:hover {
    scrollbar-color: unset;
}
.md-tooltip2__inner {
    scrollbar-width: unset;
}

/* Wrap new scrollbar properties in @supports rule for browsers without `::-webkit-scrollbar-*` support */
/* This way chrome won't override `::-webkit-scrollbar-*` selectors */
/* https://developer.chrome.com/docs/css-ui/scrollbar-styling */
@supports not selector(::-webkit-scrollbar) {
    .md-typeset pre > code,
    .md-search__scrollwrap,
    .md-sidebar__scrollwrap {
        scrollbar-color: #0048c7;
        scrollbar-width: thin;
    }
    .md-typeset pre > code:hover,
    .md-search__scrollwrap:hover,
    .md-sidebar__scrollwrap:focus-within,
    .md-sidebar__scrollwrap:hover {
        scrollbar-color: #0048c7;
    }
    .md-tooltip2__inner {
        scrollbar-width: thin;
    }
}

/* Restore hover color for Chrome */
@supports selector(::-webkit-scrollbar) {
    .md-typeset pre > code:hover::-webkit-scrollbar-thumb,
    .md-search__scrollwrap:hover::-webkit-scrollbar-thumb,
    .md-sidebar__scrollwrap:focus-within::-webkit-scrollbar-thumb,
    .md-sidebar__scrollwrap:hover::-webkit-scrollbar-thumb {
        background-color: #fff;
    }
}

}

But now it has no color at all, and it still changes on hover.

[kamilkrzyskow]

Hello @MaximilianKohler,
you need to set two colors for the thumb and track:
https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color#formal_syntax

Keep in mind that my answer is a makeshift solution until the theme changes, also mentioned in that thread you linked.

[MaximilianKohler]

Ah, thanks!

For anyone seeing this, I found this to be the best:

.md-typeset pre > code,
.md-search__scrollwrap,
.md-sidebar__scrollwrap {
    scrollbar-color: var(--md-default-fg-color--lighter) #0000;
    scrollbar-width: thin;
}
.md-typeset pre > code:hover,
.md-search__scrollwrap:hover,
.md-sidebar__scrollwrap:focus-within,
.md-sidebar__scrollwrap:hover {
    scrollbar-color: var(--md-primary-fg-color--dark) #0000;
}
.md-tooltip2__inner {
    scrollbar-width: thin;
}

I removed the Chrome stuff since it made the scrollbars way too thin.