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:

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' });

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