search

boostorg / website-v2

New Boost website
https://boost.io
Boost Software License 1.0
9 stars 12 forks source link

Dark mode scrollbars need tweaking #365

Closed vinniefalco closed 1 year ago

vinniefalco commented 1 year ago

The new bar is missing some behaviors though. When you hover or click on the thumb it needs to change color (hover and click have separate visuals). Try it on https://github.com/ and compare.

The up and down buttons at the ends of the scrollbar also need feedback on hover and click. Can we just copy github's CSS and apply a hue/saturation or colorize to the RGB values to match our Style Guide for dark mode?

vinniefalco commented 1 year ago

The up and down buttons are not horizontally aligned:

image

The up and down arrows are not the same size in dark mode as they are in light mode:

image

vinniefalco commented 1 year ago

I'm not sure why our dark scrollbar looks janky while the light one looks correct. The arrows in light mode are crisp while the arrows in dark mode look like a bug.

vinniefalco commented 1 year ago

GitHub's dark mode scrollbar parts are pixel-perfect can we just copy their code?

image

d-spencer-strickland commented 1 year ago

Latest context for this issue -

If you remove the custom scrollbar from the site (which you should do) you will see that the stock browser scrollbar is hideous in dark mode

The solution is to customize the scrollbar for both dark and light mode (so they are identical) and use sensible colors (GitHub.com in dark mode is a good reference)

[The current implementation] caused the header to shift a few pixels left in dark mode, your solution should not do that

The appearance or disappearance of a vertical scrollbar must NEVER cause anything on the page to move

That means you have to account for the space of the scrollbar even if it is not visible