How to change the dynamic appearance (i.e. color) of tkinter ttk.Scrollbar?

Question

I have found questions and answers on changing the static colour of a ttk.Scrollbar. However, I have not yet found one on changing its dynamic appearance, which is my question.

My scripts have exposed the elements of a Vertical.TScrollbar to be:

clam theme:

Stylename = Vertical.TScrollbar
Layout    = [('Vertical.Scrollbar.trough', {'sticky': 'ns', 'children': [('Vertical.Scrollbar.uparrow', {'side': 'top', 'sticky': ''}), ('Vertical.Scrollbar.downarrow', {'side': 'bottom', 'sticky': ''}), ('Vertical.Scrollbar.thumb', {'sticky': 'nswe'})]})]

Element(s) = ['Vertical.Scrollbar.trough', 'Vertical.Scrollbar.uparrow', 'Vertical.Scrollbar.downarrow', 'Vertical.Scrollbar.thumb']

Vertical.Scrollbar.trough      options: ('orient', 'background', 'bordercolor', 'troughcolor', 'lightcolor', 'darkcolor', 'arrowcolor', 'arrowsize', 'gripcount', 'sliderlength')
Vertical.Scrollbar.uparrow     options: ('orient', 'background', 'bordercolor', 'troughcolor', 'lightcolor', 'darkcolor', 'arrowcolor', 'arrowsize', 'gripcount', 'sliderlength')
Vertical.Scrollbar.downarrow   options: ('orient', 'background', 'bordercolor', 'troughcolor', 'lightcolor', 'darkcolor', 'arrowcolor', 'arrowsize', 'gripcount', 'sliderlength')
Vertical.Scrollbar.thumb       options: ('orient', 'background', 'bordercolor', 'troughcolor', 'lightcolor', 'darkcolor', 'arrowcolor', 'arrowsize', 'gripcount', 'sliderlength')

default theme:

Stylename = Vertical.TScrollbar
Layout    = [('Vertical.Scrollbar.trough', {'sticky': 'ns', 'children': [('Vertical.Scrollbar.uparrow', {'side': 'top', 'sticky': ''}), ('Vertical.Scrollbar.downarrow', {'side': 'bottom', 'sticky': ''}), ('Vertical.Scrollbar.thumb', {'sticky': 'nswe'})]})]

Element(s) = ['Vertical.Scrollbar.trough', 'Vertical.Scrollbar.uparrow', 'Vertical.Scrollbar.downarrow', 'Vertical.Scrollbar.thumb']

Vertical.Scrollbar.trough      options: ('borderwidth', 'troughcolor', 'troughrelief')
Vertical.Scrollbar.uparrow     options: ('background', 'relief', 'borderwidth', 'arrowcolor', 'arrowsize')
Vertical.Scrollbar.downarrow   options: ('background', 'relief', 'borderwidth', 'arrowcolor', 'arrowsize')
Vertical.Scrollbar.thumb       options: ('orient', 'width', 'relief', 'background', 'borderwidth')

I tried changing the dynamic color of the its thumb using:

ss.map("Vertical.TScrollbar", background=[('pressed', "yellow"), ('active', "yellow")])

or

ss.map("Vertical.TScrollbar", thumb=[('pressed', "yellow"), ('active', "yellow")])

but these syntaxes don't work.

I want the scrollbar thumb to change to yellow color whenever the mouse pointer goes over or presses the ttk.Scrollbar. How can this objective be achieved? Thanks.

Sample script(adapted from @Aivar):

import tkinter as tk
from tkinter import ttk

root = tk.Tk()
style = ttk.Style()
style.theme_use('clam')
# style.theme_use('default')

# list the options of the style
# (Argument should be an element of TScrollbar, eg. "thumb", "trough", ...)
print(style.element_options("Horizontal.TScrollbar.thumb"))

# configure the style
style.configure("Horizontal.TScrollbar", gripcount=0,
                background="Green", darkcolor="DarkGreen", lightcolor="LightGreen",
                troughcolor="gray", bordercolor="blue", arrowcolor="white")

# Syntax A - don't work
style.map("Vertical.TScrollbar.thumb",
          background=[('pressed', "yellow"), ('active', "yellow")],
          bordercolor=[('pressed', "yellow"), ('active', "yellow")],
          troughcolor=[('pressed', "yellow"), ('active', "yellow")],
          lightcolor=[('pressed', "yellow"), ('active', "yellow")],
          darkcolor=[('pressed', "yellow"), ('active', "yellow")],
          )

# Syntax B - don't work either
##style.map("Vertical.TScrollbar",
##          background=[('pressed', "yellow"), ('active', "yellow")],
##          bordercolor=[('pressed', "yellow"), ('active', "yellow")],
##          troughcolor=[('pressed', "yellow"), ('active', "yellow")],
##          lightcolor=[('pressed', "yellow"), ('active', "yellow")],
##          darkcolor=[('pressed', "yellow"), ('active', "yellow")],
##          )


hs = ttk.Scrollbar(root, orient="horizontal")
hs.place(x=5, y=5, width=150)
hs.set(0.2,0.3)

root.mainloop()

These are useful documentation [1, 2], on dynamic styling and ttk.Scrollbar that I have found. The tcl documentation did mention that the dynamic states of a ttk.Scrollbar are: active, disabled. I have tried removing the pressed state in my test script so as to only mention active state but this amendment did not work.

Advanced style programming! Good luck. (I was always just happy picking the platform-specific styles...) — Donal Fellows, Feb 17 '23 at 12:36
@DonalFellows I managed to crack it... :) tcl documentation helped. — Sun Bear, Feb 17 '23 at 14:51

Sun Bear · Accepted Answer · 2023-02-17T14:46:35.330

I am so happy to share that the answer to my question is

style.map("TScrollbar", background=[('active', "yellow")],)

or specifically for a Horizontal scrollbar it is

style.map("Horizontal.TScrollbar", background=[('active', "yellow")],)

Found it after many different permutations of try and error and after realising my typo. The script used a Horizontal ttk.Scrollbar but my styling mentioned Vertical.TScrollbar. :)

Works on these themes 'clam', 'default', 'classic', 'alt'.

import tkinter as tk
from tkinter import ttk

root = tk.Tk()
style = ttk.Style()
# style.theme_use('clam')
# style.theme_use('default')
# style.theme_use('classic')
style.theme_use('alt')

# list the options of the style
# (Argument should be an element of TScrollbar, eg. "thumb", "trough", ...)
print(style.element_options("Horizontal.TScrollbar.thumb"))

# configure the style
style.configure("Horizontal.TScrollbar", gripcount=0,
                background="Green", darkcolor="DarkGreen", lightcolor="LightGreen",
                troughcolor="gray", bordercolor="blue", arrowcolor="white")

# Syntax  - works
style.map("TScrollbar",
          background=[('active', "yellow")],
          bordercolor=[('active', "cyan")],
          troughcolor=[('active', "orange")],
          lightcolor=[('active', "red")],
          darkcolor=[('active', "pink")],
          arrowcolor=[('active', "red")],
          )
print(f"{style.map('TScrollbar')=}")

hs = ttk.Scrollbar(root, orient="horizontal")
hs.place(x=5, y=5, width=150)
hs.set(0.2,0.3)

root.mainloop()

How to change the dynamic appearance (i.e. color) of tkinter ttk.Scrollbar?

1 Answers1