* feat(companion): add dark mode support using NativeWind system preference
- Set userInterfaceStyle to 'automatic' in app.json to follow system preference
- Add useColorScheme hook from NativeWind to detect color scheme
- Update root layout with dynamic colors for StatusBar, containers, and modals
- Update tabs layout with dynamic colors for tab bar and icons
- Update all Stack.Screen options to use dynamic background colors and blur effects
- Support both iOS and Android with appropriate dark mode colors
Co-Authored-By: peer@cal.com <peer@cal.com>
* fix(companion): use NativeWind dark: variant classes for automatic dark mode
Use dark: Tailwind variant classes instead of conditional logic based on
useColorScheme for the container background. This ensures NativeWind
automatically applies dark mode styles based on system preference.
Co-Authored-By: peer@cal.com <peer@cal.com>
* fix(companion): use darkMode 'media' for automatic dark mode detection
- Changed darkMode from 'class' to 'media' in tailwind.config.js
- Updated global.css to use @media (prefers-color-scheme: dark) instead of .dark selector
- This ensures NativeWind properly detects system color scheme on iOS/Android
Co-Authored-By: peer@cal.com <peer@cal.com>
* dark mode starting
* feat(companion): add dark mode support to core infrastructure (Phase 1)
* feat(companion): add dark mode support to tab pages (Phase 2)
* fix(companion): add dark mode support to booking list components for font visibility
* fix(companion): add dark mode support to EventTypeListItem components
* event types and bookings page
* Availability list page
* more page, and some ui fixes
* feat(companion): add dark mode support to detail screens and modals
- BookingDetailScreen (iOS & Android): dynamic colors for all UI elements
- AvailabilityDetailScreen (iOS & Android): dark mode backgrounds and text
- profile-sheet (iOS & Android): dark mode support for profile modal
- RescheduleScreen (all platforms): dark mode for date/time pickers
- EditLocationScreen (iOS & Android): dark mode for location editor
- AddGuestsScreen: partial dark mode implementation (in progress)
Uses iOS system colors: #000000 (black), #1C1C1E (secondary), #FFFFFF (white), #38383A (border), #8E8E93 (text secondary)
* fix typecheck and lint
* feat(companion): add dark mode support to remaining screens
- ScreenWrapper: Fix hardcoded #800020 color with dynamic destructive color
- EditAvailabilityDayScreen: Add dark mode for Android/Web and iOS
- EditAvailabilityHoursScreen: Add dark mode for Android/Web and iOS
- EditAvailabilityNameScreen: Add dark mode for Android/Web and iOS
- EditAvailabilityOverrideScreen: Add dark mode for Web, iOS, and Android
- MarkNoShowScreen: Add dark mode with dynamic colors for no-show states
- MeetingSessionDetailsScreen: Add dark mode for session details
- ViewRecordingsScreen: Add dark mode for recordings list
Uses iOS system colors (#000000, #1C1C1E, #38383A, #8E8E93) and
useColorScheme hook for automatic theme detection.
* fix(companion): fix iOS modal dark mode backgrounds for transparent glass UI
* fix(companion): fix dark mode for booking action screens in transparent background mode
* fix(companion): fix Android dark mode for transparent background in EditAvailabilityOverrideScreen
* refactor(companion): centralize dark mode colors and align with main website
- Update tailwind.config.js with centralized color definitions
- Create constants/colors.ts for inline style color references
- Replace iOS system colors with main website neutral grays:
- #1C1C1E -> #171717 (secondary dark background)
- #38383A -> #4D4D4D (dark border)
- #8E8E93 -> #A3A3A3 (secondary text dark)
- Keep pure black (#000000) for main backgrounds (OLED friendly)
- Add semantic color mappings for consistent UI styling
* feat(companion): complete dark mode implementation across all priority files
- Priority 1: Updated SettingsUI.tsx, BasicsTab.tsx, LimitsTab.tsx, AdvancedTab.tsx, RecurringTab.tsx, AvailabilityTab.tsx, event-type-detail.tsx
- Priority 2: Updated edit-availability-hours/name/override/day.tsx, oauth/callback.tsx
- Priority 3: Updated AvailabilityListScreen.tsx with dark mode for modals and list items
- Priority 4: Updated BookingActionsModal.tsx, BookingActionsModal.ios.tsx, GlassModalHeader.tsx, LoginScreen.tsx, LocationsList.tsx, SearchHeader.tsx, toast.tsx
Dark mode colors used:
- Main bg: #000000 (cal.bg.dark)
- Secondary bg: #171717 (cal.bg.secondaryDark)
- Muted bg: #262626 (cal.bg.mutedDark)
- Borders: #4D4D4D (cal.border.dark)
- Secondary text: #A3A3A3 (cal.text.secondaryDark)
* fix(companion): add dark mode support to iOS header, GlassView modals, and main content background
* fix(companion): add dark mode support to toggle/switch components
* fix(companion): use iOS green (#34C759) for toggle ON state in dark mode
* fix(companion): use white track + black thumb for dark mode toggles
* fix(companion): add dark mode support to login page logo and button
* dark mode to many pages, centralize the colors
* dark mode skelaton
* Availability pages android
* toggles
* headers
* red color for dark mode
* copy button
* white flash on bottom ui native ios sheet
* bottom sheet buttons
* bottom sheet in gray color
* bottom sheet again.. yeahh
* toggle green
* toggle green
* fix lint and typechecks
* fix exntension error
* Update companion/components/event-type-detail/tabs/LimitsTabDatePicker.android.tsx
Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>
* address cubic comments
---------
Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: peer@cal.com <peer@cal.com>
Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>
