Add flash message categories for theme-consistent styling

[Copilot]

Flash messages were using default styling instead of theme-specific overrides because they lacked category parameters. On RetroIPTV and retro-magazine themes, this meant messages displayed with bright colors instead of the intended #48494a text.

Changes

Added categories to 19 flash messages in app.py:

Success (12):

• Tuner operations: switch, update URLs, delete, rename
• User management: add, delete, signout sessions
• Password changes, log clearing

Warning (4):

• Duplicate username, admin account protection, unauthorized access

Error (2):

• Invalid password, admin deletion attempt

Example

# Before - no category, uses flash-default styling
flash(f"Active tuner switched to {new_tuner}")

# After - uses flash-success with theme-specific colors
flash(f"Active tuner switched to {new_tuner}", "success")

All flash messages now properly inherit theme-specific styles (e.g., #48494a text on RetroIPTV/retro-magazine themes, bright colors on dark theme, etc.).

Original prompt

Problem

After PR #88 was merged, flash messages have visibility issues on certain themes - specifically white text appearing on white backgrounds, making messages unreadable.

Root Cause

The flash message CSS in static/css/change_tuner.css (lines 354-402) only has theme-specific overrides for body.light theme. All other themes (retroiptv, retro-magazine, directv, comcast, retro-aol, tvguide1990, dark) are using the default flash message colors which don't provide sufficient contrast against their background colors.

Solution Required

Add theme-specific flash message color overrides for ALL themes to ensure proper text contrast and readability. Each theme needs explicit color definitions for all flash message types (success, warning, error/danger, info).

Files to Modify

static/css/change_tuner.css

Add theme-specific overrides after line 402 for the following themes:

1. body.dark - Ensure good contrast on dark backgrounds
2. body.retroiptv - Match the RetroIPTV theme color palette
3. body.retro-magazine - Match the Retro Magazine theme (white background, black text)
4. body.directv - Match the DirecTV blue theme
5. body.comcast - Match the Comcast theme
6. body.retro-aol - Match the Retro AOL theme (teal/cyan palette)
7. body.tvguide1990 - Match the TV Guide 1990 theme

Flash Message Types to Style

Each theme needs styles for:

• .flash-message.flash-success and .flash-message.flash-default (green success messages)
• .flash-message.flash-warning (yellow/amber warning messages)
• .flash-message.flash-error and .flash-message.flash-danger (red error messages)
• .flash-message.flash-info (blue info messages)

Guidelines

1. Use high contrast colors - Text must be clearly readable against the message background
2. Match theme aesthetics - Colors should fit the overall theme design
3. Maintain consistency - Use similar color logic as the existing body.light theme overrides
4. Test on dark and light backgrounds - Some themes have light backgrounds (retro-magazine), others have dark
5. Use !important sparingly - Only if absolutely needed to override existing styles
6. Keep opacity values appropriate - Background opacity should provide contrast while not being too opaque

Expected Result

Flash messages should be clearly visible and readable on all themes with appropriate color contrast between text and background.

Testing

The fix should be validated by:

1. Triggering flash messages on each theme
2. Verifying text is readable (not white on white or similar issues)
3. Checking all message types (success, warning, error, info) on each theme

Branch Requirements

• Base branch: dev
• Work must be done from the dev branch only
• Do not modify any other files unless absolutely necessary for the fix

This pull request was created from Copilot chat.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.