Refactor theme management to use ListenableBuilder for dynamic theme updates

Signed-off-by: Hans Kokx <hans.d.kokx@gmail.com>

example/lib/main.dart

@@ -269,9 +269,14 @@ class ArcaneThemeExample extends StatelessWidget {
   const ArcaneThemeExample({
     super.key,
   });
-
   @override
   Widget build(BuildContext context) {
+    return ListenableBuilder(
+      listenable: Arcane.theme.themeChanges,
+      builder: (context, _) {
+        final ThemeData effectiveTheme = Arcane.theme.currentTheme;
+        final bool isFollowingSystem = Arcane.theme.isFollowingSystemTheme;
+
         return Card(
           child: Padding(
             padding: const EdgeInsets.all(8.0),
@@ -294,7 +299,8 @@ class ArcaneThemeExample extends StatelessWidget {
                         return const Icon(Icons.light_mode);
                       }),
                       onChanged: (_) {
-                    final ThemeMode oldTheme = Arcane.theme.currentThemeMode;
+                        final ThemeMode oldTheme =
+                            Arcane.theme.currentThemeMode;
                         Arcane.theme.switchTheme();
                         Arcane.log(
                           "Switching theme",
@@ -310,9 +316,7 @@ class ArcaneThemeExample extends StatelessWidget {
                     Row(
                       mainAxisSize: MainAxisSize.min,
                       children: [
-                    ValueListenableBuilder<bool>(
+                        Checkbox(
-                      valueListenable: Arcane.theme.followingSystemThemeChanges,
-                      builder: (context, isFollowingSystem, _) => Checkbox(
                           value: isFollowingSystem,
                           onChanged: (value) {
                             final ThemeMode oldTheme =
@@ -344,7 +348,6 @@ class ArcaneThemeExample extends StatelessWidget {
                             }
                           },
                         ),
-                    ),
                         const Text("Follow system"),
                       ],
                     ),
@@ -358,10 +361,7 @@ class ArcaneThemeExample extends StatelessWidget {
                     children: [
                       const Text("Color"),
                       Expanded(
-                    child: ValueListenableBuilder<ThemeData>(
+                        child: ListView.separated(
-                      valueListenable: Arcane.theme.effectiveThemeChanges,
-                      builder: (context, effectiveTheme, _) =>
-                          ListView.separated(
                           itemCount: colors.length,
                           scrollDirection: Axis.horizontal,
                           separatorBuilder: (_, __) => const SizedBox(width: 4),
@@ -375,7 +375,8 @@ class ArcaneThemeExample extends StatelessWidget {
                                       colorSchemeSeed: colors[index],
                                     ),
                                   );
-                              } else if (context.themeMode == ThemeMode.light) {
+                                } else if (context.themeMode ==
+                                    ThemeMode.light) {
                                   Arcane.theme.setLightTheme(
                                     ThemeData(
                                       brightness: Brightness.light,
@@ -421,7 +422,6 @@ class ArcaneThemeExample extends StatelessWidget {
                           },
                         ),
                       ),
-                  ),
                     ],
                   ),
                 ),
@@ -434,6 +434,8 @@ class ArcaneThemeExample extends StatelessWidget {
             ),
           ),
         );
+      },
+    );
   }
 }
 

lib/src/services/reactive_theme/reactive_theme_service.dart

@@ -82,6 +82,16 @@ class ArcaneReactiveTheme extends ArcaneService {
   final ValueNotifier<bool> _followingSystemThemeNotifier =
       ValueNotifier<bool>(false);
 
+  /// Combined Listenable that merges all theme-related changes.
+  /// Use this for widgets that need to rebuild on any theme change.
+  Listenable get themeChanges => I._combinedThemeListenable;
+
+  late final Listenable _combinedThemeListenable = Listenable.merge([
+    _effectiveThemeNotifier,
+    _followingSystemThemeNotifier,
+    _themeModeNotifier,
+  ]);
+
   // ************************************************************************ //
   // * MARK: Light/Dark theme
   // ************************************************************************ //