df9738ab17
Some checks failed
Build and Push Docker Image / build-and-push (push) Has been cancelled
106 lines
2.9 KiB
Markdown
106 lines
2.9 KiB
Markdown
# 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:
|
|
```python
|
|
{
|
|
"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:
|
|
```python
|
|
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
|
|
|
|
```python
|
|
# 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:
|
|
|
|
```bash
|
|
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.
|