henripar/scrollbar

Simple online scrollbar editor

Scrollbar.app

Simple online tool for designing scrollbars.

About

Scrollbar.app is a simple web app which helps developers to design and implement custom scrollbars.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build

scrollbar's Issues

Close color picker when clicked outside of it

Add functionality to close the color picker when user clicks outside of it for better user experience.

Logo in Readme goes to wrong URL

Logo goes to https://www.gradientos.app/ and not https://www.scrollbar.app

Doesn't work in Chrome on Mac

• Chrome Version 110.0.5481.177 (Official Build) (arm64)
• 

I thought it might be my scrollbar settings in system preferences

but checking in Firefox correctly colored the scrollbars.

you need save theme function in localstorage to better UX

A copy of scrollbar.app

I made a copy of scrollbar.app for learning, with more setting, more smooth UX.
https://sinqi.tools/scrollbar

Standard Properties in Copy and Paste Code Too?

I know it wouldn't yield one-to-one output, but as you mention...

For other browsers, you can use the scrollbar selectors provided by the W3C, such as scrollbar-width, scrollbar-color, scrollbar-track-color, scrollbar-thumb-color, and scrollbar-face-color.

Since people are picking colors, and the output style is pretty basic, seems to me you might as well chuck the couple relevant standardized properties in the copy and paste code section too.

Bonus: put the colors into --scrollbar-color custom properties to keep it DRY.

console.log keeps on logging all the stuff about color details which isn't required

pls make light version

please make white background version these days one can switch between light/dark background.

you should improve your app to do that with bg as well

This is a wonderful app!

Just wanted to let you know this web app is very useful & well designed. I use it all the time!
Thanks for making it and have a nice day!

Feel free to close this after reading.

Why firefox is not supported?

Do you think in future to include firefox as well?

Scroll Bar Breaks in Chrome 121+

Now that Chrome 121 has dropped to stable, that’s changed. The presence of one of the new properties like scrollbar-color overrides the usage of the pseudo elements. So if you were styling scroll bar, all the sudden it’s likely that your scrollbars looked a bit different, because the styling possibilities are much more limited with the standardized properties.

reference

Typo in "Thumb Border Color Color" label