nodejs.dev Styled Scroll Bars

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.

Aug 13 '20 18:08 bnb

This is something I can look into.

Aug 13 '20 18:08 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?

Aug 14 '20 01:08 aroduribe

@designMoreWeb any word on this question ^^ ?

Aug 18 '20 00:08 aroduribe

@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

Aug 18 '20 02:08 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

Aug 18 '20 10:08 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

I believe those are the default ones

Aug 18 '20 11:08 designMoreWeb

I'll draw out some styles then.

Aug 18 '20 17:08 aroduribe

@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. 👍

Sep 02 '20 09:09 marcustisater

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

Sep 03 '20 17:09 aroduribe

@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 👍

Sep 03 '20 20:09 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

Oct 07 '20 18:10 marcustisater

Okay, this hasn't received some love for a while. The current Figmas don't include a scrollbar. I can try to do some CSS stuff here and there based on the current theme used and make it universal, as discussed in previous messages above.

I'll try to make something that looks matching to the overall design guidelines for this website.

Jul 27 '22 16:07 ovflowd