Tags

If you are designing a website in dark mode the scrollbars can be finicky to match the theme. Here is a pretty sane default that looks nice without being obnoxiously contrast to the rest of the site.

    <style>
        ::-webkit-scrollbar {
            height: 1rem;
            width: 1rem;
        }

    ::-webkit-scrollbar-track {
        background-color: rgb(24 24 27);
    }

    body::-webkit-scrollbar-track {
        background-color: rgb(39 39 42);
    }

    ::-webkit-scrollbar-thumb {
        background-color: rgb(82 82 91);
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: rgb(113 113 122);
    }

    body::-webkit-scrollbar-thumb {
        background-color: rgb(82 82 91);
    }

    body::-webkit-scrollbar-thumb:hover {
        background-color: rgb(113 113 122);
    }

    ::-webkit-scrollbar-corner {
        background-color: rgb(39 39 42);
    }
&lt;/style&gt;

Want a rounded scrollbar thumb? add these styles.

::-webkit-scrollbar-thumb {
    border-radius: 0.25rem;
    border-radius: 9999px;
}

body::-webkit-scrollbar-thumb {
border-radius: 0.25rem;
border-radius: 9999px;
}

This makes a very nice looking default darkmode scrollbar.

Recent Posts

Recent Thoughts

Recent Stars