patrick/sojorn
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity
sojorn/sojorn_app/THEME_SYSTEM.md
Patrick Britton b9351b76ae Reframe Sojorn as Friends-First Social Network 
## Remove All 'Calm' References & Reframe Platform Identity

###  Documentation Updates
- **Deleted**: CALM_UX_GUIDE.md (outdated philosophy document)
- **Updated**: All documentation to remove 'calm' terminology
- **Reframed**: Platform as 'friends-first' instead of 'calm'

###  Design System Changes
- Replace 'calm & elegant' with 'warm & welcoming'
- Update theme descriptions to focus on friendliness
- Change 'calm velocity' to 'authentic engagement'
- Update UI microcopy for friendly tone

###  Content Updates
- Philosophy documents reframe for social connection focus
- Design guides emphasize warmth over calmness
- API documentation updated for new terminology
- User-facing text changed to friendly language

###  Key Terminology Changes
- 'Calm design'  'Warm, welcoming design'
- 'Calm velocity'  'Authentic engagement'
- 'Calm UI'  'Friendly UI'
- 'Structural calm'  'Structural friendliness'
- 'Calm platform'  'Friends-first platform'

###  Platform Focus Shift
- From: Text-based calm platform
- To: Friends-first social network prioritizing genuine connections
- Emphasis on social connection over mindfulness
- Focus on warmth and friendliness in design

###  Files Modified
- 15+ documentation files updated
- Flutter app UI text updated
- Design system rebranded
- Philosophy documents reframed
- API documentation updated

The platform is now positioned as a warm, welcoming social network that prioritizes genuine human connections over calm minimalism.
2026-01-30 09:49:36 -06:00

2.9 KiB
Raw Blame History

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