feat: Implemented the light and dark mode

[Yugesh-Kumar-S]

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

[sourcery-ai]

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

• Implement theming (light/dark modes) #2705: The PR implements all the requirements of the issue, including automatic and manual theme switching.

---

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

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[github-actions]

Build successful. APKs to test: https://github.com/fossasia/pslab-android/actions/runs/15254018007/artifacts/3197219709

[AsCress]

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

[AsCress]

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.