Skip to content

[21479] Dark Mode Support #235

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
sg-jsonjuliane wants to merge 9 commits into
base: develop
Choose a base branch
from
Open

[21479] Dark Mode Support #235

sg-jsonjuliane wants to merge 9 commits into from

Conversation

@sg-jsonjuliane
Copy link
Contributor

@sg-jsonjuliane sg-jsonjuliane commented Dec 16, 2025

PR Context

  • Type: Feature
  • Issue Link: Redmine Issue
  • Risk Factor: Medium - Dark mode implementation affects UI components, icon tinting, and map markers. Requires testing across different themes and transport modes.

Changes

Describe your changes in detail, highlighting the problem it solves or the feature it adds.

  • Theme Migration: Migrated TripKitAndroidUI and TripKitUISample themes to DayNight for automatic dark mode support
  • Color Resources: Added values-night/colors.xml with dark mode color variants for all UI components (including icon_tint_default and transport_mode_selector colors)
  • Layout Fixes: Updated 59 layout files:
    • Backgrounds: @android:color/white → @color/white (40+ instances)
    • Text colors: @android:color/black → @color/black on neutral backgrounds (20+ instances)
    • Icon tinting: Added app:tint for 51+ icons (transport icons, checkmarks, UI elements)
    • Contrast fixes: Fixed favorite button, "Required" badge, Google icon visibility
    • Hardcoded hex colors: Replaced with semantic color resources
  • Drawable Fixes: Updated 9 drawable files (vector icons and shape drawables use semantic colors)
  • Icon Tinting Strategy: Implemented ThemeAwareApplyTintStrategy for theme-aware transport icon tinting:
    • White tint in dark mode for visibility
    • Original service colors in light mode
    • Branding icons (e.g., Beam) protected from tinting
  • WheelView Dark Mode: Added dark mode support for WheelView components (TimeDatePickerFragment):
    • Theme-aware top/bottom shadows (dark in light mode, light in dark mode)
    • Theme-aware horizontal divider lines (black in light mode, white in dark mode)
    • Uses reflection to access private WheelView fields
  • Map Markers: Darkened map pin markers to 60% gray in dark mode for better visibility on dark map backgrounds
  • Map Style & Info Windows: Added dark mode support for map style and info windows
  • Transport Mode Selector: Updated transport mode selector buttons with theme-aware background colors (checked/unchecked states)
  • Layout Tint Removal: Removed layout-level app:tint attributes that interfered with branding icons
  • Submodule Updates: Updated tripkit-android submodule reference to include booking UI dark mode support

Checklist for Reviewers

Documentation and Code Quality

  • KDocs Documentation: Are all changes, new functionalities, and classes documented with KDocs?
  • Architectural Patterns: Is there consistent and proper use of architectural patterns (e.g., MVVM, MVP)?

Testing and Reliability

  • Unit Testing: Are there unit tests for all new functionalities and classes?
  • Emulator and Real Device Testing: Has the application been tested on both emulators and real devices to ensure compatibility?

Error Handling and Logging

  • Error Handling: Are errors and exceptions caught and handled gracefully, ensuring the app remains stable?
  • Logging: Is there proper logging in place for critical errors and information, aiding in debugging and monitoring?

Testing Procedure

If applicable, provide steps or commands for testing your changes. This can help reviewers and testers.

  • Test TimeDatePickerFragment in both light and dark modes - verify shadows and dividers are visible
  • Verify transport icons are properly tinted in dark mode (white) while branding icons remain unchanged
  • Test map markers in dark mode - verify pins are visible (60% gray) on dark map background
  • Verify transport mode selector buttons have correct background colors in both themes
  • Test theme switching and verify all UI components adapt correctly

Work-in-Progress (WIP)

List any remaining work or areas that need additional focus. This section can be updated as the work progresses.

  • Comprehensive testing across all transport modes and icon types
  • Verify branding icons are not affected by tinting in all scenarios

Remember to keep this template updated based on the feedback and evolving project standards.

@sg-jsonjuliane
[21479] Provided initial night/colors for TripKitAndroidUI
783b158
@sg-jsonjuliane
[21479] Phase 1: Update TripKitAndroidUI and tripkituisample themes t…
82ad5db 
…o DayNight

- TripKitAndroidUI: Updated 3 dialog/component themes to DayNight
  - FullScreenDialog: Theme.AppCompat.Light.Dialog → DayNight.Dialog
  - Widget.CalendarView.Custom: Theme.MaterialComponents.Light → DayNight
  - FlatDialog: Fixed @android:color/white → @color/white
- tripkituisample: Theme.MaterialComponents.Light.NoActionBar → DayNight.NoActionBar
- Updated tripkit-android submodule reference (clean commit with .gitignore fix)

Part of Phase 1: Core Theme Migration for dark mode support
@sg-jsonjuliane
[21479] Phase 2: Apply TripKitAndroidUI dark mode fixes
5d89456
@sg-jsonjuliane
[21479] Phase 2: Finalize shared drawable palette
0e18a0c
@sg-jsonjuliane
[21479] Phase 2: Priority 3 - trip-kit-booking-ui dark mode support
e2ebcd6 
- Updated tripkit-android submodule reference
@sg-jsonjuliane
[21479] Add dark mode support for map style and info windows
eb53088 
- Add night-res map style JSON for dark mode map styling
- Remove custom backgrounds from all info window layouts to use Google's default styling
- Update info window text colors to use @android:color/black (no night variant) for visibility
- Remove custom icon tinting from info windows to use default colors
- Updated layouts:
  - map_pin_info_window.xml
  - free_floating_vehicle_info_window.xml
  - bike_share_info_window.xml
  - view_simple_callout.xml
  - city_callout.xml
@sg-jsonjuliane
[21479] Phase 2: Implement theme-aware transport icon tinting and dar…
9c4590c 
…k mode fixes

- Add ThemeAwareApplyTintStrategy for theme-aware icon tinting when service colors disabled
- Update GetTransportIconTintStrategy to use ThemeAwareApplyTintStrategy when service colors disabled
- Remove tint from trip_result_segment_item.xml to allow branding icons (Beam) to display correctly
- Remove tint from trip_result_list_transport_item.xml, handle theme via background colors
- Update trip_result_transport_mode_selector_background.xml with theme-aware colors
- Add transport_mode_selector_checked and transport_mode_selector_unchecked color resources
- Fix TimeDatePickerFragment dark mode: shadows, divider lines, and date column text
- Add top_shadow and bottom_shadow drawables with night variants
- Update SuggestionViewModel with programmatic icon tinting for search results
- Update various layouts with app:tint for dark mode icon visibility
@sg-jsonjuliane
[21479] Adjust map pin tint to 60% gray for better visibility in dark…
70cb6b9 
… mode
@sg-jsonjuliane sg-jsonjuliane self-assigned this Dec 16, 2025
@github-actions

This comment was marked as outdated.

Sign in to view
@github-actions
Copy link

github-actions bot commented Dec 16, 2025

✅ Unit tests passed successfully!

Test results are available under the "Artifacts" section of this run in GitHub Actions.

Please ensure the code is reviewed before proceeding with the merge.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@MichaelReyes MichaelReyes Awaiting requested review from MichaelReyes

At least 1 approving review is required to merge this pull request.

Assignees

@sg-jsonjuliane sg-jsonjuliane

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@sg-jsonjuliane