Skip to content

feat: Implemented the light and dark mode #2706

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.

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

Open
wants to merge 2 commits into
base: flutter
Choose a base branch
from

Conversation

Yugesh-Kumar-S
Copy link
Collaborator

@Yugesh-Kumar-S Yugesh-Kumar-S commented May 26, 2025

Fixes #2705

Changes

  • Added theme data for light and dark modes.

  • Implemented automatic theme switching based on device settings.

  • Added a theme selection option in the app settings to manually switch themes.

  • Updated UI components and screens to support theme changes.

Screenshots / Recordings

Screen.Recording.2025-05-26.175243.mp4

Checklist:

  • No hard coding: I have used resources from strings.xml, dimens.xml and colors.xml without hard coding any value.
  • No end of file edits: No modifications done at end of resource files strings.xml, dimens.xml or colors.xml.
  • Code reformatting: I have reformatted code and fixed indentation in every file included in this pull request.
  • No extra space: My code does not contain any extra lines or extra spaces than the ones that are necessary.

Summary by Sourcery

Implement light and dark mode support with system and manual theme selection, persist user preference, and update UI to use theme colors.

New Features:

  • Provide default light and dark themes with Material3 support.
  • Automatically apply system theme on app startup.
  • Add manual theme selection dialog in settings.
  • Persist theme preference using SharedPreferences.

Enhancements:

  • Replace hard-coded colors with Theme.of(context).colorScheme across screens and widgets.
  • Integrate ThemeProvider via provider package and GetIt locator for dynamic theming.
  • Update MaterialApp to use AppTheme.lightTheme, AppTheme.darkTheme, and react to ThemeProvider.

Build:

  • Add shared_preferences dependency to pubspec.yaml.

Chores:

  • Add new string constants for theme labels in constants.dart

Copy link

sourcery-ai bot commented May 26, 2025

Reviewer's Guide

This PR adds comprehensive light/dark mode support by introducing a ThemeProvider (with persistence via shared_preferences), defining static theme data in AppTheme, integrating theme switching into MaterialApp, providing a manual theme‐selection UI in SettingsScreen, and updating existing UI components to use ThemeData’s color scheme instead of hard‐coded colors.

Sequence Diagram for Manual Theme Selection

sequenceDiagram
    actor User
    participant SettingsScreen
    participant ThemeSelectionDialog
    participant ThemeProvider
    participant SharedPreferences

    User->>SettingsScreen: Taps 'Theme' option
    SettingsScreen->>ThemeSelectionDialog: _showThemeSelectionDialog()
    activate ThemeSelectionDialog
    ThemeSelectionDialog-->>User: Displays theme options (System, Light, Dark)
    User->>ThemeSelectionDialog: Selects a theme (e.g., Dark)
    ThemeSelectionDialog->>ThemeProvider: setThemeMode(ThemeMode.dark)
    activate ThemeProvider
    ThemeProvider->>ThemeProvider: Updates _themeMode
    ThemeProvider->>ThemeProvider: notifyListeners()
    ThemeProvider->>ThemeProvider: _saveThemeMode()
    ThemeProvider->>SharedPreferences: Saves themeMode.index for key '_themeKey'
    activate SharedPreferences
    SharedPreferences-->>ThemeProvider: Confirms save
    deactivate SharedPreferences
    ThemeProvider-->>ThemeSelectionDialog: Returns
    deactivate ThemeProvider
    ThemeSelectionDialog->>SettingsScreen: Closes dialog (Navigator.pop())
    deactivate ThemeSelectionDialog
Loading

Class Diagram for Core Theme System (ThemeProvider and AppTheme)

classDiagram
    class ChangeNotifier {
        <<Flutter Framework>>
        #notifyListeners()
    }

    class ThemeProvider {
        <<Provider>>
        -String _themeKey
        -ThemeMode _themeMode
        +ThemeProvider()
        +ThemeMode get themeMode
        +void setThemeMode(ThemeMode themeMode)
        +Future~void~ loadThemeMode()
        -Future~void~ _saveThemeMode()
        +String getThemeDisplayName()
    }
    ChangeNotifier <|-- ThemeProvider

    class AppTheme {
        <<Utility>>
        +static ThemeData lightTheme
        +static ThemeData darkTheme
    }

    class ThemeMode {
        <<Enum>>
        System
        Light
        Dark
    }

    ThemeProvider ..> ThemeMode : uses
    ThemeProvider ..> SharedPreferences : uses for persistence
    class SharedPreferences {
        <<External Library>>
        +Future~bool~ setInt(String key, int value)
        +int? getInt(String key)
        +Future~void~ getInstance()
    }
Loading

File-Level Changes

Change Details Files
Added ThemeProvider for managing and persisting theme mode
  • Created ThemeProvider with loadThemeMode, setThemeMode, and persistence via SharedPreferences
  • Registered ThemeProvider in service locator
  • Injected ThemeProvider into app via ChangeNotifierProvider and awaited loading before runApp
lib/providers/theme_provider.dart
lib/providers/locator.dart
lib/main.dart
Defined light and dark theme data in AppTheme
  • Created theme.dart with two ThemeData configurations (lightTheme, darkTheme)
  • Configured brightness, Material3 use, scaffoldBackgroundColor, and colorSchemeSeed
lib/view/Theme/theme.dart
Implemented manual theme selection in SettingsScreen
  • Added a ListTile in settings to show current theme and open selection dialog
  • Built a SimpleDialog with RadioListTile options for System, Light, Dark
  • Connected dialog selections to ThemeProvider.setThemeMode and closed dialog on choice
lib/view/settings_screen.dart
Refactored UI components to use ThemeData colors instead of hard‐coded values
  • Replaced backgroundColor references with Theme.of(context).colorScheme.surface
  • Switched text and icon colors to colorScheme.onSurface where appropriate
  • Removed hard‐coded black/white colors across multiple widgets
lib/view/settings_screen.dart
lib/view/widgets/navigation_drawer.dart
lib/view/widgets/applications_list_item.dart
lib/view/widgets/main_scaffold_widget.dart
lib/view/about_us_screen.dart
lib/view/connect_device_screen.dart
Added shared_preferences dependency and theme constants
  • Introduced shared_preferences ^2.2.2 in pubspec.yaml
  • Added theme-related string constants (theme, currentTheme, system, light, dark)
  • Updated constants.dart accordingly
pubspec.yaml
lib/constants.dart

Assessment against linked issues

Issue Objective Addressed Explanation
#2705 The app should support both light and dark themes.
#2705 Theme should switch automatically based on the device’s system theme preference.
#2705 Users should also have the option to manually select between light and dark modes within the app.

Possibly linked issues


Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

@Yugesh-Kumar-S Yugesh-Kumar-S changed the title Implemented the light and dark mode Feat: Implemented the light and dark mode May 26, 2025
@Yugesh-Kumar-S Yugesh-Kumar-S changed the title Feat: Implemented the light and dark mode feat: Implemented the light and dark mode May 26, 2025
Copy link

import 'constants.dart';

void main() {
Future<void> main() async {
Copy link
Collaborator

Choose a reason for hiding this comment

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

Why is main() async? Shouldn't be.

await _saveThemeMode();
}

Future<void> loadThemeMode() async {
Copy link
Collaborator

Choose a reason for hiding this comment

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

Saving theme in SharedPreferences isn't required. Let's implement a simpler model for this. If a user has to always use dark theme for the app, the System option is available.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants