Changing Widget Colors

Difference between version 86 and 87 - Previous - Next
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 <Map> +[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
.listbox -borderwidth size
.listbox -relief relief
======

----
** 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 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 **
======
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.text configure -highlightcolor color
.text configure -highlightthickness 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 
ttk::style configure Item -focuscolor color
======

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]
----

<<discussion>>Change History
2020-3-8 [bll] added highlight for text widget.

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.
<<enddiscussion>>

<<categories>> Widget