feat: multiple theming options (#50)

* refactor: consolidate theme definitions by removing separate dark and light theme files

* feat: integrate dynamic color support and enhance theme settings management

* feat: add theme settings route and update theme management in app settings

* feat: enhance theme management by integrating high contrast support in various components

* feat: implement mode selection dialog for theme settings and enhance button functionality

* refactor: update theme import paths and consolidate theme provider files

* feat: enhance theme management by integrating theme selection based on audiobook playback

* refactor: update default value for useMaterialThemeFromSystem to false in theme settings

* refactor: adjust high contrast condition order in theme settings for consistency

* refactor: rename useMaterialThemeOfPlayingItem to useCurrentPlayerThemeThroughoutApp for clarity

* refactor: correct spelling in system theme provider and replace with updated implementation

* refactor: extract restore backup dialog into a separate widget for improved readability

* refactor: reorganize settings sections for clarity and improve restore dialog functionality

Author: Dr-Blank

.vscode/settings.json

@@ -12,6 +12,7 @@
     "audioplayers",
     "autolabeler",
     "Autovalidate",
+    "Checkmark",
     "deeplinking",
     "fullscreen",
     "Lerp",

lib/features/item_viewer/view/library_item_hero_section.dart

@@ -15,7 +15,7 @@ import 'package:vaani/settings/app_settings_provider.dart';
 import 'package:vaani/shared/extensions/duration_format.dart';
 import 'package:vaani/shared/extensions/model_conversions.dart';
 import 'package:vaani/shared/widgets/shelves/book_shelf.dart';
-import 'package:vaani/theme/theme_from_cover_provider.dart';
+import 'package:vaani/theme/providers/theme_from_cover_provider.dart';
 
 class LibraryItemHeroSection extends HookConsumerWidget {
   const LibraryItemHeroSection({
@@ -353,16 +353,17 @@ class _BookCover extends HookConsumerWidget {
     final coverImage = ref.watch(coverImageProvider(itemId));
     final themeData = Theme.of(context);
     // final item = ref.watch(libraryItemProvider(itemId));
-    final useMaterialThemeOnItemPage =
-        ref.watch(appSettingsProvider).themeSettings.useMaterialThemeOnItemPage;
+    final themeSettings = ref.watch(appSettingsProvider).themeSettings;
 
     ColorScheme? coverColorScheme;
-    if (useMaterialThemeOnItemPage) {
+    if (themeSettings.useMaterialThemeOnItemPage) {
       coverColorScheme = ref
           .watch(
             themeOfLibraryItemProvider(
               itemId,
               brightness: Theme.of(context).brightness,
+              highContrast: themeSettings.highContrast ||
+                  MediaQuery.of(context).highContrast,
             ),
           )
           .valueOrNull;
@@ -371,7 +372,7 @@ class _BookCover extends HookConsumerWidget {
     return ThemeSwitcher(
       builder: (context) {
         // change theme after 2 seconds
-        if (useMaterialThemeOnItemPage) {
+        if (themeSettings.useMaterialThemeOnItemPage) {
           Future.delayed(150.ms, () {
             try {
               ThemeSwitcher.of(context).changeTheme(

lib/features/player/view/audiobook_player.dart

@@ -14,7 +14,7 @@ import 'package:vaani/features/player/providers/player_form.dart';
 import 'package:vaani/settings/app_settings_provider.dart';
 import 'package:vaani/shared/extensions/inverse_lerp.dart';
 import 'package:vaani/shared/widgets/shelves/book_shelf.dart';
-import 'package:vaani/theme/theme_from_cover_provider.dart';
+import 'package:vaani/theme/providers/theme_from_cover_provider.dart';
 
 import 'player_when_expanded.dart';
 import 'player_when_minimized.dart';
@@ -65,6 +65,8 @@ class AudiobookPlayer extends HookConsumerWidget {
       themeOfLibraryItemProvider(
         itemBeingPlayed.valueOrNull?.id,
         brightness: Theme.of(context).brightness,
+        highContrast: appSettings.themeSettings.highContrast ||
+            MediaQuery.of(context).highContrast,
       ),
     );
 

lib/main.dart

@@ -1,3 +1,4 @@
+import 'package:dynamic_color/dynamic_color.dart';
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:logging/logging.dart';
@@ -7,12 +8,15 @@ import 'package:vaani/features/downloads/providers/download_manager.dart';
 import 'package:vaani/features/logging/core/logger.dart';
 import 'package:vaani/features/playback_reporting/providers/playback_reporter_provider.dart';
 import 'package:vaani/features/player/core/init.dart';
-import 'package:vaani/features/player/providers/audiobook_player.dart';
+import 'package:vaani/features/player/providers/audiobook_player.dart'
+    show audiobookPlayerProvider, simpleAudiobookPlayerProvider;
 import 'package:vaani/features/shake_detection/providers/shake_detector.dart';
 import 'package:vaani/features/sleep_timer/providers/sleep_timer_provider.dart';
 import 'package:vaani/router/router.dart';
 import 'package:vaani/settings/api_settings_provider.dart';
 import 'package:vaani/settings/app_settings_provider.dart';
+import 'package:vaani/theme/providers/system_theme_provider.dart';
+import 'package:vaani/theme/providers/theme_from_cover_provider.dart';
 import 'package:vaani/theme/theme.dart';
 
 final appLogger = Logger('vaani');
@@ -51,16 +55,77 @@ class MyApp extends ConsumerWidget {
     if (needOnboarding) {
       routerConfig.goNamed(Routes.onboarding.name);
     }
+    final appSettings = ref.watch(appSettingsProvider);
+    final themeSettings = appSettings.themeSettings;
 
+    ColorScheme lightColorScheme = brandLightColorScheme;
+    ColorScheme darkColorScheme = brandDarkColorScheme;
+
+    final shouldUseHighContrast =
+        themeSettings.highContrast || MediaQuery.of(context).highContrast;
+
+    if (shouldUseHighContrast) {
+      lightColorScheme = lightColorScheme.copyWith(
+        surface: Colors.white,
+      );
+      darkColorScheme = darkColorScheme.copyWith(
+        surface: Colors.black,
+      );
+    }
+
+    if (themeSettings.useMaterialThemeFromSystem) {
+      var themes =
+          ref.watch(systemThemeProvider(highContrast: shouldUseHighContrast));
+      if (themes.valueOrNull != null) {
+        lightColorScheme = themes.valueOrNull!.$1;
+        darkColorScheme = themes.valueOrNull!.$2;
+      }
+    }
+
+    if (themeSettings.useCurrentPlayerThemeThroughoutApp) {
+      final player = ref.watch(audiobookPlayerProvider);
+      if (player.book != null) {
+        final themeLight = ref.watch(
+          themeOfLibraryItemProvider(
+            player.book!.libraryItemId,
+            highContrast: shouldUseHighContrast,
+            brightness: Brightness.light,
+          ),
+        );
+        final themeDark = ref.watch(
+          themeOfLibraryItemProvider(
+            player.book!.libraryItemId,
+            highContrast: shouldUseHighContrast,
+            brightness: Brightness.dark,
+          ),
+        );
+        if (themeLight.valueOrNull != null && themeDark.valueOrNull != null) {
+          lightColorScheme = themeLight.valueOrNull!;
+          darkColorScheme = themeDark.valueOrNull!;
+        }
+      }
+    }
+    final appThemeLight = ThemeData(
+      useMaterial3: true,
+      colorScheme: lightColorScheme.harmonized(),
+    );
+    final appThemeDark = ThemeData(
+      useMaterial3: true,
+      colorScheme: darkColorScheme.harmonized(),
+      brightness: Brightness.dark,
+      // TODO bottom sheet theme is not working
+      bottomSheetTheme: BottomSheetThemeData(
+        backgroundColor: darkColorScheme.surface,
+      ),
+    );
     try {
       return MaterialApp.router(
         // debugShowCheckedModeBanner: false,
-        theme: lightTheme,
-        darkTheme: darkTheme,
-        themeMode: ref.watch(appSettingsProvider).themeSettings.isDarkMode
-            ? ThemeMode.dark
-            : ThemeMode.light,
+        theme: appThemeLight,
+        darkTheme: appThemeDark,
+        themeMode: themeSettings.themeMode,
         routerConfig: routerConfig,
+        themeAnimationCurve: Curves.easeInOut,
       );
     } catch (e) {
       debugPrintStack(stackTrace: StackTrace.current, label: e.toString());

lib/router/constants.dart

@@ -27,6 +27,11 @@ class Routes {
     pathName: 'config',
     name: 'settings',
   );
+  static const themeSettings = _SimpleRoute(
+    pathName: 'theme',
+    name: 'themeSettings',
+    parentRoute: settings,
+  );
   static const autoSleepTimerSettings = _SimpleRoute(
     pathName: 'autoSleepTimer',
     name: 'autoSleepTimerSettings',

lib/router/router.dart

@@ -17,6 +17,7 @@ import 'package:vaani/settings/view/auto_sleep_timer_settings_page.dart';
 import 'package:vaani/settings/view/notification_settings_page.dart';
 import 'package:vaani/settings/view/player_settings_page.dart';
 import 'package:vaani/settings/view/shake_detector_settings_page.dart';
+import 'package:vaani/settings/view/theme_settings_page.dart';
 
 import 'scaffold_with_nav_bar.dart';
 import 'transitions/slide.dart';
@@ -178,6 +179,13 @@ class MyAppRouter {
                     // builder: (context, state) => const AppSettingsPage(),
                     pageBuilder: defaultPageBuilder(const AppSettingsPage()),
                     routes: [
+                      GoRoute(
+                        path: Routes.themeSettings.pathName,
+                        name: Routes.themeSettings.name,
+                        pageBuilder: defaultPageBuilder(
+                          const ThemeSettingsPage(),
+                        ),
+                      ),
                       GoRoute(
                         path: Routes.autoSleepTimerSettings.pathName,
                         name: Routes.autoSleepTimerSettings.name,

lib/settings/app_settings_provider.dart

@@ -47,11 +47,6 @@ class AppSettings extends _$AppSettings {
     _logger.fine('wrote settings to box: $state');
   }
 
-  void toggleDarkMode() {
-    state = state.copyWith
-        .themeSettings(isDarkMode: !state.themeSettings.isDarkMode);
-  }
-
   void update(model.AppSettings newSettings) {
     state = newSettings;
   }

lib/settings/app_settings_provider.g.dart

@@ -28,7 +28,10 @@ class AppSettings with _$AppSettings {
 @freezed
 class ThemeSettings with _$ThemeSettings {
   const factory ThemeSettings({
-    @Default(true) bool isDarkMode,
+    @Default(ThemeMode.system) ThemeMode themeMode,
+    @Default(false) bool highContrast,
+    @Default(false) bool useMaterialThemeFromSystem,
+    @Default('#FF311B92') String customThemeColor,
     @Default(true) bool useMaterialThemeOnItemPage,
     @Default(true) bool useCurrentPlayerThemeThroughoutApp,
   }) = _ThemeSettings;