Collecting my attempts to improve at tech, art, and life

Getting Usable Browser Scrollbars

Tags: process

Pencil-thin scrollbars. I hate ’em. I can’t escape them either.

But I can put some CSS on my site and my Chromium-based browser will at least give me sidebars my old eyes can see on my own site.

Started directly from looking at the style rules on but there’s some relevant links below.

body {
    &::-webkit-scrollbar {
        width: var(--scrollbar-width);
        height: var(--scrollbar-height);

    &::-webkit-scrollbar-corner {
        background-color: var(--scrollbar-background-color);

    &::-webkit-scrollbar-thumb {
        background: var(--scrollbar-face-color);
        border-radius: var(--scrollbar-border-radius);

        &:hover {
            background: var(--scrollbar-face-color-hover);

    &::-webkit-scrollbar-track:hover {
        background-color: var(--scrollbar-track-color);

The color variables are currently based on MVP.css

:root {
    --scrollbar-face-color: var(--color-text-secondary);
    --scrollbar-track-color: var(--color-shadow);
    --scrollbar-border-radius: 5px;
    --scrollbar-face-color-hover: var(--color-secondary-accent);
    --scrollbar-width: calc(20px + .25em);
    --scrollbar-height: calc(20px + .25em);
    --scrollbar-background-color: transparent;


Doesn’t work on Firefox. Haven’t checked on Safari.


Added to vault 2024-01-26. Updated on 2024-01-26