thechart/docs/MENU_THEMING.md

Menu Theming Documentation

Overview

TheChart application now supports full menu theming that integrates seamlessly with the application's theme system. All menus (File, Tools, Theme, Help) will automatically adopt colors that match the selected application theme.

Features

Automatic Theme Integration

• Menus automatically inherit colors from the current application theme
• Background colors are slightly adjusted to provide subtle visual distinction
• Hover effects use the theme's accent colors for consistency

Supported Menu Elements

• Main menu bar
• All dropdown menus (File, Tools, Theme, Help)
• Menu items and separators
• Hover/active states
• Disabled menu items

Theme Colors Applied

For each theme, the following color properties are applied to menus:

• Background: Slightly darker/lighter than the main theme background
• Foreground: Uses the theme's text color
• Active Background: Uses the theme's selection/accent color
• Active Foreground: Uses the theme's selection text color
• Disabled Foreground: Grayed out color for disabled items

Technical Implementation

ThemeManager Methods

get_menu_colors() -> dict[str, str]

Returns a dictionary of colors specifically optimized for menu theming:

{
    "bg": "#edeeef",           # Menu background
    "fg": "#5c616c",           # Menu text
    "active_bg": "#0078d4",    # Hover background
    "active_fg": "#ffffff",    # Hover text
    "disabled_fg": "#888888"   # Disabled text
}

configure_menu(menu: tk.Menu) -> None

Applies theme colors to a specific menu widget:

theme_manager.configure_menu(menubar)
theme_manager.configure_menu(file_menu)

Automatic Updates

When themes are changed using the Theme menu:

1. The new theme is applied to all UI components
2. The menu setup is refreshed (_setup_menu() is called)
3. All menus are automatically re-themed with the new colors

Usage Example

# Create menu
menubar = tk.Menu(root)
file_menu = tk.Menu(menubar, tearoff=0)

# Apply theming
theme_manager.configure_menu(menubar)
theme_manager.configure_menu(file_menu)

# Menus will now match the current theme

Color Calculation

The menu background color is automatically calculated based on the main theme:

• Light themes: Menu background is made slightly darker than the main background
• Dark themes: Menu background is made slightly lighter than the main background

This provides subtle visual distinction while maintaining theme consistency.

Supported Themes

Menu theming works with all available themes:

• arc
• equilux
• adapta
• yaru
• ubuntu
• plastik
• breeze
• elegance

Testing

A test script is available to verify menu theming functionality:

cd /home/will/Code/thechart
.venv/bin/python scripts/test_menu_theming.py

This script creates a test window with menus that can be used to verify theming across different themes.