feat: Add dark mode and theming options to app settings page

lib/pages/app_settings.dart

@@ -32,6 +32,7 @@ class AppSettingsPage extends HookConsumerWidget {
               SettingsTile.switchTile(
                 initialValue: appSettings.isDarkMode,
                 title: const Text('Dark Mode'),
+                description: const Text('we all know dark mode is better'),
                 leading: appSettings.isDarkMode
                     ? const Icon(Icons.dark_mode)
                     : const Icon(Icons.light_mode),
@@ -42,6 +43,9 @@ class AppSettingsPage extends HookConsumerWidget {
               SettingsTile.switchTile(
                 initialValue: appSettings.useMaterialThemeOnItemPage,
                 title: const Text('Use Material Theming on Item Page'),
+                description: const Text(
+                  'get fancy with the colors on the item page at the cost of some performance',
+                ),
                 leading: const Icon(Icons.dynamic_form_outlined),
                 onToggle: (value) {
                   ref.read(appSettingsProvider.notifier).updateState(

lib/router/scaffold_with_nav_bar.dart

@@ -22,7 +22,8 @@ class ScaffoldWithNavBar extends StatelessWidget {
         landscapeLayout: BottomNavigationBarLandscapeLayout.centered,
         selectedFontSize: Theme.of(context).textTheme.labelMedium!.fontSize!,
         unselectedFontSize: Theme.of(context).textTheme.labelMedium!.fontSize!,
-        // fixedColor: Theme.of(context).colorScheme.primary,
+        showUnselectedLabels: false,
+        fixedColor: Theme.of(context).colorScheme.onBackground,
         // type: BottomNavigationBarType.fixed,
 
         // Here, the items of BottomNavigationBar are hard coded. In a real

lib/theme/theme_from_cover_provider.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_animate/flutter_animate.dart';
 import 'package:riverpod_annotation/riverpod_annotation.dart';
 import 'package:shelfsdk/audiobookshelf_api.dart';
 import 'package:whispering_pages/api/image_provider.dart';
@@ -6,15 +7,38 @@ import 'package:whispering_pages/api/image_provider.dart';
 part 'theme_from_cover_provider.g.dart';
 
 @riverpod
-FutureOr<ColorScheme> themeFromCover(
+Future<FutureOr<ColorScheme?>> themeFromCover(
   ThemeFromCoverRef ref,
   ImageProvider<Object> img, {
   Brightness brightness = Brightness.dark,
-}) {
+}) async {
+  // add deliberate delay to simulate a long running task
+  await Future.delayed(200.ms);
   return ColorScheme.fromImageProvider(
     provider: img,
     brightness: brightness,
   );
+  // TODO isolate is not working
+  // see https://github.com/flutter/flutter/issues/119207
+  // use isolate to generate the color scheme
+  // RootIsolateToken? token = RootIsolateToken.instance;
+  // final scheme = await Isolate.run(
+  //   () async {
+  //     debugPrint('Isolate running ${Isolate.current.debugName}');
+  //     try {
+  //       BackgroundIsolateBinaryMessenger.ensureInitialized(token!);
+  //       WidgetsFlutterBinding.ensureInitialized();
+  //       return await ColorScheme.fromImageProvider(
+  //         provider: img,
+  //         brightness: brightness,
+  //       );
+  //     } catch (e) {
+  //       debugPrint('Error in isolate: $e');
+  //       return null;
+  //     }
+  //   },
+  // );
+  // return scheme;
 }
 
 @riverpod

lib/theme/theme_from_cover_provider.g.dart

@@ -6,7 +6,7 @@ part of 'theme_from_cover_provider.dart';
 // RiverpodGenerator
 // **************************************************************************
 
-String _$themeFromCoverHash() => r'e52e7b9c644f3fcc266cfc480b7003ec7492431c';
+String _$themeFromCoverHash() => r'b1d56a4add77d157a803424d02ef52c4d8c3f1d7';
 
 /// Copied from Dart SDK
 class _SystemHash {
@@ -34,7 +34,7 @@ class _SystemHash {
 const themeFromCoverProvider = ThemeFromCoverFamily();
 
 /// See also [themeFromCover].
-class ThemeFromCoverFamily extends Family<AsyncValue<ColorScheme>> {
+class ThemeFromCoverFamily extends Family<AsyncValue<FutureOr<ColorScheme?>>> {
   /// See also [themeFromCover].
   const ThemeFromCoverFamily();
 
@@ -75,7 +75,8 @@ class ThemeFromCoverFamily extends Family<AsyncValue<ColorScheme>> {
 }
 
 /// See also [themeFromCover].
-class ThemeFromCoverProvider extends AutoDisposeFutureProvider<ColorScheme> {
+class ThemeFromCoverProvider
+    extends AutoDisposeFutureProvider<FutureOr<ColorScheme?>> {
   /// See also [themeFromCover].
   ThemeFromCoverProvider(
     ImageProvider<Object> img, {
@@ -115,7 +116,8 @@ class ThemeFromCoverProvider extends AutoDisposeFutureProvider<ColorScheme> {
 
   @override
   Override overrideWith(
-    FutureOr<ColorScheme> Function(ThemeFromCoverRef provider) create,
+    FutureOr<FutureOr<ColorScheme?>> Function(ThemeFromCoverRef provider)
+        create,
   ) {
     return ProviderOverride(
       origin: this,
@@ -133,7 +135,7 @@ class ThemeFromCoverProvider extends AutoDisposeFutureProvider<ColorScheme> {
   }
 
   @override
-  AutoDisposeFutureProviderElement<ColorScheme> createElement() {
+  AutoDisposeFutureProviderElement<FutureOr<ColorScheme?>> createElement() {
     return _ThemeFromCoverProviderElement(this);
   }
 
@@ -154,7 +156,8 @@ class ThemeFromCoverProvider extends AutoDisposeFutureProvider<ColorScheme> {
   }
 }
 
-mixin ThemeFromCoverRef on AutoDisposeFutureProviderRef<ColorScheme> {
+mixin ThemeFromCoverRef
+    on AutoDisposeFutureProviderRef<FutureOr<ColorScheme?>> {
   /// The parameter `img` of this provider.
   ImageProvider<Object> get img;
 
@@ -163,7 +166,7 @@ mixin ThemeFromCoverRef on AutoDisposeFutureProviderRef<ColorScheme> {
 }
 
 class _ThemeFromCoverProviderElement
-    extends AutoDisposeFutureProviderElement<ColorScheme>
+    extends AutoDisposeFutureProviderElement<FutureOr<ColorScheme?>>
     with ThemeFromCoverRef {
   _ThemeFromCoverProviderElement(super.provider);