Nodejs.dev: Styled Scroll Bars

[bnb]

Summary

Currently scroll bars are not pretty, and default to system scroll. It kinda breaks the style of the site in dark mode. Perhaps implementing custom style for the default scroll bars would be a nice thing to do.

Motivation

Better styling overall.

[aroduribe]

This is something I can look into.

[aroduribe]

@bnb Does Figma have a custom scroll bar I can look at? What kind of custom style are you thinking on the design front?

[aroduribe]

@designMoreWeb any word on this question ^^ ?

[designMoreWeb]

@designMoreWeb any word on this question ^^ ?

There is none right now. What I can suggest is that you create/draw out a few of them (whatever style you have in mind) and we can then vote on it or choose one

Hope that helps

[marcustisater]

@aroduribe @designMoreWeb I found a scroll bar for tables in Figma, or maybe that's a default one for mockups? https://www.figma.com/file/lOxAGGg5KXb6nwie7zXkz6/NJ-Design-System?node-id=0%3A1652

[designMoreWeb]

@aroduribe @designMoreWeb I found a scroll bar for tables in Figma, or maybe that's a default one for mockups? https://www.figma.com/file/lOxAGGg5KXb6nwie7zXkz6/NJ-Design-System?node-id=0%3A1652

I believe those are the default ones

[aroduribe]

I'll draw out some styles then.

[marcustisater]

@aroduribe hope things are well! Are you working on this, or is it ok for someone else to jump in and help? No stress, just check-in. 👍

[aroduribe]

@marcustisater you can jump in and help :) Work caught up on me for the last weeks. :(

[marcustisater]

@aroduribe No worries, same here. We got a few new contributors joining so I figured this could be a good first issue for someone to jump in and help with 👍

[marcustisater]

We are not implementing completely custom scrollbars.

Use css color-scheme to flip the color. This will flip the scrollbar to a dark mode scrollbar for modern browsers.

Read more here

https://web.dev/color-scheme/
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
https://drafts.csswg.org/css-color-adjust/#color-scheme-prop