Any way to change the scrollbar width for the editing / rendered view?

[futuremotion]

I found this post, but the snippet included doesn’t seem to work anymore. I am able to change the scrollbar colors with this:

body {
	scrollbar-color: #A9ACB2BF #E6E7E89C;
}

But if I set scrollbar-width to anything, it doesn’t work. I’ve also tried marking the rule as !important, but that didn’t work either.

Anyone know how to do this? The scrollbars are super tiny for my liking.

[ariehen]

I’ve found that scrollbar css works differently on macOS, Windows, mobile, etc., so this may need adjusting. This is on macOS:

live preview | reading view

.theme-light {
  --thumb-bg-color: lightgrey;
}

.theme-dark {
  --thumb-bg-color: grey;
}

body ::-webkit-scrollbar {
  width: 16px; /* <- adjust width here */
}

body ::-webkit-scrollbar-thumb:active {
  background-color: var(--thumb-bg-color);
  -webkit-border-radius: var(--radius-l);
}

body ::-webkit-scrollbar-thumb:hover {
  background-color: var(--thumb-bg-color);
  -webkit-border-radius: var(--radius-l);
}

If you’d like the background-color the same in the light and dark color schemes, you can replace the top two sections (.theme-light {} and .theme-dark {}) with

body {
  --thumb-bg-color: grey;
}

or write the color in both sections below.

---

Just checked on Windows; for the width in notes, we can get away with this variable only:

.markdown-source-view, .markdown-preview-view {
  --scrollbar-width: 18px;
}

or for all scrollbars, including in the sidebars, etc.

body {
  --scrollbar-width: 18px;
}