# Sojorn Theme System ## Overview The Sojorn app now supports two themes that users can switch between: ### 1. **Basic Theme** (Original) - Warm and welcoming design - Lighter feel with subtle pink tints - Slightly larger font sizes - Perfect for reading and connection ### 2. **Pop Theme** (New - "Awakening") - High contrast and energetic - Vibrant and defined structure - Sharp dividers and clean backgrounds - Editorial typography with professional feel ## How to Switch Themes Users can switch themes by: 1. Going to their Profile 2. Tapping Settings (gear icon) 3. Scrolling to the "Appearance" section 4. Selecting either "Basic" or "Pop" theme The selected theme is automatically saved and persists across app sessions. ## Technical Implementation ### Files Created/Modified: 1. **lib/providers/theme_provider.dart** (NEW) - State management for theme selection - Persists theme preference using SharedPreferences 2. **lib/theme/app_theme.dart** (UPDATED) - Refactored to support multiple themes - Dynamic color getters based on selected theme - Maintains backward compatibility 3. **lib/main.dart** (UPDATED) - Integrated theme provider - Watches theme changes and rebuilds UI 4. **lib/screens/profile/profile_settings_screen.dart** (UPDATED) - Added "Appearance" section with theme switcher - Visual radio button selection for themes 5. **lib/models/notification.dart** (NEW) - Notification model for app notifications - Supports appreciate, chain, and follow notifications 6. **lib/screens/notifications/notifications_screen.dart** (NEW) - Full notifications screen - Shows appreciates, chains, and follows - Empty state when no notifications 7. **lib/screens/home/home_shell.dart** (UPDATED) - Instagram-style header with centered "Sojorn" title - New post button on the left - Notifications button on the right - Professional and clean layout ## Theme Differences ### Basic Theme: - Background: Very pale lavender/pink (#F9F2F7) - Text: 19px body, softer navy - Spacing: More generous - Feel: Warm, welcoming, social ### Pop Theme: - Background: Clean pale lavender (#F9F6F9) - Text: 18px body, sharper navy (#0D1050) - Spacing: Tighter, more compact - Dividers: 2px thick, more defined - Feel: Energetic, vibrant, editorial ## Features Added ### Instagram-Style Header: - Centered "Sojorn" branding in elegant serif font - Left: New post button (⊞) - Right: Notifications button (🔔) - Clean white background with bottom border ### Notifications System: - Three types: Appreciates, Chains, Follows - Visual icons for each type - Unread indicator (purple dot) - Time stamps with relative formatting - Empty state with helpful message ## Future Enhancements Potential additions: - Notification badge count on header icon - Real-time notification updates - Push notifications - More theme options (Dark mode, Custom colors) - Per-feed theme customization