Change scroll bar color

johnwangwyx commented 4 months ago

Hi TkinterWeb community,

I am trying to make an app with an optional dark theme. I managed to make the text background dark by applying styling to the html content. However, I was not able to find a way to change the colour of the scroll bar.

I am wondering if there is any workaround for this or even just hide the scroll bar? Thank you so much for your help!

Andereoo commented 4 months ago

Hi! You can hide the scrollbar with HtmlFrame(root, vertical_scrollbar=False). The scrollbar is a normal ttk.Scrollbar, so you can style it like any other ttk widget, although you would have to apply this to all vertical ttk scrollbars in your app, which I don't think would be a problem for you:

style = ttk.Style()
style.theme_use('clam')
style.configure("Vertical.TScrollbar", gripcount=0,
                        background="black", darkcolor="grey", lightcolor="grey",
                        troughcolor="black", bordercolor="black", arrowcolor="grey")

Instead of injecting CSS, you could also use frame.enable_dark_theme(enabled=True, invert_images=False). This will also change the colours of inputs, text, etc. It's largely experimental and doesn't give you as much control over colours as applying custom styling but for your purposes it might suffice. FYI.

Hope this helps!

johnwangwyx commented 4 months ago

Hi! You can hide the scrollbar with HtmlFrame(root, vertical_scrollbar=False). The scrollbar is a normal ttk.Scrollbar, so you can style it like any other ttk widget, although you would have to apply this to all vertical ttk scrollbars in your app, which I don't think would be a problem for you:
style = ttk.Style()
style.theme_use('clam')
style.configure("Vertical.TScrollbar", gripcount=0,
                        background="black", darkcolor="grey", lightcolor="grey",
                        troughcolor="black", bordercolor="black", arrowcolor="grey")
Instead of injecting CSS, you could also use frame.enable_dark_theme(enabled=True, invert_images=False). This will also change the colours of inputs, text, etc. It's largely experimental and doesn't give you as much control over colours as applying custom styling but for your purposes it might suffice. FYI.

Hope this helps!

Thank you so much for the solution. The styling works great and the enable_dark_theme() is really neat too!

Andereoo / TkinterWeb

Change scroll bar color #98