Automatic Dark Mode with Time-based Switching

Overview

This PR introduces automatic dark mode switching based on user-defined time schedules. Users can now choose between manual theme control or automatic switching that changes between light and dark themes at specified hours.

Key Features

• Automatic Theme Switching: Theme automatically switches between light/dark based on time
• Configurable Schedule: Users can set custom start/end hours for dark mode
• Midnight Handling: Properly handles schedules that span across midnight
• Immediate Application: Theme updates instantly when changing modes or times

Implementation Details

Theme Mode Selection

• Added theme mode selector (auto/manual) using React Select
• Implemented immediate theme checking when switching to auto mode
• Added time input fields for configuring auto mode schedule
• Styled inputs to match existing design system

Theme Logic

• Added logic to handle time-based theme switching
• Implemented cross-midnight schedule support
• Added immediate theme application on mode/time changes
• Updated theme preferences structure to support auto mode

Analytics

• Added separate tracking for theme mode (auto/manual)
• Added THEME_MODE attribute to analytics events
• Maintained existing theme color change tracking
• Added user identification for theme preferences

UI/UX Improvements

• Consistent styling with existing settings
• Clear visual hierarchy in theme settings
• Proper spacing and alignment in settings panel
• Responsive design support