Add dark/light theme toggle with modern switch UI and localStorage persistence

[Copilot]

Implements theme switching between dark and light modes with persistent user preference and a modern toggle switch interface.

Changes

• CSS: Introduced CSS custom properties for themeable colors (backgrounds, text, borders, cards, modals). Added [data-theme="dark"] selector with enhanced dark palette values for better contrast and readability.

• JavaScript: Added theme management functions:

  function toggleTheme() {
    const currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
    const newTheme = currentTheme === 'light' ? 'dark' : 'light';
    applyTheme(newTheme);
    localStorage.setItem('theme', newTheme);
  }

• HTML: Added modern toggle switch in header navigation with dynamic moon/sun icons that fade in/out based on active theme.

• UI Design: Implemented iOS-style toggle switch (60x32px) with:

  • Gradient purple background matching app theme
  • Smooth sliding circular indicator with shadow
  • Moon and sun icons with fade transitions
  • Hover effects with elevation and smooth cubic-bezier animations
  • Enhanced accessibility with tooltip

Screenshots

Modern Toggle Switch

Light Theme

Dark Theme

Theme preference persists across page reloads via localStorage. All UI elements (forms, cards, modals, overlays) support both themes with 0.3s CSS transitions. The dark theme features an improved color palette (#0f172a, #1e293b) with better contrast for enhanced readability.

Created from VS Code via the GitHub Pull Request extension.

Original prompt

Add dark and light theme tooggle

Created from VS Code via the GitHub Pull Request extension.

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[Hemavathi15sg]

@copilot try to add better ui for this

[Copilot]

@copilot try to add better ui for this

I've improved the UI with a modern iOS-style toggle switch design. Changes in commit 47acbc0:

Toggle Switch Improvements:

• Redesigned as a gradient pill-shaped switch (60x32px)
• Smooth sliding circular indicator with shadow
• Moon/sun icons that elegantly fade in/out
• Enhanced hover effects with elevation
• Cubic-bezier transitions for smooth animations

Enhanced Dark Theme:

• Richer, darker color palette (#0f172a, #1e293b)
• Better contrast and readability
• Improved visual hierarchy

Screenshots:

Toggle Switch Detail:

Light Theme:

Dark Theme: