Add Dark Mode Support - Resolves #246

[ahmedhassayoune]

🌙 Add Dark Mode Support

Summary

This PR adds full dark mode support to the DevPortfolio template, addressing issue 246 and providing users with a seamless light/dark theme toggle experience that respects system preferences and persists user choice.

See a live example here.

Features Added

🎨 Dark Mode Toggle Component

• Created a new DarkModeToggle.jsx React component with animated sun/moon icons
• Integrated toggle button in the header (visible on desktop and mobile)
• Smooth icon transitions using Tailwind CSS animations
• LocalStorage persistence for user theme preference

🌓 Theme System

• Implemented CSS variables-based theming in global.css
• Added comprehensive color tokens for both light and dark modes using OKLCH color space
• Created @custom-variant dark for Tailwind dark mode support
• Added theme initialization script to prevent flash of unstyled content (FOUC)

🎯 Component Updates

Updated all components with dark mode variants:

• Header: Dark mode support for navigation links and background
• Hero: Dual gradient overlays for light/dark modes with animated SVG patterns
• About: Dark text colors for headings, paragraphs, and skill badges
• Projects: Dark backgrounds for project cards with hover states
• Experience: Timeline and card styling for dark mode
• Education: Card and text styling for dark mode
• Footer: Complete footer styling with dark mode support

📦 Dependencies

Added new packages to support the feature:

• @astrojs/react - React integration for Astro
• @radix-ui/react-slot - Composable component primitives
• lucide-react - Icon library
• tailwindcss-animate - Animation utilities
• tw-animate-css - Additional animation support

⚙️ Configuration

• Updated tsconfig.json with React JSX support and path aliases
• Created tailwind.config.cjs with dark mode class strategy
• Enhanced global.css with theme tokens and base styles

Technical Implementation

Theme Detection Logic:

1. Checks localStorage for saved theme preference
2. Falls back to system preference via prefers-color-scheme media query
3. Applies theme class to HTML element before page render to prevent FOUC

Color System:

• Uses modern OKLCH color space for better color consistency
• Comprehensive design tokens including primary, secondary, accent, and destructive colors
• Full support for chart colors and sidebar components

Responsive Design

• Dark mode toggle visible on all screen sizes
• Optimized header layout using CSS Grid for proper toggle positioning
• Mobile-first approach maintained throughout

User Experience

• Instant theme switching with no page reload
• Smooth transitions for all theme-aware components
• Persistent theme choice across sessions
• Respects system preferences by default

Testing Checklist

• Dark mode toggle switches theme correctly
• Theme persists after page reload
• System preference detection works
• No FOUC on initial page load
• All components styled for both themes
• Hover states work in both themes
• Text remains readable in both modes
• Animations work smoothly

Screenshots

Light Mode	Dark Mode

Breaking Changes

None - this is a purely additive feature.

Notes for Reviewers

• The implementation uses Tailwind's class-based dark mode strategy
• All color changes use the dark: variant prefix
• Theme switching is handled via JavaScript for immediate response
• The solution is compatible with Astro's static site generation