Skip to content

Dark theme setup#20

Merged
Rohit-554 merged 15 commits intoRohit-554:TodoAppfrom
Diwakarchavan:feature/app/dark-theme-setup
Apr 12, 2026
Merged

Dark theme setup#20
Rohit-554 merged 15 commits intoRohit-554:TodoAppfrom
Diwakarchavan:feature/app/dark-theme-setup

Conversation

@Diwakarchavan
Copy link
Copy Markdown
Contributor

#1

- Add `ThemeRepository` to handle dark mode preference using DataStore.
- Update `TodoAppTheme` to support both light and dark color schemes.
- Refactor UI components to use `MaterialTheme.colorScheme` instead of hardcoded colors for better theme adaptation.
- Integrate theme switching logic into `SettingsViewModel` and add a toggle switch in `SettingsPage`.
- Update `OnBoardingScreen` background to support dynamic theme gradients.
- Inject `ThemeRepository` in the main `App` entry point to observe and apply the current theme.
- Update `SelectionCard` and `EditDetailCard` to use `MaterialTheme.colorScheme.onSurface`.
- Update `DatePickerDialog` to use `MaterialTheme.colorScheme.surface`.
- Refactor `MonthlyCalendar` to use `Surface` with `MaterialTheme.colorScheme.surface` instead of a `Box` with hardcoded background.
@Diwakarchavan Diwakarchavan changed the title Feature/app/dark theme setup Dark theme setup Mar 25, 2026
@Rohit-554 Rohit-554 requested a review from Copilot April 7, 2026 13:57
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Implements app-wide dark theme support in the Compose Multiplatform UI, including a Settings toggle persisted via DataStore and wiring the selected theme into the root App() theme wrapper.

Changes:

  • Added a dark color palette and conditional dark/light ColorScheme selection in TodoAppTheme.
  • Introduced DataStore-backed ThemeRepository, exposed via SettingsViewModel, and added a dark mode toggle UI in Settings.
  • Updated multiple UI components to use MaterialTheme.colorScheme surfaces instead of hard-coded light colors.

Reviewed changes

Copilot reviewed 20 out of 20 changed files in this pull request and generated 7 comments.

Show a summary per file
File Description
README.md Removes extra blank lines in README content.
composeApp/src/commonMain/kotlin/io/jadu/todoApp/ui/viewModel/SettingsViewModel.kt Injects theme repository; exposes isDarkMode and toggle action.
composeApp/src/commonMain/kotlin/io/jadu/todoApp/ui/theme/TodoColors.kt Adds dark-theme palette entries.
composeApp/src/commonMain/kotlin/io/jadu/todoApp/ui/theme/TodoAppTheme.kt Adds dark scheme + LocalDarkTheme; switches scheme by darkTheme.
composeApp/src/commonMain/kotlin/io/jadu/todoApp/ui/screens/SettingsPage.kt Adds dark mode switch card; updates dialog surface color for theming.
composeApp/src/commonMain/kotlin/io/jadu/todoApp/ui/screens/OnBoardingScreen.kt Uses LocalDarkTheme to swap onboarding background gradient for dark mode.
composeApp/src/commonMain/kotlin/io/jadu/todoApp/ui/screens/homescreen/components/TaskProgressCard.kt Uses themed surface/onSurface for button colors.
composeApp/src/commonMain/kotlin/io/jadu/todoApp/ui/components/TodoElevatedCard.kt Uses themed surface background.
composeApp/src/commonMain/kotlin/io/jadu/todoApp/ui/components/SelectTaskStatusBottomSheet.kt Uses themed surface for bottom sheet container.
composeApp/src/commonMain/kotlin/io/jadu/todoApp/ui/components/SelectionCard.kt Uses themed onSurface for text.
composeApp/src/commonMain/kotlin/io/jadu/todoApp/ui/components/SelectGroupBottomSheet.kt Uses themed surface for bottom sheet container.
composeApp/src/commonMain/kotlin/io/jadu/todoApp/ui/components/MonthlyCalendar.kt Replaces hard-coded white background with themed Surface.
composeApp/src/commonMain/kotlin/io/jadu/todoApp/ui/components/EditDetailCard.kt Uses themed surface/onSurface instead of fixed colors.
composeApp/src/commonMain/kotlin/io/jadu/todoApp/ui/components/DatePickerDialog.kt Uses themed surface for dialog background.
composeApp/src/commonMain/kotlin/io/jadu/todoApp/ui/components/CustomDialog.kt Uses themed surface/onSurface for button colors.
composeApp/src/commonMain/kotlin/io/jadu/todoApp/data/local/ThemeRepository.kt New DataStore-backed theme preference repository.
composeApp/src/commonMain/kotlin/io/jadu/di.kt Registers ThemeRepository and updates SettingsViewModel DI wiring.
composeApp/src/commonMain/kotlin/io/jadu/App.kt Injects theme repository and applies darkTheme at app root.
composeApp/src/commonMain/composeResources/values/strings.xml Adds strings for dark mode toggle.
androidApp/src/main/java/io/jadu/MainActivity.kt Removes Surface wrapper so app theme controls background.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@Rohit-554
Copy link
Copy Markdown
Owner

@Diwakarchavan please review the comments

@Diwakarchavan
Copy link
Copy Markdown
Contributor Author

@Diwakarchavan please review the comments

Okay, I'll address all the comments tomorrow.

- Modify `ThemeRepository` and `SettingsViewModel` to use a nullable `Boolean` for `isDarkMode`, allowing the detection of an unset preference.
- Update `App.kt` and `SettingsPage.kt` to fallback to `isSystemInDarkTheme()` when no explicit user preference is stored.
- Add `resetToSystem()` to `ThemeRepository` to allow clearing the dark mode preference.
- Remove unused `TodoColors` import in `DatePickerDialog.kt`.
- Catch exceptions in `dataStore.data` and emit `emptyPreferences()` to prevent flow failures.
- Update `DARK_MODE_KEY` to follow camelCase naming convention for the private property.
- Refactor all references to use the renamed `darkModeKey`.
- Update `DARK_MODE_KEY` to follow camelCase naming convention for the private property.
- Refactor all references to use the renamed `darkModeKey`.
- Update `DARK_MODE_KEY` to follow camelCase naming convention for the private property.
- Refactor all references to use the renamed `darkModeKey`.
- Move the color scheme initialization before the typography definition in `TodoAppTheme.kt`.
- Update `Typography` styles to use the local `colors.onSurface` instead of `MaterialTheme.colorScheme.onSurface` to ensure consistency during theme transitions.
- Remove unused `isSystemInDarkTheme` import.
- Prevent UI flicker by ensuring `TodoAppTheme` only renders once the `isDarkMode` preference is loaded from the repository.
…heme-setup

# Conflicts:
#	composeApp/src/commonMain/kotlin/io/jadu/App.kt
- Remove unused `rememberNavController` and its import in `App.kt`.
- Update `MainScreen` call to no longer require a `navController` argument.
@Rohit-554 Rohit-554 merged commit 4954a7e into Rohit-554:TodoApp Apr 12, 2026
1 check passed
@Rohit-554
Copy link
Copy Markdown
Owner

@Diwakarchavan Thanks for your contribution !! Tip for next time contribution : add the screen shots if you are working on UI Tasks

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants