**Changing Widget Colors** 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 ** ====== 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 ** ====== 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 ** ====== 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 +[list ::mycomboboxlistboxhandler %W] ====== To set up the popdown window upon display. bordercolor is used by the clam theme. ---- ** ttk::entry ** ====== 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. http://core.tcl.tk/tk/tktview/058836a5ba77d754aabec2cf56054773d7fe0eac%|%1%|% ---- ** ttk::frame ** ====== 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 ** ====== 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 ** ====== 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 ** ====== .listbox -background color .listbox -foreground color .listbox -disabledforeground color .listbox -selectbackground color .listbox -selectforeground color .listbox -font namedfont ====== ---- ** menu ** ====== .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 ** ====== ttk::style configure TMenubutton -background color ttk::style configure TMenubutton -foreground color ttk::style configure TMenubutton -font namedfont ttk::style map TMenubutton -background \ [list active color disabled color] ttk::style map TMenubutton -foreground \ [list active color disabled color] ====== ---- ** ttk::notebook ** ====== 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 ** ====== 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 ** ====== 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 ** ====== 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 ** ====== 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 ** ====== 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 ** ====== 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 ** ====== ttk::style configure TSizegrip -background color ====== ---- ** ttk::spinbox ** ====== 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. http://core.tcl.tk/tk/tktview/058836a5ba77d754aabec2cf56054773d7fe0eac%|%1%|% ---- ** text ** ====== .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 ** ====== 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. ---- See also: [Color palettes for ttk] ---- <>Change History 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. <> <> Widget