Skip to content

Feature/dark light theme toggle #24

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Feature/dark light theme toggle #24

wants to merge 2 commits into from

Conversation

@Epik-Whale463
Copy link
Contributor

@Epik-Whale463 Epik-Whale463 commented Nov 3, 2025

🌙 Dark/Light Theme Mode Implementation Summary

🔧 Changes Made

  • Theme Infrastructure: Created ThemeContext and ThemeProvider for global theme state management
  • Toggle Component: Added ThemeToggle button with Moon/Sun icons in the header
  • Dark Mode Styling: Updated all components with proper dark mode colors:
    • Chat interface (sidebar, messages, input)
    • Message bubbles and conversation views
    • Modals and dropdowns
    • Leaderboard pages (Overview & Text tables)
  • Configuration: Configured Tailwind CSS with class-based dark mode strategy
  • Persistence: Theme preference saved in localStorage

✨ Features

  • ✅ Instant theme switching without page reload
  • ✅ Consistent color scheme (gray-800/900 backgrounds, light text in dark mode)
  • ✅ Theme preference persists across sessions
  • ✅ Accessible toggle button in header
  • ✅ All components responsive to theme changes

🧪 Testing

Tested across all pages:

  • ✅ Chat interface
  • ✅ Leaderboard Overview
  • ✅ Leaderboard Text page
  • ✅ Theme persists after page refresh

@Epik-Whale463
feat: add delete chat functionality with soft delete modal
cc8a0bb
@Epik-Whale463
feat: implement dark/light theme toggle across entire platform
51bc81b 
- Add ThemeContext with localStorage persistence
- Create ThemeToggle component with Moon/Sun icons
- Configure Tailwind CSS dark mode (class strategy)
- Add dark mode styles to all chat components
- Add dark mode to leaderboard pages (Overview & Text)
- Fix table row backgrounds and text colors in dark mode
- Use useTheme hook for reactive theme updates
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@Epik-Whale463