Feat: Add light and dark theme toggle support to ADK Web UI

[omarcevi]

This PR implements a comprehensive theme toggle system that allows users to switch between light and dark modes in the ADK Web UI, and includes extensive improvements to light mode visibility and usability.

**Solves issue: #7 **

Edit: Reopened for CLA

---

Motivation

During conversations with Googlers who presented at the Google Developer Day Istanbul event, they mentioned how challenging it is to present with ADK because it doesn't have a light mode, making it difficult to see in presentations and demos. This feature addresses that pain point by providing a theme toggle that allows presenters and users to switch to a light mode that's more suitable for presentations, bright environments, and user preference.

Additionally, after the initial implementation, extensive testing revealed numerous light mode visibility issues that needed to be addressed for a complete, production-ready experience.

---

Summary of Changes

Core Features

• Implemented a ThemeService with Angular signals for reactive theme state management
• Created a ThemeToggle component with Material icon button for easy theme switching
• Added theme preference persistence using localStorage
• Defined separate light and dark theme configurations using Material Design 3
• NEW: Added 240+ lines of light theme CSS variables and component-specific styling
• NEW: Fixed all dialog, menu, and notification visibility issues in light mode

Theme System

• Added light and dark theme definitions in _theme-colors.scss using Material's mat.define-theme()
• Extended src/styles.scss with dual theme support using CSS classes (.light-theme, .dark-theme)
• Created 100+ CSS custom properties for comprehensive theme coverage across both modes
• Applied proper Material component theming for selects, form fields, dialogs, and expansion panels
• NEW: Added CSS variables for token streaming toggle (label, track, and handle colors)
• NEW: Added CSS variables for tool item backgrounds and borders (--builder-tool-item-*)
• NEW: Added z-index fixes for overlays and menus (9999 and 10000 respectively)
• NEW: Added menu and snackbar styling with theme-aware colors

UI/UX Improvements

Original:

• Integrated theme toggle button in the side panel header for easy access
• Fixed component visibility issues in light theme (select dropdowns, dialogs, text inputs)
• Improved tooltip styling with smaller font size (11px) and proper positioning
• Added padding to select dropdown options for better text spacing
• Fixed expansion panel styling (borders, focus states, shadows)
• Updated markdown component to inherit theme colors instead of hardcoded values
• Fixed dialog text colors to use CSS variables for proper theme adaptation

Additional Improvements:

• Dialog Components:

  • Fixed built-in tool dialog with visible tool item backgrounds and borders
  • Fixed confirmation dialog with proper form field styling and placeholder behavior
  • Fixed view image dialog background and close button visibility
  • Added Material form field overrides for all dialogs
  • Implemented proper placeholder behavior (hidden by default, shown on focus)

• Builder Mode:

  • Enhanced builder mode action buttons with proper sizing (40x40px), borders, and shadows
  • Fixed builder assistant panel positioning to not cover action buttons
  • Adjusted panel to start at top: 72px with proper z-index hierarchy
  • Improved button styling with gap spacing and better hover states

• Chat Components:

  • Fixed token streaming toggle visibility with proper colors for both states
  • Fixed menu overlay issues where menus appeared behind input placeholders
  • Added z-index positioning for chat input fields

• Builder Components:

  • Updated builder tabs to use CSS variables throughout (~145 lines modified)
  • Updated canvas component for light mode (~172 lines modified)
  • Fixed all text colors for visibility in both themes

Component Changes

Original:

• ThemeService: Core service managing theme state with signals and localStorage persistence
• ThemeToggle: Standalone component with Material button and dynamic icon based on current theme
• Side panel: Integrated theme toggle, improved icon tooltips, added proper tooltip positioning
• Select dropdown: Added left/right padding for better readability
• Dialog components: Fixed text colors to use theme-aware CSS variables
• Markdown component: Changed from hardcoded colors to theme-inherited colors

Additional Changes:

• Built-in Tool Dialog: All text colors updated, tool items have visible backgrounds
• Confirmation Dialog: Material form field overrides, placeholder behavior, tool info styling
• View Image Dialog: Host styling with theme-aware background
• Builder Tabs: Comprehensive theme variable refactoring
• Canvas: Complete color system update for light mode support
• Builder Assistant: Positioning adjustments to prevent button overlap
• Chat Panel: Z-index fixes for proper menu layering
• Chat Component: Token streaming toggle comprehensive styling

---

Token Streaming Toggle Improvements

Visibility Enhancements

• Dark Mode:
  • Label: #9aa0a6 → #e8eaed (brighter, more visible)
  • Unselected track: #5f6368
  • Unselected handle: #9aa0a6
• Light Mode:
  • Label: #202124 (black text)
  • Unselected track: #c8c6c6 (visible light gray)
  • Unselected handle: #5f5e5e
• Added all state overrides: unselected, selected, hover, focus

---

Bug Fixes

1. Menu Overlay Issues

• Fixed menus appearing behind input placeholders
• Added proper z-index hierarchy:
  • Overlay container: 9999
  • Menu panel: 10000
  • Input fields: 1

2. Dialog Text Readability

• Fixed all dialog text colors for light mode
• Tool names, descriptions, and labels now properly visible
• Added !important flags where Material styles needed override

3. Form Field Placeholders

• Implemented correct placeholder behavior (only show when focused)
• Fixed text overlap issues in agent tool creation dialog
• Removed placeholder attribute from HTML, using mat-label instead

4. Builder Assistant Panel

• Prevented panel from covering action buttons
• Maintained full functionality with better UX
• Action buttons always accessible at top-right

5. Snackbar/Notification Visibility

• Added proper background and text colors for warnings/notifications
• Both light and dark modes fully supported

6. Graph/Image Dialog

• Added proper background color matching theme
• Fixed close button visibility in both modes

7. Builder Mode Action Buttons

• Fixed "wonky" appearance with proper sizing and styling
• Added borders, shadows, and consistent spacing
• Improved icon centering with flexbox

---

Testing

Unit Tests

• Added unit tests for ThemeService (theme initialization, toggling, persistence)
• Added unit tests for ThemeToggle component
• All tests passing (410/411, 1 pre-existing failure unrelated to changes)

Manual Testing Checklist

• [x] Light mode: All dialogs have readable text
• [x] Light mode: Tool items have visible backgrounds and borders
• [x] Light mode: Menus appear above all content
• [x] Light mode: Notifications/warnings are visible
• [x] Light mode: Token streaming toggle is clearly visible
• [x] Light mode: Graph/image dialogs have proper backgrounds
• [x] Dark mode: All existing functionality maintained
• [x] Builder mode: Action buttons remain accessible and well-styled
• [x] Builder mode: Assistant panel doesn't cover buttons
• [x] Form placeholders behave correctly (show on focus, hide otherwise)
• [x] Theme preference persists across page refreshes
• [x] No console errors or warnings
• [x] Smooth transition between light and dark modes

---

Files Changed

16 files changed, 594 insertions(+), 278 deletions(-)

Theme System

• _theme-colors.scss - Theme definitions
• src/styles.scss - Dual theme CSS classes and 240+ custom properties
• src/app/core/services/theme.service.ts - Theme management service (new)
• src/app/core/services/theme.service.spec.ts - Tests (new)
• src/app/components/theme-toggle/ - Theme toggle component (new)

Dialog Components

• src/app/components/built-in-tool-dialog/built-in-tool-dialog.component.scss
• src/app/components/confirmation-dialog/confirmation-dialog.component.scss
• src/app/components/confirmation-dialog/confirmation-dialog.component.html
• src/app/components/view-image-dialog/view-image-dialog.component.scss
• src/app/components/add-item-dialog/ - Theme-aware styling

Builder Mode Components

• src/app/components/builder-tabs/builder-tabs.component.* - Comprehensive theming
• src/app/components/canvas/canvas.component.scss - Light mode support
• src/app/components/builder-assistant/builder-assistant.component.scss - Positioning fixes
• src/app/components/chat/chat.component.scss - Action button improvements

Chat Components

• src/app/components/chat-panel/chat-panel.component.scss - Z-index fixes
• src/app/components/chat/chat.component.ts - Theme integration

Other

• src/app/components/side-panel/ - Integration and tooltip improvements
• src/app/components/markdown/ - Removed hardcoded colors
• src/app/core/services/agent-builder.service.ts - Theme integration

---

Testing Instructions

1. Build and run the application
2. Click the theme toggle button (moon/sun icon) in the side panel header
3. Verify smooth transition between light and dark modes
4. Check that theme preference persists across page refreshes
5. Test all UI components in both themes:
   • Agent selector dropdown
   • Create new agent dialog
   • Built-in tool selection dialog
   • Agent tool creation dialog (with placeholder behavior)
   • Chat messages and markdown rendering
   • Expansion panels (Artifacts, Sessions, Eval tabs)
   • Tooltips on icons and buttons
   • Token streaming toggle
   • Graph/image viewer dialog
   • Warning/notification messages
   • Builder mode:
     • Action buttons (check, close, assistant)
     • Builder assistant panel
     • Canvas and node styling
     • Builder tabs
6. Verify no console errors or warnings

---

Checklist

• [x] Code follows Angular and Material Design best practices
• [x] Used CSS custom properties for theme flexibility
• [x] Added unit tests for new services and components
• [x] Verified all existing functionality works in both themes
• [x] No breaking changes to existing code
• [x] Minimal changes to maintain compatibility with upstream repository
• [x] Theme preference persists using localStorage
• [x] All Material components properly themed
• [x] All dialogs readable in light mode
• [x] Proper z-index hierarchy for overlays and menus
• [x] Form placeholders behave correctly
• [x] Builder mode fully functional with accessible controls

---

Visual Improvements

Before

• Only dark mode available
• Light mode had poor contrast and readability
• Dialogs had invisible text and elements
• Menus appeared behind placeholders
• Builder buttons were "wonky" and poorly styled
• Token streaming toggle was hard to see
• No theme toggle available for presenters

After

• Complete light/dark mode toggle with persistence
• Full light mode support with proper contrast
• All text readable in both themes
• Clean, professional button styling
• Proper z-index layering for all overlays
• Consistent theme variables throughout
• Better user experience with accessible controls
• Perfect for presentations and demos
• Smooth theme transitions

Screenshots

License

This contribution is submitted under the Apache 2.0 License as required by the ADK project.

Notes

• This implementation uses Angular signals for reactive state management (Angular 19 feature)
• Material Design 3 theming system is used for consistency
• CSS custom properties allow for easy theme customization in the future
• The toggle button is placed in the side panel header for easy access
• All changes maintain backward compatibility with existing code

[omarcevi]

Hey i dont know if this is good enough so waiting for reviews on it @boyangsvl

[wyf7107]

This looks very promising! I can help review this PR, let me know when the PR is ready and I can check it out on my own branch and check the result

[omarcevi]

Hey @wyf7107 thank you for your help, please review whenever you're available. :) FYI @boyangsvl

[wyf7107]

Great! Will take a look today, this looks very promising!

[wyf7107]

Looks good, I will approve this, the only color missing is the add tool dialog title in visual builder. Right now its white should be black. We can send follow up PR for it, everything else looks amazing, thank you for the work!

[omarcevi]

Thank you for the review, glad you liked it.

I missed that part, i can edit it quickly and commit it if it's alright with you?

[wyf7107]

@omarcevi Do you mind fixing the test file? Should be fairly simple, also I left a comment in the package-lock.json

[omarcevi]

@wyf7107 i have addressed the white color dialogue title, adjusted the tests, and added "peer": true for all entries

[wyf7107]

@wyf7107 i have addressed the white color dialogue title, adjusted the tests, and added "peer": true for all entries

Oh you don't have to change the package.json, to simplify, could you revert all changes from pacakge.json and package-lock.json?

[omarcevi]

@wyf7107 i have addressed the white color dialogue title, adjusted the tests, and added "peer": true for all entries

Oh you don't have to change the package.json, to simplify, could you revert all changes from pacakge.json and package-lock.json?

yeah sorry for the confusion, i have reverted both files to their original state

[omarcevi]

@wyf7107 hey seems like one of the checks is failing? Anything i need to do here?

[Bashar]

amazing work @omarcevi althogh i'm a darkmode fan but this looks amazing! well done :muscle:

-Bashar GDG Kuwait

[omarcevi]

amazing work @omarcevi althogh i'm a darkmode fan but this looks amazing! well done :muscle:

-Bashar GDG Kuwait

Hey @Bashar yeah same here ui is not my strong suit but had fun with this one!

Thank you for the feedback!

-Omar GDG Istanbul 🚀

[wyf7107]

I am helping resolving some issues on our side, and once it is resolved this should be merged automatically

[meteatamel]

Great work @omarcevi !