customize sidebar scrollbar

[Mariusthvdb]

as I just realized when traversing the Dom in Inspector, we can have very nice themes and colors, but the sidebar's scroll handle isnt yet set:

it might be taking the color of another variable I didn't find yet, but it would be nice of we could set it to a certain color (variable)
as it belongs to the sidebar, wouldn't this be a nice setting for the plugin to control?

thoughts?

[elchininet]

as I just realized when traversing the Dom in Inspector, we can have very nice themes and colors, but the sidebar's scroll handle isnt yet set:

Because the sidebar scrollbar is not coming from Home Assistant, it is a native scrollbar from your OS.

There is a CSS proposal that is not baseline yet, but is not supported by every browser (mainly Safari):

https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color

[Mariusthvdb]

I did find these pseudo classes in HA

and apparently we can set a background-color to the scrollbar-thumb:

must check what ha-styles.ts says about that......

apparently this: https://github.com/home-assistant/frontend/blob/991cf83ff3c14ca119c38aed4e1fc0f2af1e794e/src/resources/ha-style.ts#L37

  --scrollbar-thumb-color: rgb(194, 194, 194);

that looks promising.

check!

haha, it's as simple as setting that variable in the theme files

[elchininet]

Test it with the last release:
https://github.com/elchininet/custom-sidebar/releases/tag/v6.7.0

[Mariusthvdb]

confirmed:

it even overrides the setting for the same variable in my HA themes.

did you purposely choose the same name for that variable?
seems to me a dedicated sidebar-xxx name would be better in this case

[Mariusthvdb]

one things leads to another:
now we can color the thumb, the background of the scrollbar stands out being non themed.....
need to find the variable for that, but my inspector wont see it somehow

[elchininet]

did you purposely choose the same name for that variable?
seems to me a dedicated sidebar-xxx name would be better in this case

Yes, I want to make it clear that it is not an implementation coming from the plugin. This could be a door for "the scroll is not colored in my device/browser" so I kept the same Home Assistant name and left a comment in the option.

[elchininet]

one things leads to another:
now we can color the thumb, the background of the scrollbar stands out being non themed.....
need to find the variable for that, but my inspector wont see it somehow

It is implemented, in the Home Assistant styles that I sent you they set this property with the second value in transparent (that value is the one for the track), but of course it is not compatible with every browser. I think that they decided implementing the feature with a graceful degradation.