Enhancement: Add Dark Mode Support with Theme Switching

[yeshuman]

🌙 Feature Request: Dark Mode Support

Problem

The Agent Chat UI currently only supports light mode, which can be challenging for users who prefer dark interfaces or work in low-light environments. Many modern applications offer theme switching as a standard feature.

Proposed Solution

Implement comprehensive dark mode support with a three-way theme switcher:

• Light Mode - Current default appearance
• Dark Mode - Dark theme optimized for low-light usage
• System Mode - Automatically follows user's OS preference

📚 Complete Implementation Guide

I've created a comprehensive 708-line implementation guide that covers everything needed for a professional dark mode implementation:

🔗 View Complete Implementation Guide (GitHub Gist)

This guide includes:

🛠️ Technical Implementation

• Complete CSS variables system using semantic colors
• Next-themes integration with SSR support
• Theme provider and switcher components
• Component styling patterns (do's and don'ts)

🎨 Design System

• OKLCH color space for consistent theming
• Proper contrast ratios (WCAG AA compliance)
• Theme-aware tool call and result components
• Brand logo adaptation across themes

📋 Comprehensive Coverage

• Dependencies & Setup - Package installation and configuration
• Project Structure - Recommended file organization
• CSS Variables - Semantic color system with light/dark variants
• Theme Provider - React provider implementation with SSR handling
• Theme Switcher - Both cycling button and dropdown variants
• Component Patterns - Do's and don'ts with real examples
• Integration Steps - Step-by-step implementation checklist
• Common Issues - Troubleshooting hydration, flashing, contrast
• Best Practices - Accessibility, performance, UX guidelines
• Testing Checklist - Comprehensive testing strategy

Benefits

• ✅ Better UX - Reduces eye strain in low-light environments
• ✅ Accessibility - Follows WCAG guidelines for contrast
• ✅ Modern Standard - Expected feature in contemporary applications
• ✅ User Preference - Respects system-level theme settings
• ✅ Professional Polish - Enhances overall application appeal

Reference Implementation

The implementation guide is based on a successful real-world implementation in a similar Agent Chat project. It includes:

• Ready-to-copy code snippets for immediate use
• Tested solutions for common implementation challenges
• Accessibility considerations throughout
• Performance optimizations and best practices

Community Impact

This enhancement would benefit the entire Agent Chat UI community and could serve as a reference for other LangChain UI projects. The implementation follows React and Next.js best practices while maintaining backward compatibility.

Next Steps

Would the maintainers be interested in this enhancement? I'm happy to:

• Provide additional clarification on any implementation details
• Assist with integration planning
• Contribute to the implementation if desired

Labels

enhancement, ui/ux, accessibility

---

This feature request includes a comprehensive 708-line implementation guide with real-world testing and proven solutions.