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::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 colorbordercolor 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::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 colorThe 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::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 colorThe 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 https://www.tcl-lang.org/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, the recommended way is:
proc mycomboboxlistboxgeomhandler { w } {
set w [winfo parent $w]
set w [winfo parent $w]
set cb [winfo parent $w]
::ttk::combobox::PlacePopdown $cb $w
}
proc mycomboboxlistboxhandler { w } {
$w configure -font mycomboboxfont
}
bind ComboboxListbox <Map> +[list ::mycomboboxlistboxhandler %W]
bind ComboboxListbox <Visibility> +[list after 10 ::mycomboboxlistboxgeomhandler %W]bordercolor is used by the clam theme.
Known bug: -postoffset does not work with the default style. This is a bug in library/ttk/combobox.tcl. https://core.tcl-lang.org/tk/info/2d24591c3ba423ef
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 namedfontThis:
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: In older versions of Tk, 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::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::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::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 configure -background color .listbox configure -foreground color .listbox configure -disabledforeground color .listbox configure -selectbackground color .listbox configure -selectforeground color .listbox configure -font namedfont .listbox configure -borderwidth size .listbox configure -relief relief .listbox configure -highlightthickness size .listbox configure -highlightcolor color .listbox configure -highlightbackground color
.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 .menu configure -relief relief
'selectcolor' is the color of the dot or checkmark for radiobutton and checkbutton menu types.
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::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::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::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 greenttk::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::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::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::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::style configure TSizegrip -background color
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 namedfontThis:
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 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 .text configure -highlightcolor color .text configure -highlightthickness size .text configure -highlightbackground color
'insertbackground' is the color behind the cursor.
'inactiveselectbackground' is the color of selected text when the text widget does not have focus.
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 Heading -padding padding
ttk::style configure Item -foreground color
ttk::style configure Item -focuscolor colorA treeview does not scale the line height properly as adjusted by tk scaling. The -rowheight option must be used to set the height.
There seems to be some usage of Treeview.Heading in the wild. I am not sure why this works.
2020-9-12 bll missing menu options.
2020-8-14 bll updated info on changing the combobox listbox fonts.
2020-6-39 bll added note on combobox -postoffset bug.
2020-5-15 bll add Treeview's Heading -padding
2020-3-8 bll added highlight info for text and listbox widgets.
2020-1-5 bll added Treeview Item focuscolor.
2013-4-29 bll Treeview had incorrect name, information, was missing 'selected'. Added text.
2013-5-28 bll Added 'pressed' to radiobutton, checkbox. Added disabled arrowcolor for scrollbar, spinbox. Added 'active' for scale.
2014-7-20 elbeardmorez Updated 'combobox' with additional info, mentioning 'Database names' for options.
2014-10-15 bll Added information on how to set combobox drop down font size for individual widgets.
2014-11-9 bll ttk::notebook font mapping for different states.
2014-12-8 bll added more information on buttons and scales.
2015-9-10 bll added windows progress bar colors. added listbox
2015-9-17 bll updates for bordercolor, lightcolor, darkcolor, mostly for the clam theme.
2015-9-23 bll updates for ttk::treeview: background and foreground colors do not work for non-leaf items :( :( .
2016-4-3 bll added some notes on mac os x aqua theme.
2016-5-1 bll revert to ttk::treeview notes.
2016-6-25 bll Updates to TProgressbar.
2016-12-9 bll Notes on field background.
2018-3-25 bll Notes on treeview -rowheight
2018-4-22 bll Missing options for ttk::combobox, ttk::notebook, ttk::treeview.
2018-8-31 bll Added -focuscolor, -focusthickness, -arrowcolor, -arrowsize, -indicator*, -insertcolor, -insertthickness.