Conversation
Implements a complete theme system allowing users to customize the TUI appearance via config.yaml or CLI option. ## Features ### 7 Color Themes - **default** - Original moneyflow (Textual's built-in dark theme) - **berg** - Warm amber inspired by classic financial terminals - **nord** - Arctic blue palette - **gruvbox** - Retro warm colors with vintage terminal aesthetic - **dracula** - Modern dark theme with purple accents - **monokai** - Classic Sublime Text color scheme - **solarized-dark** - Scientifically designed for reduced eye strain All themes tuned for comfortable extended viewing with good text contrast. ### Configuration Methods **1. Config File (Persistent)** Create or edit ~/.moneyflow/config.yaml: ```yaml version: 1 settings: theme: berg ``` **2. CLI Override (Temporary)** ```bash moneyflow --theme nord moneyflow --mtd --theme dracula ``` Uses Click's choice validation - shows available themes if invalid name provided. ### Version Display App title now shows version information: - Development: git hash (e.g., "moneyflow [abc1234]") - Release: package version (e.g., "moneyflow [0.7.3]") ## Implementation ### Architecture **Theme Manager** (moneyflow/theme_manager.py): - Loads theme from config.yaml or CLI override - Validates theme names - Returns CSS file paths for Textual to load - Full test coverage (23 tests, 100% coverage) **Theme Files** (moneyflow/styles/themes/*.tcss): - Each theme is a complete standalone CSS file - Contains color variable definitions + all application styles - Variables must be defined in same file where used (Textual limitation) - Default theme uses Textual's built-in colors (only defines $panel-bg) **Version Helper** (moneyflow/version.py): - Gets git hash in development - Falls back to package version in releases - Displayed in app title for debugging ### Technical Challenges Solved **1. Textual CSS Variable Conflict** Problem: Textual's built-in CSS has `hatch: right $panel;` expecting $panel to be a percentage, but our themes defined it as a color: ``` Error: expected a percentage here; found '#1a1a1a' ``` Solution: Renamed `$panel` → `$panel-bg` throughout all CSS files to avoid the variable name conflict. **2. Cross-File Variable Scoping** Problem: Textual CSS doesn't support variable sharing across multiple files. Initially tried loading theme variables in one file and main styles in another, but variables weren't accessible across files. Solution: Each theme file is complete and standalone, containing both variable definitions and all application styles in a single file. **3. Color Balance** Iteratively refined all theme colors for: - Better text contrast on headers, footers, and table rows - Muted colors to reduce eye strain - Clear visual distinction for selected rows and UI elements - Specific fixes: - Darkened footer backgrounds for better white text contrast - Brightened breadcrumb accents for better visibility - Adjusted selected row highlights for better distinction ### Files Changed **Added:** - moneyflow/theme_manager.py - Theme loading and validation - moneyflow/version.py - Version/git hash display - moneyflow/styles/themes/*.tcss - 7 complete theme files - tests/test_theme_manager.py - Comprehensive test suite (23 tests) - docs/config/themes.md - Theme documentation **Modified:** - moneyflow/app.py - Load themes, display version in title - moneyflow/cli.py - Add --theme CLI option with validation - moneyflow/styles/moneyflow.tcss - Renamed $panel → $panel-bg - README.md - Added themes section - config.yaml.example - Added theme configuration example - mkdocs.yml - Added themes to docs navigation - scripts/generate_screenshots.py - Generate theme screenshots **Statistics:** - 18 files changed - 1,545 insertions, 9 deletions - 23 new tests (100% coverage) - All 1,104 existing tests still passing ## Testing ```bash # Run theme-specific tests uv run pytest tests/test_theme_manager.py -v # Run all tests uv run pytest -v # Test all themes load without errors for theme in default berg nord gruvbox dracula monokai solarized-dark; do uv run moneyflow --demo --theme $theme done ``` ## Documentation Full theme documentation at docs/config/themes.md including: - Visual comparison of all themes - Configuration instructions - CLI usage examples ### Building Docs Locally ```bash # Sync dependencies (includes mkdocs-material) uv sync # Generate theme screenshots uv run python scripts/generate_screenshots.py # Serve docs locally uv run mkdocs serve ``` Then open http://127.0.0.1:8000 → Configuration → Themes. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Implements a complete theme system allowing users to customize the TUI appearance via config.yaml or CLI option. ## Features ### 7 Color Themes - **default** - Original moneyflow (Textual's built-in dark theme) - **berg** - Warm amber inspired by classic financial terminals - **nord** - Arctic blue palette - **gruvbox** - Retro warm colors with vintage terminal aesthetic - **dracula** - Modern dark theme with purple accents - **monokai** - Classic Sublime Text color scheme - **solarized-dark** - Scientifically designed for reduced eye strain All themes tuned for comfortable extended viewing with good text contrast. ### Configuration Methods **1. Config File (Persistent)** Create or edit ~/.moneyflow/config.yaml: ```yaml version: 1 settings: theme: berg ``` **2. CLI Override (Temporary)** ```bash moneyflow --theme nord moneyflow --mtd --theme dracula ``` Uses Click's choice validation - shows available themes if invalid name provided. ### Version Display App title now shows version information: - Development: git hash (e.g., "moneyflow [abc1234]") - Release: package version (e.g., "moneyflow [0.7.3]") ## Implementation ### Architecture **Theme Manager** (moneyflow/theme_manager.py): - Loads theme from config.yaml or CLI override - Validates theme names - Returns CSS file paths for Textual to load - Full test coverage (23 tests, 100% coverage) **Theme Files** (moneyflow/styles/themes/*.tcss): - Each theme is a complete standalone CSS file - Contains color variable definitions + all application styles - Variables must be defined in same file where used (Textual limitation) - Default theme uses Textual's built-in colors (only defines $panel-bg) **Version Helper** (moneyflow/version.py): - Gets git hash in development - Falls back to package version in releases - Displayed in app title for debugging ### Technical Challenges Solved **1. Textual CSS Variable Conflict** Problem: Textual's built-in CSS has `hatch: right $panel;` expecting $panel to be a percentage, but our themes defined it as a color: ``` Error: expected a percentage here; found '#1a1a1a' ``` Solution: Renamed `$panel` → `$panel-bg` throughout all CSS files to avoid the variable name conflict. **2. Cross-File Variable Scoping** Problem: Textual CSS doesn't support variable sharing across multiple files. Initially tried loading theme variables in one file and main styles in another, but variables weren't accessible across files. Solution: Each theme file is complete and standalone, containing both variable definitions and all application styles in a single file. **3. Color Balance** Iteratively refined all theme colors for: - Better text contrast on headers, footers, and table rows - Muted colors to reduce eye strain - Clear visual distinction for selected rows and UI elements - Specific fixes: - Darkened footer backgrounds for better white text contrast - Brightened breadcrumb accents for better visibility - Adjusted selected row highlights for better distinction ### Files Changed **Added:** - moneyflow/theme_manager.py - Theme loading and validation - moneyflow/version.py - Version/git hash display - moneyflow/styles/themes/*.tcss - 7 complete theme files - tests/test_theme_manager.py - Comprehensive test suite (23 tests) - docs/config/themes.md - Theme documentation **Modified:** - moneyflow/app.py - Load themes, display version in title - moneyflow/cli.py - Add --theme CLI option with validation - moneyflow/styles/moneyflow.tcss - Renamed $panel → $panel-bg - README.md - Added themes section - config.yaml.example - Added theme configuration example - mkdocs.yml - Added themes to docs navigation - scripts/generate_screenshots.py - Generate theme screenshots - .markdownlint.json - Disabled MD060 (table formatting) to fix CI **Statistics:** - 19 files changed - 1,564 insertions, 9 deletions - 23 new tests (100% coverage) - All 1,104 existing tests still passing ## Testing ```bash # Run theme-specific tests uv run pytest tests/test_theme_manager.py -v # Run all tests uv run pytest -v # Test all themes load without errors for theme in default berg nord gruvbox dracula monokai solarized-dark; do uv run moneyflow --demo --theme $theme done ``` ## Documentation Full theme documentation at docs/config/themes.md including: - Visual comparison of all themes - Configuration instructions - CLI usage examples ### Building Docs Locally ```bash # Sync dependencies (includes mkdocs-material) uv sync # Generate theme screenshots uv run python scripts/generate_screenshots.py # Serve docs locally uv run mkdocs serve ``` Then open http://127.0.0.1:8000 → Configuration → Themes. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Implements a complete theme system allowing users to customize the TUI appearance via config.yaml or CLI option.
Features
7 Color Themes
All themes tuned for comfortable extended viewing with good text contrast.
Configuration Methods
1. Config File (Persistent)
Create or edit
~/.moneyflow/config.yaml:2. CLI Override (Temporary)
Validates input and shows available themes if invalid name provided.
Version Display
App title now shows version information: