On some websites scroll bar is not recolored

[Vintagemotors]

Example site where it doesn't work: https://www.muskokaseaflea.ca/homesplash/
Example site where it works as expected: https://store.muskokaseaflea.ca/index.php?route=product/category&path=33#new_tab

[ThomazPom]

Thank you for highlighting these instances 👍. I had considered scrollbars once but then forgot about them. This issue will serve as a great reminder.

[ThomazPom]

With native behaviour, scrollbar colors can either be white or dependent on the website's background color.

Modifying it with UltimaDark is straightforward, but I'm wondering of the optimal color logic for it.

The simplest approach might involve two fixed colors: a dark grey for the scrollbar thumb and nearly black for the scrollbar track. However, incorporating an alpha value could reproduce in some sort the native relation between scrollbar color and the background.
https://cdpn.io/Thomaz-Pom/fullpage/qBvRWvB ( Use it with UlimaDark disabled )

Scrollbars from left to right in above snippet:

• Native to Firefox
• Dark grey for the scrollbar thumb and nearly black for the scrollbar track
• Emulation of the native appearance without switching to white on the brightest backgrounds (which doesn't occur with UltimaDark anyway)
• Similar to 3, but with a dark thumb.
• Swapped colors from 2.

code of snippet https://codepen.io/Thomaz-Pom/pen/qBvRWvB

[Vintagemotors]

3 is mostly there but allows it to get a bit too bright

[ThomazPom]

I've put them side to side, to be sure, on your brightest example and the colour of the scrollbar thumb is the exact same

There is a small difference with the track. I'll adapt the snippet

[ThomazPom]

#col3{
scrollbar-color:rgba(255,255,255,0.40) rgba(0,0,0,0.26)
}

[ThomazPom]

I would consider it satisfactory. The presence of an alpha channel in the scrollbar thumb means that altering the track with rgba(0,0,0,0.26) has an impact on the color rgba(255,255,255,0.40) of the scrollbar thumb. Investigating the precise match would require adjusting the 0.0.0.0.26 values within the range of 0 to 30 and the 0.15 to 0.40 values approximately, as well as the 255.255.255.40 values from 235 to 255 and the 0.25 to 0.65 values approximately. However, delving into such time consuming fine-tuned adjustments may not be justified.

[ThomazPom]

I like all four options, but with an infinite number of color combinations, how do we choose the best one?
I'm leaning towards the third option after checking out various websites.

[ThomazPom]

I won't tweak scrollbar opacity based on brightness because it involves to much processing for such a simple thing as scrollbars. Doing this would mean figuring out each scrollable part, adjusting opacity during load, and updating it whenever the background or its background-color changes. It's just not practical for managing scrollbars, especially if the background comes from images. Let's stick to the basics and use two fixed colors, whether with or without transparency.

[Vintagemotors]

3rd option with user defined global colors and no transparency or fixed opacity?

[ThomazPom]

The default setting will be the third option, but users will be able to customize their preferred colors, including opacity. We'll also provide one-click options for suggested styles 1 to 4.

[Vintagemotors]

Resolved in 1.5.34