Skip to content

Custom scrollbar styles

Default scrollbars are pretty ugly (particularly in dark mode..), and there are now some acceptable ways to make them look nicer without js and scroll listeners. Let's do that!

Example snippet (adapted from https://css-tricks.com/the-current-state-of-styling-scrollbars/#an-updated-version-of-a-fairly-consistently-styled-scrollbar-across-firefox-safari-chrome)

$scrollbar-bg: #222;
$scrollbar-thumb-color: #444;

*::-webkit-scrollbar {
  width: 15px;
}

* {
  scrollbar-width: thin;
  scrollbar-color: $scrollbar-thumb-color $scrollbar-bg;
}

*::-webkit-scrollbar-track {
  background: $scrollbar-bg;
}

*::-webkit-scrollbar-thumb {
  background-color: $scrollbar-thumb-color;
  border-radius: 3px;
  border: 3px solid $scrollbar-bg;
}

How that looks on dark theme:

Screen_Recording_2020-07-23_at_5.37.10_pm

Edited by Simon Knox