feat(companion): dark mode

[dhairyashiil]

What does this PR do?

Adds system dark mode support to the Companion app. The UI now follows the device theme across iOS, Android, and web, including tabs, screens, navigation, and the StatusBar.

Updates since last revision

• EventTypeListItem.tsx: Added useColorScheme hook with dynamic icon colors, dark mode backgrounds (dark:bg-black), borders (dark:border-[#38383A]), and ripple effects
• EventTypeListItemParts.tsx: Added dark mode support for:
  • Title and link text (dark:text-white, dark:text-[#8E8E93])
  • Description text
  • All badges (Duration, Hidden, Seats, Price, Repeats, Requires confirmation) with dark backgrounds and white text
  • Action buttons (Preview, Copy link, More) with dark borders and backgrounds

Font Color Fixes

Fixed font visibility issues in booking-related components where cal-* colors were invisible in dark mode:

• BookingListItem.tsx: Added useColorScheme hook with dynamic icon colors, dark mode backgrounds and borders
• BookingListItemParts.tsx: Added dark:text-white and dark:text-[#8E8E93] to all text elements, dark mode button styling
• RecurringBookingListItem.tsx: Added dark mode support for all text, icons, and button colors
• BookingListScreen.tsx: Added dark mode support for month headers, loading/error/empty states, FlatList containers, and all Cancel/Reject modals (iOS and Android)

Phase 2: Tab Pages

• Event Types page (index.tsx, index.ios.tsx): Added dark: variants for loading, error, empty, and filtered states; modals (create, action, new, delete) now support dark mode; search bar and buttons adapt to theme
• Bookings page (index.tsx): Added dark mode support for filter controls, dropdown menu, and search input
• Availability page (index.tsx): Updated blurEffect and barTintColor to adapt to dark/light mode
• More page (index.tsx): Added dark mode support for menu items, delete account link, sign out button, and footer text

Phase 1: Core Infrastructure

• ScreenWrapper.tsx: Added dark: variants for loading, error, empty, and default states using iOS system colors (dark:bg-black, dark:bg-[#1C1C1E], dark:text-gray-100)
• Header.tsx: Added useColorScheme hook with iOS system colors object for dynamic icon/text colors, dark mode support for logo, filter dropdowns, sort menus, and profile section

Base Infrastructure

• Follows device theme via userInterfaceStyle: "automatic" in app.json (iOS/Android/web)
• Switches navigation theme (DefaultTheme/DarkTheme) and StatusBar using useColorScheme
• Updates tab bar, backgrounds, borders, and blur effects to match light/dark
• Uses Tailwind darkMode: "media" and prefers-color-scheme in CSS

Mandatory Tasks (DO NOT REMOVE)

• I have self-reviewed the code (A decent size PR without self-review might be rejected).
• I have updated the developer docs in /docs if this PR makes changes that would require a documentation change. N/A - companion app internal changes only.
• I confirm automated tests are in place that prove my fix is effective or that my feature works.

How should this be tested?

1. Run the companion app on iOS simulator or device
2. Toggle system appearance between Light and Dark mode in device settings
3. Verify the following screens adapt correctly:
   • Event Types List: Cards should have dark backgrounds, white text, and visible badges
   • Booking List Items: All text (date, time, title, attendees) should be readable in dark mode
   • Cancel Event Modal: Title, description, input field, and buttons should be styled correctly
   • Recurring Booking Items: All text and action buttons should be visible
   • Availability, More pages: All previously verified dark mode support

Human Review Checklist

• Critical: Verify Event Types list items have dark backgrounds (not white) in dark mode
• Critical: Verify Booking list items have dark backgrounds and visible title text
• Check EventTypeListItem badges (15m, Hidden, Requires confirmation) are visible with dark backgrounds
• Verify icon colors adapt correctly (should be white in dark mode, dark in light mode)
• Check Cancel Event modal renders correctly in dark mode (iOS and Android)
• Verify iOS system colors (#000000, #1C1C1E, #38383A, #8E8E93) match expected design
• Test on actual device after rebuilding the app (changes may require fresh build)

Checklist

• My code follows the style guidelines of this project
• I have checked if my changes generate no new warnings

---

Link to Devin run: https://app.devin.ai/sessions/8811e2e20a67433da57d5bcae9a17d2d
Requested by: Dhairyashil Shinde (@dhairyashiil)

[cubic-dev-ai]

No issues found across 5 files