Can I edit System Theme Scroll bar visual properties?

As I approach 112 years now living in front of desktop computer screens I need one particular higher contrast, bolder visual component in the Wappler System themes. I call it a “vertical Scroll Bar control”

vertical Scroll Bar

Screenshot 2022-08-10 at 10.37.50

in a lighter theme:

Screenshot 2022-08-10 at 10.38.35

Working for hours in the Wappler screen the system UI is a default low conrast slider control which I have to jump to hundreds of times a day. On top of that I must slide blindly up and down the scroll window with my mouse to locate it wherever it has chosen to go. Only when my mouse pointer is directly ON it will it “light up” – very dimly so.
Changing the System themes does not address this component’s visibility directly.

I would like a slider control in whatever System theme that is more instantly visible when I have 3 or 4 columns open in Wappler. So that I can pick that up more quickly for dragging. Like an always contrasting color such as this –

Screenshot orange2022-08-10 at 10.38.35

My Mac system UI settings don’t impact this in Wappler. But I have tried the Options with “Use System Accent Color” On and Off. No difference.

Is there a way now that I can modify the size and contrast and color of the Windows Scroll Bar in the Wappler UI?

It uses the colors of the Wappler theme. You can override it using css if you want, add the following to your page.

<style>
::-webkit-scrollbar-thumb {
  background-color: red;
}
</style>

Changed red with any color you like. More information can be found at ::-webkit-scrollbar - CSS: Cascading Style Sheets | MDN (mozilla.org).

Hi Patrick, Thanks!
Okay, so I have to apply this to every page I work on?

So I see that, yes, I will have to put this into all documents.

Can I install this change as a default every time I open Wappler in the future, no matter what Theme I use?

While we are on the subject of System Theme…

Patrick:
What would cause the System Theme revert back to Light after a Mac mini M1 computer restart from sleep? Any recommendations?

I have a Mac M1 desktop, usually on Sleep mode.
After a restart Wappler does revert from my chosen Theme (the color scheme of my Wappler UI) to a light theme.

Related: Is there a way to EDIT these Themes that Wappler uses in the Theme Manager to add additional styling of the Wappler UI from this page? So that such things as making the Wappler UI scrollbar a more visible color can be applied into the UI themes themselves, instead of temporarily into each page code?

I don’t know about an issue with the Mac M1 reverting to the light theme, we will investigate this.

We don’t have a way to add additional styling to the Wappler UI, we will maybe make it possible to create a user theme, but that is only for colors.

1 Like