Scrollbars ala #119

[delaneyj]

:root {
  /* --scrollbarTrack: hsla(var(--s));
  --scrollbarThumb: hsla(var(--pf));
  --scrollbarThumbHover: hsla(var(--p)); */

  --scrollbarTrack: #111;
  --scrollbarThumb: #333;
  --scrollbarThumbHover: #444;
}

/* Scrollbar colors*/
/* width */
::-webkit-scrollbar {
  width: 8px;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--scrollbarTrack);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--scrollbarThumb);
  border-radius: 3px
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbarThumbHover);
}

So I tried this and it seemed to work... but only for the default theme when I use the commented out variables. If you change the theme it does not work. Using Vue3 so tried adding as a scoped & non-scoped style at the App.vue and still retains the default theme's colors. Per #119 @saadeghi was considering adding custom scrollbars. Any idea what I'm doing wrong?

[saadeghi]

Can you try using hsl instead of hsla? Because hsla needs the alpha value as well (but alpha value doesn't exist in the variables)

[delaneyj]

Sure, so still getting color, but not updating when you change themes...

[saadeghi]

It should work when you change the theme.
Can you share an example repo so I can see what's wrong?

[saadeghi]

I'm closing this because I can't reproduce the issue.
feel free to re-open with a sample repo.