Fix snackbar visibility and add color-aware message types

[markadelnawar]

Problem

1. Snackbar visibility issue: The default Material snackbar is difficult to read in dark mode due to poor contrast (white text on
   light background in some cases).
2. No visual distinction: All snackbar messages (errors, success, warnings) look the same, making it hard for users to quickly
   identify message severity.

Steps to Reproduce

1. Create a free account in Google AI Studio
2. Keep messaging the agent until you reach the daily limit (~21 messages)
3. Observe the rate limit error snackbar
   (or any flow that trigger showing the snackbar , ex eval saving or importing a session from a file)

Screenshot:

Proposed Solution

Add custom snackbar styling and color-aware message types:

Improvements

1. Fix visibility issues

   • Use theme-aware CSS variables for proper contrast
   • Ensure button text is visible in both light and dark modes

2. Add color-coded message types

   • Error messages: red background
   • Success messages: green background
   • Warning messages: orange background
   • Info messages: default theme background

3. Make it reusable

   • Create shared constants (SnackbarType.ERROR, SUCCESS, WARNING, INFO)
   • Allow other components to use the same pattern

I'm working on a PR for this and would appreciate feedback on the approach!

[markadelnawar]

Hi @wyf7107 This is my first contribution to ADK Web. I'd appreciate your feedback on the approach whenever you have time. Thanks for maintaining this project