feat(settings - appearance): add system option (#1279)

Closes #1260

assets/i18n/en_US.json

@@ -178,8 +178,10 @@
         "exportSectionTitle": "Import & export",
         "logsSectionTitle": "Logs",
 
-        "darkThemeLabel": "Dark mode",
+        "themeModeLabel": "App theme",
-        "darkThemeHint": "Welcome to the dark side",
+        "systemThemeLabel": "System",
+        "lightThemeLabel": "Light",
+        "darkThemeLabel": "Dark",
 
         "dynamicThemeLabel": "Material You",
         "dynamicThemeHint": "Enjoy an experience closer to your device",

lib/services/manager_api.dart

@@ -199,12 +199,12 @@ class ManagerAPI {
     await _prefs.setBool('useDynamicTheme', value);
   }
 
-  bool getUseDarkTheme() {
+  int getThemeMode() {
-    return _prefs.getBool('useDarkTheme') ?? false;
+    return _prefs.getInt('themeMode') ?? 2;
   }
 
-  Future<void> setUseDarkTheme(bool value) async {
+  Future<void> setThemeMode(int value) async {
-    await _prefs.setBool('useDarkTheme', value);
+    await _prefs.setInt('themeMode', value);
   }
 
   bool areUniversalPatchesEnabled() {

lib/ui/theme/dynamic_theme_builder.dart

@@ -1,12 +1,16 @@
+import 'dart:ui';
 import 'package:dynamic_color/dynamic_color.dart';
 import 'package:dynamic_themes/dynamic_themes.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:google_fonts/google_fonts.dart';
+import 'package:revanced_manager/app/app.locator.dart';
 import 'package:revanced_manager/app/app.router.dart';
+import 'package:revanced_manager/services/manager_api.dart';
 import 'package:revanced_manager/theme.dart';
 import 'package:stacked_services/stacked_services.dart';
 
-class DynamicThemeBuilder extends StatelessWidget {
+class DynamicThemeBuilder extends StatefulWidget {
   const DynamicThemeBuilder({
     Key? key,
     required this.title,
@@ -17,6 +21,35 @@ class DynamicThemeBuilder extends StatelessWidget {
   final Widget home;
   final Iterable<LocalizationsDelegate> localizationsDelegates;
 
+  @override
+  State<DynamicThemeBuilder> createState() => _DynamicThemeBuilderState();
+}
+
+class _DynamicThemeBuilderState extends State<DynamicThemeBuilder> with WidgetsBindingObserver {
+  Brightness brightness = PlatformDispatcher.instance.platformBrightness;
+  final ManagerAPI _managerAPI = locator<ManagerAPI>();
+
+  @override
+  void initState() {
+    super.initState();
+    WidgetsBinding.instance.addObserver(this);
+  }
+
+  @override
+  void didChangePlatformBrightness() {
+    setState(() {
+      brightness = PlatformDispatcher.instance.platformBrightness;
+    });
+    if (_managerAPI.getThemeMode() < 2) {
+      SystemChrome.setSystemUIOverlayStyle(
+        SystemUiOverlayStyle(
+          systemNavigationBarIconBrightness:
+          brightness == Brightness.light ? Brightness.dark : Brightness.light,
+        ),
+      );
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
     return DynamicColorBuilder(
@@ -50,24 +83,32 @@ class DynamicThemeBuilder extends StatelessWidget {
         return DynamicTheme(
           themeCollection: ThemeCollection(
             themes: {
-              0: lightCustomTheme,
+              0: brightness == Brightness.light ? lightCustomTheme : darkCustomTheme,
-              1: darkCustomTheme,
+              1: brightness == Brightness.light ? lightDynamicTheme : darkDynamicTheme,
-              2: lightDynamicTheme,
+              2: lightCustomTheme,
-              3: darkDynamicTheme,
+              3: lightDynamicTheme,
+              4: darkCustomTheme,
+              5: darkDynamicTheme,
             },
-            fallbackTheme: lightCustomTheme,
+            fallbackTheme: brightness == Brightness.light ? lightCustomTheme : darkCustomTheme,
           ),
           builder: (context, theme) => MaterialApp(
                 debugShowCheckedModeBanner: false,
-            title: title,
+                title: widget.title,
                 navigatorKey: StackedService.navigatorKey,
                 onGenerateRoute: StackedRouter().onGenerateRoute,
                 theme: theme,
-            home: home,
+                home: widget.home,
-            localizationsDelegates: localizationsDelegates,
+                localizationsDelegates: widget.localizationsDelegates,
               ),
         );
       },
     );
   }
+
+  @override
+  void dispose() {
+    WidgetsBinding.instance.removeObserver(this);
+    super.dispose();
+  }
 }

lib/ui/views/navigation/navigation_viewmodel.dart

@@ -30,11 +30,8 @@ class NavigationViewModel extends IndexTrackingViewModel {
           );
     }
 
-    if (prefs.getBool('useDarkTheme') == null) {
+    if (prefs.getInt('themeMode') == null) {
-      final bool isDark =
+      await prefs.setInt('themeMode', 0);
-          MediaQuery.platformBrightnessOf(context) != Brightness.light;
-      await prefs.setBool('useDarkTheme', isDark);
-      await DynamicTheme.of(context)!.setTheme(isDark ? 1 : 0);
     }
     SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
     SystemChrome.setSystemUIOverlayStyle(

lib/ui/views/settings/settingsFragment/settings_update_theme.dart

@@ -8,6 +8,7 @@ import 'package:revanced_manager/app/app.locator.dart';
 import 'package:revanced_manager/services/manager_api.dart';
 import 'package:revanced_manager/ui/views/settings/settings_viewmodel.dart';
 import 'package:revanced_manager/ui/widgets/settingsView/settings_section.dart';
+import 'package:revanced_manager/ui/widgets/shared/custom_material_button.dart';
 import 'package:stacked/stacked.dart';
 
 final _settingViewModel = SettingsViewModel();
@@ -24,37 +25,114 @@ class SUpdateTheme extends BaseViewModel {
 
   Future<void> setUseDynamicTheme(BuildContext context, bool value) async {
     await _managerAPI.setUseDynamicTheme(value);
-    final int currentTheme = DynamicTheme.of(context)!.themeId;
+    final int currentTheme = (DynamicTheme.of(context)!.themeId ~/ 2) * 2;
-    if (currentTheme.isEven) {
+    await DynamicTheme.of(context)!.setTheme(currentTheme + (value ? 1 : 0));
-      await DynamicTheme.of(context)!.setTheme(value ? 2 : 0);
-    } else {
-      await DynamicTheme.of(context)!.setTheme(value ? 3 : 1);
-    }
     notifyListeners();
   }
 
-  bool getDarkThemeStatus() {
+  int getThemeMode() {
-    return _managerAPI.getUseDarkTheme();
+    return _managerAPI.getThemeMode();
   }
 
-  Future<void> setUseDarkTheme(BuildContext context, bool value) async {
+  Future<void> setThemeMode(BuildContext context, int value) async {
-    await _managerAPI.setUseDarkTheme(value);
+    await _managerAPI.setThemeMode(value);
-    final int currentTheme = DynamicTheme.of(context)!.themeId;
+    final bool isDynamicTheme = DynamicTheme.of(context)!.themeId.isEven;
-    if (currentTheme < 2) {
+    await DynamicTheme.of(context)!.setTheme(value * 2 + (isDynamicTheme ? 0 : 1));
-      await DynamicTheme.of(context)!.setTheme(value ? 1 : 0);
+    final bool isLight = value != 2 && (value == 1 || DynamicTheme.of(context)!.theme.brightness == Brightness.light);
-    } else {
-      await DynamicTheme.of(context)!.setTheme(value ? 3 : 2);
-    }
     SystemChrome.setSystemUIOverlayStyle(
       SystemUiOverlayStyle(
         systemNavigationBarIconBrightness:
-            value ? Brightness.light : Brightness.dark,
+        isLight ? Brightness.dark : Brightness.light,
       ),
     );
     notifyListeners();
   }
+
+  I18nText getThemeModeName() {
+    switch (getThemeMode()) {
+      case 0:
+        return I18nText('settingsView.systemThemeLabel');
+      case 1:
+        return I18nText('settingsView.lightThemeLabel');
+      case 2:
+        return I18nText('settingsView.darkThemeLabel');
+      default:
+        return I18nText('settingsView.systemThemeLabel');
+    }
+  }
+
+  Future<void> showThemeDialog(BuildContext context) async {
+    final ValueNotifier<int> newTheme = ValueNotifier(getThemeMode());
+
+    return showDialog(
+      context: context,
+      builder: (context) => AlertDialog(
+        title: I18nText('settingsView.themeModeLabel'),
+        icon: const Icon(Icons.palette),
+        contentPadding: const EdgeInsets.symmetric(vertical: 16),
+        backgroundColor: Theme.of(context).colorScheme.secondaryContainer,
+        content: SingleChildScrollView(
+          child: ValueListenableBuilder(
+            valueListenable: newTheme,
+            builder: (context, value, child) {
+              return Column(
+                mainAxisSize: MainAxisSize.min,
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: <Widget>[
+                  RadioListTile(
+                    title: I18nText('settingsView.systemThemeLabel'),
+                    contentPadding: const EdgeInsets.symmetric(horizontal: 16),
+                    value: 0,
+                    groupValue: value,
+                    onChanged: (value) {
+                      newTheme.value = value!;
+                    },
+                  ),
+                  RadioListTile(
+                    title: I18nText('settingsView.lightThemeLabel'),
+                    contentPadding: const EdgeInsets.symmetric(horizontal: 16),
+                    value: 1,
+                    groupValue: value,
+                    onChanged: (value) {
+                      newTheme.value = value!;
+                    },
+                  ),
+                  RadioListTile(
+                    title: I18nText('settingsView.darkThemeLabel'),
+                    contentPadding: const EdgeInsets.symmetric(horizontal: 16),
+                    value: 2,
+                    groupValue: value,
+                    onChanged: (value) {
+                      newTheme.value = value!;
+                    },
+                  ),
+                ],
+              );
+            },
+          ),
+        ),
+        actions: <Widget>[
+          CustomMaterialButton(
+            isFilled: false,
+            label: I18nText('cancelButton'),
+            onPressed: () {
+              Navigator.of(context).pop();
+            },
+          ),
+          CustomMaterialButton(
+            label: I18nText('okButton'),
+            onPressed: () {
+              setThemeMode(context, newTheme.value);
+              Navigator.of(context).pop();
+            },
+          ),
+        ],
+      ),
+    );
+  }
 }
 
+final sUpdateTheme = SUpdateTheme();
 class SUpdateThemeUI extends StatelessWidget {
   const SUpdateThemeUI({super.key});
 
@@ -63,10 +141,10 @@ class SUpdateThemeUI extends StatelessWidget {
     return SettingsSection(
       title: 'settingsView.appearanceSectionTitle',
       children: <Widget>[
-        SwitchListTile(
+        ListTile(
           contentPadding: const EdgeInsets.symmetric(horizontal: 20.0),
           title: I18nText(
-            'settingsView.darkThemeLabel',
+            'settingsView.themeModeLabel',
             child: const Text(
               '',
               style: TextStyle(
@@ -75,11 +153,9 @@ class SUpdateThemeUI extends StatelessWidget {
               ),
             ),
           ),
-          subtitle: I18nText('settingsView.darkThemeHint'),
+          trailing: CustomMaterialButton(
-          value: SUpdateTheme().getDarkThemeStatus(),
+            label: sUpdateTheme.getThemeModeName(),
-          onChanged: (value) => SUpdateTheme().setUseDarkTheme(
+            onPressed: () => { sUpdateTheme.showThemeDialog(context) },
-            context,
-            value,
           ),
         ),
         FutureBuilder<int>(