Changing Widget Colors

Changing Widget Colors edit

This page is intended to collect all the information on setting the colors of modern widgets in one place. This information is sparse, difficult to find, missing, often wrong and is spread out in many places.

For many widgets, the foreground and background colors use: 'active' for the color displayed when hovering over the widget; 'disabled' when the widget's state is disabled; 'readonly' when the widget's state is readonly.

When using the ttk::style map command, it is not necessary to list all of the different styles, only the ones to be changed.

ttk::button edit

ttk::style configure TButton -background color
ttk::style configure TButton -foreground color
ttk::style configure TButton -font namedfont
ttk::style configure TButton -focuscolor color
ttk::style map TButton -background \
    [list active color disabled color readonly color]
ttk::style map TButton -foreground \
    [list active color disabled color readonly color]

ttk::style configure TButton -bordercolor color
ttk::style configure TButton -lightcolor color
ttk::style configure TButton -darkcolor color

bordercolor may be visible around the entire button or just the bottom and right edges.

lightcolor is the color of the top and left edge of the button.

darkcolor is the color of the bottom and right edge of the button.

ttk::checkbutton edit

ttk::style configure TCheckbutton -background color
ttk::style configure TCheckbutton -foreground color
ttk::style configure TCheckbutton -font namedfont
ttk::style map TCheckbutton -background \
    [list active color disabled color readonly color]
ttk::style map TCheckbutton -foreground \
    [list active color disabled color readonly color]
ttk::style configure TCheckbutton -indicatorcolor color
ttk::style map TCheckbutton -indicatorcolor \
    [list selected color pressed color]
ttk::style configure TCheckbutton -indicatorrelief relief
ttk::style configure TCheckbutton -indicatormargin padding
ttk::style configure TCheckbutton -indicatordiameter size
ttk::style configure TCheckbutton -borderwidth size
ttk::style configure TCheckbutton -focuscolor color

The base 'indicatorcolor' is the color when the checkbutton is not selected.

The 'selected' value is the color of the indicator when the checkbutton is selected.

The 'pressed' value is the indicator color when the checkbutton is pressed. This does not combine with 'active'.

The indicator's color also supports disabled, active and readonly, but these are meaningless and confusing as they only show up when the checkbutton is not selected.

ttk::combobox edit

ttk::style configure TCombobox -background color
ttk::style configure TCombobox -foreground color
ttk::style configure TCombobox -fieldbackground color
ttk::style configure TCombobox -darkcolor color
ttk::style configure TCombobox -lightcolor color
ttk::style configure TCombobox -selectbackground color
ttk::style configure TCombobox -selectforeground color
ttk::style configure TCombobox -bordercolor color
ttk::style configure TCombobox -insertcolor color
ttk::style configure TCombobox -insertwidth color
ttk::style configure TCombobox -arrowsize size
ttk::style configure TCombobox -arrowcolor color
ttk::style map TCombobox -background \
    [list disabled color readonly color]
ttk::style map TCombobox -foreground \
    [list disabled color readonly color]
ttk::style map TCombobox -fieldbackground \
    [list disabled color readonly color]
option add *TCombobox*Listbox.background color
option add *TCombobox*Listbox.foreground color
option add *TCombobox*Listbox.selectBackground color
option add *TCombobox*Listbox.selectForeground color

The combobox widget leverages the pre-ttk Listbox for its dropdown element and as such the 'option' command is currently required to set the listbox options.

Whereas '-selectbackground' and '-selectforeground' (which apply to 'selected' text) can be used with the configure command, in using the options database for the associated listbox, we must use the appropriate database names of 'selectBackground' and 'selectForeground' respectively, and note that database names appear to be case sensitive (see http://www.tcl.tk/man/tcl8.6/TkCmd/options.html

for the full list).

The above 'selectForeground' and 'selectBackground' options of the associated listbox are used to implement the standard 'hover' effect when selecting via mouse pointer.

-lightcolor and -darkcolor are used by the clam theme (and perhaps others) to style the relief frame around the arrow.

The 'active' option works, but is pointless, as only the color of the drop down selector changes.

The field background can only be changed for non-native and non-graphical themes.

With respect to font settings, for the 'entry/field' font, the usual configuration of the global style ('TComboBox' here)

ttk::style configure TCombobox -font namedfont

fails. Less globally, for your specific window (read 'widget instance', e.g. '.combo') you can use

.combo configure -font namedfont

or otherwise revert to use the options database:

option add *TCombobox.font namedfont

To set the default listbox font size:

option add *TCombobox*Listbox.font namedfont

To set the font size for a specific listbox:

set popdown [ttk::combobox::PopdownWindow .combo]
$popdown.f.l configure -font namedfont

Note that the PopdownWindow command will create the popdown window, and if your screen is not fully initialized, the popdown window may be created with the incorrect font and possibly in the incorrect position. You can use:

bind ComboboxListbox <Map> +[list ::mycomboboxlistboxhandler %W]

To set up the popdown window upon display.

bordercolor is used by the clam theme.

ttk::entry edit

ttk::style configure TEntry -background color
ttk::style configure TEntry -foreground color
ttk::style configure TEntry -fieldbackground color
ttk::style configure TEntry -selectbackground color
ttk::style configure TEntry -selectforeground color
ttk::style configure TEntry -bordercolor color
ttk::style configure TEntry -lightcolor color
ttk::style configure TEntry -insertcolor color
ttk::style configure TEntry -insertwidth color
ttk::style map TEntry -background \
    [list disabled color readonly color]
ttk::style map TEntry -foreground \
    [list disabled color readonly color]
ttk::style map TEntry -fieldbackground \
    [list disabled color readonly color]
.entry configure -font namedfont

This:

ttk::style configure TEntry -font namedfont

does not work.

This does:

ttk::entry .w -font namedfont

The field background can only be changed for non-native and non-graphical themes.

-lightcolor is used in the clam theme (and perhaps others) and outlines the entry field inside of the border.

Certain themes (arc, blueelegance, plastik, waldorf) use a graphical background and their disabled and read-only field background colors cannot be changed.

Mac OS X: When using the aqua theme, changing -background does not change the background color, it changes the fieldbackground color. Note that with the aqua theme, changing the background is not possible, but it should not be mapped to the fieldbackground. I consider this a cross-platform inconsistency bug. 1

ttk::frame edit

ttk::style configure TFrame -background color

Frames only have a background color. Note that to set your top-level window's background color, you need to do:

. configure -background color

bordercolor is used by the clam theme and possibly others.

ttk::label edit

ttk::style configure TLabel -background color
ttk::style configure TLabel -foreground color
ttk::style configure TLabel -font namedfont
ttk::style map TLabel -background \
    [list disabled color readonly color]
ttk::style map TLabel -foreground \
    [list disabled color readonly color]

ttk::labelframe edit

ttk::style configure TLabelframe -background color
ttk::style configure TLabelframe -bordercolor color
ttk::style configure TLabelframe -lightcolor color
ttk::style configure TLabelframe -darkcolor color
ttk::style configure TLabelframe.Label -background color
ttk::style configure TLabelframe.Label -foreground color
ttk::style configure TLabelframe.Label -font namedfont

bordercolor, lightcolor and darkcolor are used by the clam theme.

listbox edit

.listbox -background color
.listbox -foreground color
.listbox -disabledforeground color
.listbox -selectbackground color
.listbox -selectforeground color
.listbox -font namedfont
.listbox -borderwidth size
.listbox -relief relief

menu edit

.menu configure -background color
.menu configure -foreground color
.menu configure -activebackground color
.menu configure -activeforeground color
.menu configure -disabledforeground color
.menu configure -font namedfont
.menu configure -selectcolor color
.menu configure -activeborderwidth size

'selectcolor' is the color of the dot or checkmark for radiobutton and checkbutton menu types.

ttk::menubutton edit

ttk::style configure TMenubutton -background color
ttk::style configure TMenubutton -foreground color
ttk::style configure TMenubutton -font namedfont
ttk::style configure TMenubutton -arrowcolor color
ttk::style map TMenubutton -background \
    [list active color disabled color]
ttk::style map TMenubutton -foreground \
    [list active color disabled color]
ttk::style map TMenubutton -arrowcolor \
    [list active color disabled color]

ttk::notebook edit

ttk::style configure TNotebook -background color
ttk::style configure TNotebook -bordercolor color
ttk::style configure TNotebook -darkcolor color
ttk::style configure TNotebook -lightcolor color
ttk::style configure TNotebook.Tab -background color
ttk::style configure TNotebook.Tab -foreground color
ttk::style configure TNotebook.Tab -bordercolor color
ttk::style configure TNotebook -focuscolor color
ttk::style configure TNotebook -focusthickness size

ttk::style configure TNotebook.Tab -focuscolor color
ttk::style map TNotebook.Tab -background \
    [list selected color active color disabled color]
ttk::style map TNotebook.Tab -foreground \
    [list selected color active color disabled color]
ttk::style map TNotebook.Tab -lightcolor \
    [list selected color {} color]
ttk::style configure TNotebook.Tab -font namedfont
ttk::style map TNotebook.Tab -font \
    [list selected namedfont active namedfont disabled namedfont]

'selected' is the current tab.

'active' is the color displayed when hovering over an unselected tab.

'disabled' colors are used when the tab is disabled.

darkcolor, lightcolor and the tab's bordercolor and lightcolor mappings are used by the clam theme.

ttk::panedwindow edit

ttk::style configure TPanedwindow -background color

ttk::style configure Sash -sashthickness 5
ttk::style configure Sash -sashrelief relief
ttk::style configure Sash -sashpad 2
ttk::style configure Sash -handlesize 5
ttk::style configure Sash -handlepad 5

ttk::style configure Sash -background color
ttk::style configure Sash -lightcolor color
ttk::style configure Sash -bordercolor color

Paned windows only have a background.

The default, alt, arc, blue, blueelegance, keramic, kroc, and plastik themes have no grip in the sash. A unique background color for the paned window should be chosen.

The sash -lightcolor and -bordercolor are for the clam theme and the themes derived from the clam theme (aquablue, black, clearlooks, radiance, winxpblue).

Sash -background, -sashrelief, -sashpad, -handlesize and -handlepad are applicable to the classic theme.

ttk::progressbar edit

ttk::style configure TProgressbar -background color
ttk::style configure TProgressbar -troughcolor color
ttk::style configure TProgressbar -lightcolor color
ttk::style configure TProgressbar -darkcolor color
ttk::style configure TProgressbar -bordercolor color
ttk::style configure TProgressbar -barsize size
ttk::style configure TProgressbar -pbarrelief relief
ttk::style configure TProgressbar -borderwidth size

Progress bars are either horizontal or vertical and when you create your own style name, you must have MyStyle.Horizontal.TProgressbar. bar lightcolor, darkcolor and bordercolor are used by some of the clam based themes. lightcolor and darkcolor are around the progress bar, and bordercolor is around the trough and also around the progress bar. With the clam theme, -arrowsize can also be used to set the size of the progress bar.

For the native Windows themes, you can also get red, yellow and blue progress bars (from ttk::progressbar). This does not work on Windows XP.

      # these create new states for windows to allow
      # blue, yellow and red progress bars
      ttk::style element create Colored.Horizontal.Progressbar.pbar vsapi \
          PROGRESS 5 {user3 2 user2 3 user1 4 {} 1} -padding 8
      ttk::style element create Colored.Vertical.Progressbar.pbar vsapi \
          PROGRESS 6 {user3 2 user2 3 user1 4 {} 1} -padding 8
      ttk::style layout Horizontal.TProgressbar {
        Horizontal.Progressbar.trough -sticky nswe -children {
          Colored.Horizontal.Progressbar.pbar -side left -sticky ns
        }
      }
      ttk::style layout Vertical.TProgressbar {
        Vertical.Progressbar.trough -sticky nswe -children {
          Colored.Vertical.Progressbar.pbar -side bottom -sticky we
        }
      }

      .myprogressbar1 state user1 ; # blue
      .myprogressbar2 state user3 ; # red
      .myprogressbar3 state user2 ; # yellow
      .myprogressbar1 state {}  ; # default green

ttk::radiobutton edit

ttk::style configure TRadiobutton -background color
ttk::style configure TRadiobutton -foreground color
ttk::style configure TRadiobutton -font namedfont
ttk::style map TRadiobutton -background \
    [list active color disabled color readonly color]
ttk::style map TRadiobutton -foreground \
    [list active color disabled color readonly color]
ttk::style configure TRadiobutton -indicatorcolor color
ttk::style map TRadiobutton -indicatorcolor \
    [list selected color pressed color]

The base 'indicatorcolor' is the color when the radiobutton is not selected.

The 'selected' value is the indicator color when the radiobutton is selected.

The 'pressed' value is the indicator color when the radiobutton is pressed. This does not combine with 'active'.

The indicator's color also supports disabled, active and readonly, but these are meaningless and confusing as they only show up when the radiobutton is not selected.

ttk::scale edit

ttk::style configure TScale -background color

ttk::style configure TScale -troughcolor color
ttk::style map TScale -background \
    [list active color]
ttk::style configure TScale -troughrelief relief

ttk::style configure TScale -sliderrelief relief
ttk::style configure TScale -sliderlength size
ttk::style configure TScale -sliderthickness size

ttk::style configure TScale -lightcolor color
ttk::style configure TScale -darkcolor color
ttk::style configure TScale -bordercolor color

'active' is the slider color when the pointer is over the slider or pressing the slider.

Scales are either horizontal or vertical and when you create your own style name, you must have MyStyle.Horizontal.TScale or MyStyle.Vertical.TScale.

The 'clam' theme uses:

lightcolor : the top and left edge of the slider and as the light color in-between the grab bars.

darkcolor : the bottom and right edge of the slider.

bordercolor : the border color of the scale, the border color of the slider and the color of the grab bars.

The 'alt' theme uses:

background as both the background color and as the slider color.

bordercolor is visible below the bottom and to the right of the slider.

The 'alt', 'winnative', 'xpnative' and 'vista' themes all have a trough that is small in height and the background is the height of the slider. These may look better if the background is set to the same color as the frame background.

ttk::scrollbar edit

ttk::style configure TScrollbar -background color
ttk::style configure TScrollbar -troughcolor color
ttk::style configure TScrollbar -arrowcolor color
ttk::style configure TScrollbar -bordercolor color
ttk::style configure TScrollbar -darkcolor color
ttk::style configure TScrollbar -lightcolor color
ttk::style configure TScrollbar -sliderrelief relief
ttk::style map TScrollbar -background \
    [list active color disabled color]
ttk::style map TScrollbar -foreground \
    [list active color disabled color]
ttk::style map TScrollbar -arrowcolor \
    [list disabled color]

'active' is used when the mouse is over the scroll bar or the scroll bar is selected.

The scrollbar is disabled when the entire field of view is shown.

bordercolor, darkcolor and lightcolor are used by the clam theme.

ttk::separator edit

ttk::style configure TSeparator -background color

Separators are either horizontal or vertical and when you create your own style name, you must have MyStyle.Vertical.TSeparator.

ttk::sizegrip edit

ttk::style configure TSizegrip -background color

ttk::spinbox edit

ttk::style configure TSpinbox -background color
ttk::style configure TSpinbox -foreground color
ttk::style configure TSpinbox -darkcolor color
ttk::style configure TSpinbox -lightcolor color
ttk::style configure TSpinbox -fieldbackground color
ttk::style configure TSpinbox -selectbackground color
ttk::style configure TSpinbox -selectforeground color
ttk::style configure TSpinbox -arrowsize size
ttk::style configure TSpinbox -arrowcolor color
ttk::style configure TSpinbox -bordercolor color
ttk::style configure TSpinbox -insertcolor color
ttk::style configure TSpinbox -insertwidth color
ttk::style map TSpinbox -background \
    [list active color disabled color readonly color]
ttk::style map TSpinbox -foreground \
    [list active color disabled color readonly color]
ttk::style map TSpinbox -fieldbackground \
    [list active color disabled color readonly color]
ttk::style map TScrollbar -arrowcolor \
    [list disabled color]
.spinbox configure -font namedfont

This:

ttk::style configure TSpinbox -font namedfont

does not work.

bordercolor is used by the clam theme.

The field background can only be changed for non-native and non-graphical themes.

-lightcolor and -darkcolor are used by clam-based themes to style the relief colors around the arrows.

bll Mac OS X: When using the aqua theme, changing -background does not change the background color, it changes the fieldbackground color. Note that with the aqua theme, changing the background is not possible, but it should not be mapped to the fieldbackground. I consider this a cross-platform inconsistency bug. 1

text edit

.text configure -background color
.text configure -foreground color
.text configure -selectforeground color
.text configure -selectbackground color
.text configure -inactiveselectbackground color
.text configure -insertbackground color
.text configure -font namedfont
.text configure -relief relief
.text configure -borderwidth size

'insertbackground' is the color behind the cursor.

'inactiveselectbackground' is the color of selected text when the text widget does not have focus.

ttk::treeview edit

ttk::style configure Treeview -background color
ttk::style configure Treeview -foreground color
ttk::style configure Treeview -font namedfont
ttk::style configure Treeview -fieldbackground color
ttk::style map Treeview -background \
    [list selected color]
ttk::style map Treeview -foreground \
    [list selected color]
ttk::style configure Treeview -rowheight [expr {[font metrics namedfont -linespace] + 2}]
ttk::style configure Heading -font namedfont
ttk::style configure Heading -background color
ttk::style configure Heading -foreground color
ttk::style configure Item -foreground color

The selected color only seems to work on items that are leaf items.

A treeview does not scale the line height properly as adjusted by tk scaling. The -rowheight option must be used to set the height.