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);
}
</style>
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.