Theming
A theme controls the look of every themed widget — the ones whose names
start with T (TButton, TEntry, TCheckButton, …). Switch themes with
a single call:
app.setTheme('flatly');
setTheme applies immediately and re-styles widgets that already exist, so you
can let the user change the look at runtime:
const picker = app.TCombobox({ state: 'readonly' });
picker.setValues(['flatly', 'darkly', 'minty', 'superhero']);
picker.value = 'flatly';
picker.bind('<<ComboboxSelected>>', () => app.setTheme(picker.value));
Only the
T-prefixed widgets follow the theme. The classic Tk widgets (Button,Entry, …) keep their native platform look.
Built-in light / dark
The Player always ships the Azure theme. These names are always available, with short aliases:
app.setTheme('dark'); // or 'azure-dark'
app.setTheme('light'); // or 'azure-light'
The ttkbootstrap theme pack
ScriptWeaver also bundles the ttkbootstrap
themes. Pass any of these names to setTheme:
- Light —
cosmo,flatly,journal,litera,lumen,minty,pulse,sandstone,united,yeti,morph,simplex,cerculean - Dark —
darkly,superhero,solar,cyborg,vapor
Each theme is loaded on first use and cached, so the initial setTheme for a
given name does a little more work than later switches back to it.
Colour variants
Within a ttkbootstrap theme, widgets come in semantic colours. Select one with
the widget's style option, named <colour>.<WidgetClass>:
app.setTheme('flatly');
app.TButton({ text: 'Save', style: 'success.TButton' });
app.TButton({ text: 'Delete', style: 'danger.TButton' });
app.TButton({ text: 'Cancel', style: 'secondary.Outline.TButton' });
app.TCheckButton({ text: 'Enabled', style: 'success.TCheckbutton' });
app.TProgressbar({ value: 60, style: 'info.Horizontal.TProgressbar' });
- Colours —
primary,secondary,success,info,warning,danger,light,dark. - Button forms — solid (
success.TButton),success.Outline.TButton,success.Link.TButton.
Note the Tk class name is lower-cased after the dot for some widgets
(TCheckbutton, TRadiobutton, Horizontal.TProgressbar), matching Tk's own
style names.
The window background
setTheme also syncs the root window's background to the new theme, so the area
behind your widgets matches. If you place plain (non-T) widgets directly on the
window, give them an explicit colour or wrap them in a TFrame.
Next
- Widget basics — creating widgets and setting options
- Layout —
pack,grid,place - Widget reference