DMarlon Studio
DemosDescargar

Lección 19 · 19 de 20

Estilos y temas de ttk · tkinter

Cambie el aspecto de los componentes ttk con ttk.Style: temas, configure() para un estilo, estilos propios como Accent.TButton y map().

tkinter · Estilos y temas de ttk en DMarlon Studio: el código del ejemplo y la ventana que abre al ejecutarlo

Los componentes ttk se dibujan con un tema. ttk.Style() da acceso a los estilos y theme_names() lista los temas instalados: en macOS, aqua (el del sistema), clam, alt, default y classic. `theme_use("clam")` cambia a uno que deja cambiar los colores de todo, cosa que aqua no permite.

Cada clase de componente tiene su estilo: TButton para ttk.Button, TLabel para ttk.Label, TEntry para ttk.Entry… `style.configure("TButton", ...)` cambia todos los botones a la vez: aquí, la fuente y el padding.

Un estilo propio se llama Nombre.TButton y hereda todo de TButton. Accent.TButton pone el fondo azul y el texto blanco, y solo se aplica a los botones con style="Accent.TButton". Danger.TButton hace lo mismo en rojo, y Title.TLabel es un estilo de título para etiquetas.

`style.map` da valores según el estado: ("active", "#1d4ed8") oscurece el azul con el ratón encima y ("disabled", "#93c5fd") lo aclara cuando el botón está desactivado, como el último.

El fondo gris es el de clam: todo va dentro de un ttk.Frame para que la ventana entera lo tome. Los estilos no se tocan desde la paleta de DMarlon Studio, pero se pueden escribir en la pestaña Código, antes de crear los componentes.

Código · main.py

import tkinter as tkfrom tkinter import ttkroot = tk.Tk()root.title("Styles and themes")root.geometry("500x260")style = ttk.Style()style.theme_use("clam")  # a built-in theme that lets you change colours# configure() changes a style; "TButton" is the style of every ttk.Button.style.configure("TButton", font=("Helvetica", 12), padding=(12, 6))# A new style that inherits from TButton: <Name>.TButton.style.configure("Accent.TButton", background="#2563eb", foreground="white")style.map("Accent.TButton", background=[("active", "#1d4ed8"),                                        ("disabled", "#93c5fd")])style.configure("Danger.TButton", background="#dc2626", foreground="white")style.configure("Title.TLabel", font=("Helvetica", 20, "bold"),                foreground="#1e3a8a")main = ttk.Frame(root, padding=20)main.pack(fill="both", expand=True)ttk.Label(main, text="Custom styles", style="Title.TLabel").pack(anchor="w")ttk.Label(main, text="Themes: " + ", ".join(sorted(style.theme_names())),          wraplength=440).pack(anchor="w", pady=(4, 16))row = ttk.Frame(main)row.pack(anchor="w")ttk.Button(row, text="Normal").pack(side="left")ttk.Button(row, text="Accent", style="Accent.TButton").pack(side="left", padx=8)ttk.Button(row, text="Delete", style="Danger.TButton").pack(side="left")ttk.Button(main, text="Disabled accent", style="Accent.TButton",           state="disabled").pack(anchor="w", pady=12)root.mainloop()

Para recordar

  • theme_use() cambia el tema de todos los componentes ttk.
  • configure("TButton", ...) cambia todos los botones.
  • Nombre.TButton es un estilo propio que hereda de TButton.
  • map() da valores distintos según el estado: active, disabled…

Ejercicio

Cree un estilo Big.TLabel con letra de 16 puntos y color verde y úselo en la etiqueta de los temas.