henrygd / beszel

Lightweight server monitoring hub with historical data, docker stats, and alerts.
MIT License
2.42k stars 73 forks source link

feat: style scrollbar #135

Closed steveiliop56 closed 2 months ago

steveiliop56 commented 2 months ago

I simply changed the default scrollbar to have transparent background and use the border color to match beszel's theme. Here is a preview with 175% zoom:

image

And in light mode:

image

henrygd commented 2 months ago

Good idea, thanks. I may tweak it a bit for contrast and give it a min-width to prevent it overriding mobile scrollbars.

steveiliop56 commented 2 months ago

Yeah no problem! My ocd was just dying with the default scrollbar lol

Simonh2o commented 2 months ago

I'd recommend only changing the webkit scrollbars for windows/chrome OS combo and not for mac/linux/phones which utilizes floating scrollbars (prevents scrollbar from taking up space in dom). Setting the color-scheme to dark would be enough for windows OS so you get rid of the light scrollbar during dark mode. Just my opinion.

steveiliop56 commented 2 months ago

It's yours man do whatever you want lol.

henrygd commented 2 months ago

@Simonh2o Good point.

After doing some research, it looks like setting the property below when dark mode is enabled will apply a darker theme to the native scrollbars.

color-scheme: dark;

So I think I'll go this route instead of overriding with css.