update: switch timespinner to canvas-based rendering

Author: mashu3

examples/demo_timepicker.py

@@ -39,6 +39,7 @@ def __init__(self):
         self.timepicker_type_var = tk.StringVar(value="TimeFrame")
         self.hour_format_var = tk.StringVar(value="24")
         self.show_seconds_var = tk.BooleanVar(value=True)
+        self.theme_var = tk.StringVar(value="light")
         self.language_var = tk.StringVar(value="en")
         self.button_text_var = tk.StringVar(value="🕐")
         self.width_var = tk.StringVar(value="15")
@@ -139,6 +140,31 @@ def create_widgets(self):
         )
         self.show_seconds_check.pack(side="left", padx=(0, 20))
 
+        # Configuration controls - Row 1.7 (Theme selection)
+        config_row1_7 = tk.Frame(config_frame)
+        config_row1_7.pack(fill="x", pady=(0, 10))
+
+        # Theme selection
+        tk.Label(config_row1_7, text="Theme:").pack(side="left")
+        theme_frame = tk.Frame(config_row1_7)
+        theme_frame.pack(side="left", padx=(5, 20))
+
+        tk.Radiobutton(
+            theme_frame,
+            text="Light",
+            variable=self.theme_var,
+            value="light",
+            command=self.change_theme,
+        ).pack(side="left", padx=(0, 10))
+
+        tk.Radiobutton(
+            theme_frame,
+            text="Dark",
+            variable=self.theme_var,
+            value="dark",
+            command=self.change_theme,
+        ).pack(side="left")
+
         # Configuration controls - Row 2
         config_row2 = tk.Frame(config_frame)
         config_row2.pack(fill="x", pady=(0, 10))
@@ -262,6 +288,7 @@ def create_timepicker(self, parent):
         # Get current format
         hour_format = self.hour_format_var.get()
         show_seconds = self.show_seconds_var.get()
+        theme = self.theme_var.get()
 
         # Build time format string
         if hour_format == "24":
@@ -279,10 +306,11 @@ def create_timepicker(self, parent):
         width = int(self.width_var.get()) if self.width_var.get().isdigit() else 15
         language = self.language_var.get()
         self.logger.debug(
-            "Creating timepicker type=%s hour_format=%s show_seconds=%s lang=%s width=%s",
+            "Creating timepicker type=%s hour_format=%s show_seconds=%s theme=%s lang=%s width=%s",
             self.timepicker_type_var.get(),
             hour_format,
             show_seconds,
+            theme,
             language,
             width,
         )
@@ -292,6 +320,7 @@ def create_timepicker(self, parent):
                 time_format=time_format,
                 hour_format=hour_format,
                 show_seconds=show_seconds,
+                theme=theme,
                 language=language,
                 time_callback=self.on_time_selected,
                 button_text=self.button_text_var.get(),
@@ -303,6 +332,7 @@ def create_timepicker(self, parent):
                 time_format=time_format,
                 hour_format=hour_format,
                 show_seconds=show_seconds,
+                theme=theme,
                 language=language,
                 time_callback=self.on_time_selected,
                 width=width,
@@ -323,6 +353,7 @@ def create_initial_timepicker(self, parent):
             time_format="%H:%M:%S",
             hour_format="24",
             show_seconds=True,
+            theme=self.theme_var.get(),
             language=self.language_var.get(),
             time_callback=self.on_initial_time_selected,
             button_text="🕐",
@@ -453,6 +484,19 @@ def change_language(self):
             self.create_initial_timepicker(parent)
         self.generate_code()
 
+    def change_theme(self):
+        """Change the theme."""
+        # Recreate TimePicker to reflect theme changes
+        if self.timepicker:
+            parent = self.timepicker.master
+            self.create_timepicker(parent)
+        # Recreate initial time picker to reflect theme changes
+        if hasattr(self, "initial_timepicker") and self.initial_timepicker:
+            parent = self.initial_timepicker.master
+            self.create_initial_timepicker(parent)
+        self.display_result("Theme Changed", self.theme_var.get())
+        self.generate_code()
+
     def generate_code(self):
         """Generate Python code for the current TimePicker configuration."""
         # Build the code string
@@ -507,6 +551,10 @@ def generate_code(self):
         code_lines.append(f"    hour_format='{hour_format}',")
         code_lines.append(f"    show_seconds={show_seconds},")
 
+        # Add theme if not default
+        if self.theme_var.get() != "light":
+            code_lines.append(f"    theme='{self.theme_var.get()}',")
+
         # Add time_callback
         code_lines.append(
             "    time_callback=on_time_selected,  # Define your callback function"

tkface/dialog/timepicker.py

@@ -5,18 +5,109 @@
 popup time selectors for time selection.
 """
 
+import configparser
 import datetime
 import logging
 import sys
 import tkinter as tk
 from dataclasses import dataclass
+from pathlib import Path
 from tkinter import ttk
-from typing import Optional
+from typing import Dict, Optional
 
 from ..widget import get_scaling_factor
 from ..widget.timespinner import TimeSpinner
 
 
+def _load_theme_colors(theme_name: str = "light") -> Dict[str, str]:
+    """
+    Load theme colors from .ini file.
+    
+    Args:
+        theme_name: Name of the theme ('light' or 'dark')
+        
+    Returns:
+        Dict with color values
+    """
+    try:
+        current_dir = Path(__file__).parent.parent / "themes"
+        theme_file = current_dir / f"{theme_name}.ini"
+        
+        if not theme_file.exists():
+            # Return default light theme if file doesn't exist
+            return {
+                'time_background': 'white',
+                'time_foreground': '#333333',
+                'time_spinbox_bg': '#f0f0f0',
+                'time_spinbox_button_bg': 'white',
+                'time_spinbox_hover_bg': '#e0e0e0',
+                'time_spinbox_active_bg': '#d0d0d0',
+                'time_spinbox_outline': '#cccccc',
+                'time_separator_color': '#333333',
+                'time_label_color': '#333333',
+                'time_toggle_bg': '#f0f0f0',
+                'time_toggle_slider_bg': 'white',
+                'time_toggle_outline': '#cccccc',
+                'time_toggle_active_fg': '#333333',
+                'time_toggle_inactive_fg': '#999999',
+                'time_button_bg': 'white',
+                'time_button_fg': '#000000',
+                'time_button_active_bg': '#f5f5f5',
+                'time_button_active_fg': '#000000'
+            }
+            
+        config = configparser.ConfigParser()
+        config.read(theme_file)
+        
+        if theme_name not in config:
+            # Return default light theme if section doesn't exist
+            return {
+                'time_background': 'white',
+                'time_foreground': '#333333',
+                'time_spinbox_bg': '#f0f0f0',
+                'time_spinbox_button_bg': 'white',
+                'time_spinbox_hover_bg': '#e0e0e0',
+                'time_spinbox_active_bg': '#d0d0d0',
+                'time_spinbox_outline': '#cccccc',
+                'time_separator_color': '#333333',
+                'time_label_color': '#333333',
+                'time_toggle_bg': '#f0f0f0',
+                'time_toggle_slider_bg': 'white',
+                'time_toggle_outline': '#cccccc',
+                'time_toggle_active_fg': '#333333',
+                'time_toggle_inactive_fg': '#999999',
+                'time_button_bg': 'white',
+                'time_button_fg': '#000000',
+                'time_button_active_bg': '#f5f5f5',
+                'time_button_active_fg': '#000000'
+            }
+            
+        theme_section = config[theme_name]
+        return dict(theme_section)
+    except Exception:
+        # Return default light theme on any error
+        return {
+            'time_background': 'white',
+            'time_foreground': '#333333',
+            'time_spinbox_bg': '#f0f0f0',
+            'time_spinbox_button_bg': 'white',
+            'time_spinbox_hover_bg': '#e0e0e0',
+            'time_spinbox_active_bg': '#d0d0d0',
+            'time_spinbox_outline': '#cccccc',
+            'time_separator_color': '#333333',
+            'time_label_color': '#333333',
+            'time_toggle_bg': '#f0f0f0',
+            'time_toggle_slider_bg': 'white',
+            'time_toggle_outline': '#cccccc',
+            'time_toggle_active_fg': '#333333',
+            'time_toggle_inactive_fg': '#999999',
+            'time_button_bg': 'white',
+            'time_button_fg': '#000000',
+            'time_button_active_bg': '#f5f5f5',
+            'time_button_active_fg': '#000000'
+        }
+
+
 @dataclass
 class TimePickerConfig:
     """Configuration for TimePicker widgets."""
@@ -70,6 +161,7 @@ def __init__(  # pylint: disable=R0917
         self.time_format = config.time_format
         self.hour_format = config.hour_format
         self.show_seconds = config.show_seconds
+        self.theme = config.theme if hasattr(config, 'theme') else theme
         self.selected_time = None
         self.popup = None
         self.time_callback = config.time_callback
@@ -313,52 +405,84 @@ def show_time_picker(self):
             self.logger.debug("show_time_picker called but popup already exists; ignoring")
             return
         self.logger.debug("Creating time picker popup")
-        self.popup = tk.Toplevel(self)
-        self.popup.withdraw()
-        self.popup.overrideredirect(True)
-        self.popup.resizable(False, False)
-
-        # Set theme colors
-        if self.hour_format == "12":
-            bg_color = "#f0f0f0"
-        else:
-            bg_color = "#ffffff"
-        self.popup.configure(bg=bg_color)
-
-        # Get the toplevel window from parent
-        toplevel = self.master.winfo_toplevel() if hasattr(self, "master") else None
-        if toplevel:
-            self.popup.transient(toplevel)
-        self.popup.after(100, self._setup_focus)
-
-        # Create time picker widget
-        self.time_picker = TimeSpinner(
-            self.popup,
-            hour_format=self.hour_format,
-            show_seconds=self.show_seconds,
-            time_callback=self._on_time_selected,
-            theme=self.theme if hasattr(self, "theme") else "light",
-            initial_time=self.selected_time,
-        )
-        self.logger.debug(
-            "TimeSpinner created with hour_format=%s show_seconds=%s initial=%r",
-            self.hour_format,
-            self.show_seconds,
-            self.selected_time,
-        )
+        try:
+            # Prefer using self as parent if it's a real widget; otherwise fallback to master
+            parent_for_popup = self
+            try:
+                _ = self.winfo_toplevel  # attribute presence check; may raise in fallback init
+            except Exception:  # pylint: disable=broad-except
+                parent_for_popup = self.master
+
+            self.popup = tk.Toplevel(parent_for_popup)
+            self.popup.withdraw()
+            self.popup.overrideredirect(True)
+            self.popup.resizable(False, False)
+        except tk.TclError as e:
+            # In headless/tests or when the application has been destroyed, avoid raising
+            self.logger.debug("Failed to create Toplevel popup: %s", e)
+            return
 
-        self._bind_time_picker_events(self.time_picker)
-        self.time_picker.pack(expand=True, fill="both", padx=2, pady=2)
+        try:
+            # Set theme colors from theme file
+            theme_colors = _load_theme_colors(self.theme)
+            bg_color = theme_colors.get('time_background', 'white')
+            self.popup.configure(bg=bg_color)
 
-        # Position the popup
-        self.popup.update_idletasks()
-        self._position_popup()
+            # Force update to ensure background color is applied
+            self.popup.update_idletasks()
+
+            # Get the toplevel window from parent
+            toplevel = self.master.winfo_toplevel() if hasattr(self, "master") else None
+            if toplevel:
+                self.popup.transient(toplevel)
+            self.popup.after(100, self._setup_focus)
+
+            # Create time picker widget
+            self.time_picker = TimeSpinner(
+                self.popup,
+                hour_format=self.hour_format,
+                show_seconds=self.show_seconds,
+                time_callback=self._on_time_selected,
+                theme=self.theme if hasattr(self, "theme") else "light",
+                initial_time=self.selected_time,
+            )
+
+            # Ensure TimeSpinner background matches popup background
+            self.time_picker.configure(bg=bg_color)
+            self.time_picker.canvas.configure(bg=bg_color)
+            self.time_picker.button_frame.configure(bg=bg_color)
+
+            self.logger.debug(
+                "TimeSpinner created with hour_format=%s show_seconds=%s theme=%s initial=%r",
+                self.hour_format,
+                self.show_seconds,
+                self.theme if hasattr(self, "theme") else "light",
+                self.selected_time,
+            )
+
+            self._bind_time_picker_events(self.time_picker)
+            self.time_picker.pack(expand=True, fill="both", padx=2, pady=2)
+
+            # Position the popup
+            self.popup.update_idletasks()
+            self._position_popup()
 
-        self.popup.deiconify()
-        self.popup.lift()
-        self.popup.bind("<Escape>", lambda e: self.hide_time_picker())
-        self._setup_click_outside_handling()
-        self.time_picker.focus_set()
+            self.popup.deiconify()
+            self.popup.lift()
+            self.popup.bind("<Escape>", lambda e: self.hide_time_picker())
+            self._setup_click_outside_handling()
+            self.time_picker.focus_set()
+        except tk.TclError as e:
+            # If any part of popup setup fails (e.g., app destroyed), cleanup and exit gracefully
+            self.logger.debug("Popup setup failed: %s", e)
+            try:
+                if self.popup:
+                    self.popup.destroy()
+            except Exception:  # pylint: disable=broad-except
+                pass
+            self.popup = None
+            self.time_picker = None
+            return
 
     def _position_popup(self):
         """Position the popup relative to the parent widget."""
@@ -367,7 +491,10 @@ def _position_popup(self):
         popup_height = self.popup.winfo_reqheight()
 
         # Get parent widget position
-        parent_y = self.master.winfo_rooty()
+        try:
+            parent_y = self.master.winfo_rooty()
+        except tk.TclError:
+            parent_y = 0
 
         # Position below the input area (left edge aligned)
         if hasattr(self, "button") and self.entry is not None:

tkface/themes/dark.ini

@@ -28,4 +28,19 @@ navigation_font = TkDefaultFont, 8
 navigation_hover_bg = #404040
 navigation_hover_fg = white
 weekend_bg = darkgray
-weekend_fg = white 
+weekend_fg = white
+
+time_background = #2d2d2d
+time_foreground = #cccccc
+time_spinbox_bg = #404040
+time_spinbox_button_bg = #353535
+time_spinbox_hover_bg = #4a4a4a
+time_spinbox_active_bg = #555555
+time_spinbox_outline = #555555
+time_separator_color = #cccccc
+time_label_color = #cccccc
+time_toggle_bg = #404040
+time_toggle_slider_bg = #555555
+time_toggle_outline = #555555
+time_toggle_active_fg = #ffffff
+time_toggle_inactive_fg = #777777