feat: improve app theming code and add Material You (#58)

assets/i18n/en.json

@@ -87,8 +87,10 @@
         "patcherSectionTitle": "Patcher",
         "teamSectionTitle": "Team",
         "infoSectionTitle": "Info",
-        "themeLabel": "Theme",
+        "darkThemeLabel": "Dark Mode",
-        "themeHint": "Change the theme of the app",
+        "darkThemeHint": "Welcome to the dark side",
+        "dynamicThemeLabel": "Material You",
+        "dynamicThemeHint": "Enjoy an experience closer to your device",
         "languageLabel": "Language",
         "englishOption": "English",
         "frenchOption": "French",

lib/app/app.dart

@@ -13,7 +13,6 @@ import 'package:revanced_manager/ui/views/root_checker/root_checker_view.dart';
 import 'package:revanced_manager/ui/views/settings/settings_view.dart';
 import 'package:stacked/stacked_annotations.dart';
 import 'package:stacked_services/stacked_services.dart';
-import 'package:stacked_themes/stacked_themes.dart';
 
 @StackedApp(
   routes: [
@@ -31,10 +30,6 @@ import 'package:stacked_themes/stacked_themes.dart';
     LazySingleton(classType: HomeViewModel),
     LazySingleton(classType: PatcherViewModel),
     LazySingleton(classType: NavigationService),
-    LazySingleton(
-      classType: ThemeService,
-      resolveUsing: ThemeService.getInstance,
-    ),
     LazySingleton(classType: ManagerAPI),
     LazySingleton(classType: PatcherAPI),
   ],

lib/constants.dart

@@ -1,27 +1,6 @@
-import 'package:flutter/material.dart';
-import 'package:google_fonts/google_fonts.dart';
-
-const purple80 = Color(0xFFD0BCFF);
-const purpleGrey80 = Color(0xFFCCC2DC);
-const pink80 = Color(0xFFEFB8C8);
-const purple40 = Color(0xFF6650a4);
-const purpleGrey40 = Color(0xFF625b71);
-const pink40 = Color(0xFF7D5260);
-
-final kInterTextStyle = GoogleFonts.inter();
-final kRobotoTextStyle = GoogleFonts.roboto();
-final kSettingItemTextStyle = GoogleFonts.roboto(
-  fontSize: 20,
-  fontWeight: FontWeight.w500,
-);
-final kSettingItemSubtitleTextStyle = GoogleFonts.roboto(
-  fontSize: 13,
-  fontWeight: FontWeight.w300,
-);
-
 String ghOrg = 'revanced';
 String patchesRepo = 'revanced-patches';
 String integrationsRepo = 'revanced-integrations';
-const patcherRepo = 'revanced-patcher';
+const String patcherRepo = 'revanced-patcher';
-const cliRepo = 'revanced-cli';
+const String cliRepo = 'revanced-cli';
-const managerRepo = 'revanced-manager';
+const String managerRepo = 'revanced-manager';

lib/main.dart

@@ -4,23 +4,22 @@ import 'package:flutter_i18n/flutter_i18n.dart';
 // ignore: depend_on_referenced_packages
 import 'package:flutter_localizations/flutter_localizations.dart';
 import 'package:revanced_manager/app/app.locator.dart';
-import 'package:revanced_manager/app/app.router.dart';
 import 'package:revanced_manager/main_viewmodel.dart';
 import 'package:revanced_manager/services/manager_api.dart';
 import 'package:revanced_manager/services/patcher_api.dart';
-import 'package:revanced_manager/theme.dart';
+import 'package:revanced_manager/ui/theme/dynamic_theme_builder.dart';
 import 'package:revanced_manager/ui/views/home/home_view.dart';
 import 'package:revanced_manager/ui/views/patcher/patcher_view.dart';
 import 'package:revanced_manager/ui/views/root_checker/root_checker_view.dart';
 import 'package:revanced_manager/ui/views/settings/settings_view.dart';
 import 'package:stacked/stacked.dart';
-import 'package:stacked_services/stacked_services.dart';
 import 'package:stacked_themes/stacked_themes.dart';
 
 Future main() async {
   await ThemeManager.initialise();
   await setupLocator();
   WidgetsFlutterBinding.ensureInitialized();
+  await locator<ManagerAPI>().initialize();
   runApp(const MyApp());
 }
 
@@ -29,47 +28,36 @@ class MyApp extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return ThemeBuilder(
+    return DynamicThemeBuilder(
-      defaultThemeMode: ThemeMode.dark,
+      title: 'ReVanced Manager',
-      darkTheme: darkTheme,
+      home: FutureBuilder<Widget>(
-      lightTheme: lightTheme,
+        future: _init(context),
-      builder: (context, regularTheme, darkTheme, themeMode) => MaterialApp(
+        builder: (context, snapshot) {
-        debugShowCheckedModeBanner: false,
+          if (snapshot.hasData) {
-        title: 'ReVanced Manager',
+            return snapshot.data!;
-        theme: lightTheme,
+          } else {
-        darkTheme: darkTheme,
+            return Center(
-        themeMode: themeMode,
+              child: CircularProgressIndicator(
-        navigatorKey: StackedService.navigatorKey,
+                color: Theme.of(context).colorScheme.secondary,
-        onGenerateRoute: StackedRouter().onGenerateRoute,
+              ),
-        home: FutureBuilder<Widget>(
+            );
-          future: _init(),
+          }
-          builder: (context, snapshot) {
+        },
-            if (snapshot.hasData) {
-              return snapshot.data!;
-            } else {
-              return Center(
-                child: CircularProgressIndicator(
-                  color: Theme.of(context).colorScheme.secondary,
-                ),
-              );
-            }
-          },
-        ),
-        localizationsDelegates: [
-          FlutterI18nDelegate(
-            translationLoader: FileTranslationLoader(
-              fallbackFile: 'en',
-              basePath: 'assets/i18n',
-            ),
-          ),
-          GlobalMaterialLocalizations.delegate,
-          GlobalWidgetsLocalizations.delegate
-        ],
       ),
+      localizationsDelegates: [
+        FlutterI18nDelegate(
+          translationLoader: FileTranslationLoader(
+            fallbackFile: 'en',
+            basePath: 'assets/i18n',
+          ),
+        ),
+        GlobalMaterialLocalizations.delegate,
+        GlobalWidgetsLocalizations.delegate
+      ],
     );
   }
 
-  Future<Widget> _init() async {
+  Future<Widget> _init(BuildContext context) async {
     await locator<ManagerAPI>().initialize();
     await locator<PatcherAPI>().initialize();
     bool? isRooted = locator<ManagerAPI>().isRooted();

lib/services/manager_api.dart

@@ -49,10 +49,30 @@ class ManagerAPI {
     return packageInfo.version;
   }
 
+  bool getUseDynamicTheme() {
+    return _prefs.getBool('useDynamicTheme') ?? false;
+  }
+
+  Future<void> setUseDynamicTheme(bool value) async {
+    await _prefs.setBool('useDynamicTheme', value);
+  }
+
+  bool getUseDarkTheme() {
+    return _prefs.getBool('useDarkTheme') ?? false;
+  }
+
+  Future<void> setUseDarkTheme(bool value) async {
+    await _prefs.setBool('useDarkTheme', value);
+  }
+
   bool? isRooted() {
     return _prefs.getBool('isRooted');
   }
 
+  Future<void> setIsRooted(bool value) async {
+    await _prefs.setBool('isRooted', value);
+  }
+
   List<PatchedApplication> getPatchedApps() {
     List<String> apps = _prefs.getStringList('patchedApps') ?? [];
     return apps

lib/services/patcher_api.dart

@@ -14,9 +14,7 @@ import 'package:share_extend/share_extend.dart';
 
 @lazySingleton
 class PatcherAPI {
-  static const patcherChannel = MethodChannel(
+  static const patcherChannel = MethodChannel('app.revanced.manager/patcher');
-    'app.revanced.manager/patcher',
-  );
   final ManagerAPI _managerAPI = locator<ManagerAPI>();
   final RootAPI _rootAPI = RootAPI();
   late Directory _tmpDir;

lib/theme.dart

@@ -1,80 +1,25 @@
 import 'package:flutter/material.dart';
 import 'package:google_fonts/google_fonts.dart';
-import 'package:stacked_themes/stacked_themes.dart';
 
-import 'app/app.locator.dart';
+var lightCustomTheme = ThemeData(
-
-final _themeService = locator<ThemeService>();
-bool isDark = _themeService.isDarkMode;
-
-var lightTheme = ThemeData.light().copyWith(
-  backgroundColor: const Color.fromARGB(255, 243, 243, 243),
-  navigationBarTheme: NavigationBarThemeData(
-    indicatorColor: const Color.fromRGBO(75, 129, 210, 0.20),
-    backgroundColor: const Color(0xffCBDFFC),
-    labelTextStyle: MaterialStateProperty.all(
-      GoogleFonts.roboto(
-        fontSize: 12,
-      ),
-    ),
-  ),
   useMaterial3: true,
-  textButtonTheme: TextButtonThemeData(
+  colorScheme: ColorScheme.fromSeed(
-    style: ButtonStyle(
+    seedColor: Colors.blue,
-      padding: MaterialStateProperty.all<EdgeInsetsGeometry>(
+    brightness: Brightness.light,
-        const EdgeInsets.symmetric(
-          vertical: 8,
-          horizontal: 14,
-        ),
-      ),
-      backgroundColor: MaterialStateProperty.all<Color>(
-        const Color(0xff4B7CC6),
-      ),
-    ),
-  ),
-  toggleableActiveColor: const Color(0xff3868AF),
-  colorScheme: const ColorScheme.light(
-    primary: Color.fromRGBO(154, 193, 252, 0.18),
-    secondary: Color(0xff3868AF),
-    tertiary: Color(0xff485A74),
-    background: Color(0xffDFD5EC),
   ),
+  textTheme: GoogleFonts.robotoTextTheme(ThemeData.light().textTheme),
 );
 
-var darkTheme = ThemeData.dark().copyWith(
+var darkCustomTheme = ThemeData(
-  backgroundColor: const Color(0xff1E1E1E),
-  navigationBarTheme: NavigationBarThemeData(
-    iconTheme: MaterialStateProperty.all(const IconThemeData(
-      color: Colors.white,
-    )),
-    indicatorColor: const Color(0xff223144),
-    backgroundColor: const Color(0x1b222b6b),
-    labelTextStyle: MaterialStateProperty.all(
-      GoogleFonts.roboto(
-        fontSize: 12,
-      ),
-    ),
-  ),
   useMaterial3: true,
+  colorScheme: ColorScheme.fromSeed(
+    seedColor: Colors.blue,
+    brightness: Brightness.dark,
+    primary: const Color(0xff7792BA),
+    surface: const Color(0xff0A0D11),
+  ),
+  canvasColor: const Color(0xff0A0D11),
   scaffoldBackgroundColor: const Color(0xff0A0D11),
-  textButtonTheme: TextButtonThemeData(
-    style: ButtonStyle(
-      padding: MaterialStateProperty.all<EdgeInsetsGeometry>(
-        const EdgeInsets.symmetric(
-          vertical: 8,
-          horizontal: 12,
-        ),
-      ),
-      backgroundColor: MaterialStateProperty.all<Color>(
-        const Color.fromRGBO(119, 146, 168, 1),
-      ),
-    ),
-  ),
   toggleableActiveColor: const Color(0xff7792BA),
-  colorScheme: const ColorScheme.dark(
+  textTheme: GoogleFonts.robotoTextTheme(ThemeData.dark().textTheme),
-    primary: Color(0xff11161C),
-    secondary: Color(0xff7792BA),
-    tertiary: Color(0xff8691A0),
-    background: Color(0xff0A0D11),
-  ),
 );

lib/ui/theme/dynamic_theme_builder.dart

@@ -0,0 +1,58 @@
+import 'package:dynamic_color/dynamic_color.dart';
+import 'package:dynamic_themes/dynamic_themes.dart';
+import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';
+import 'package:revanced_manager/app/app.router.dart';
+import 'package:revanced_manager/theme.dart';
+import 'package:stacked_services/stacked_services.dart';
+
+class DynamicThemeBuilder extends StatelessWidget {
+  final String title;
+  final Widget home;
+  final Iterable<LocalizationsDelegate> localizationsDelegates;
+
+  const DynamicThemeBuilder({
+    Key? key,
+    required this.title,
+    required this.home,
+    required this.localizationsDelegates,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return DynamicColorBuilder(
+      builder: (lightColorScheme, darkColorScheme) {
+        ThemeData lightDynamicTheme = ThemeData(
+          useMaterial3: true,
+          colorScheme: lightColorScheme?.harmonized(),
+          textTheme: GoogleFonts.robotoTextTheme(ThemeData.light().textTheme),
+        );
+        ThemeData darkDynamicTheme = ThemeData(
+          useMaterial3: true,
+          colorScheme: darkColorScheme?.harmonized(),
+          textTheme: GoogleFonts.robotoTextTheme(ThemeData.dark().textTheme),
+        );
+        return DynamicTheme(
+          themeCollection: ThemeCollection(
+            themes: {
+              0: lightCustomTheme,
+              1: darkCustomTheme,
+              2: lightDynamicTheme,
+              3: darkDynamicTheme,
+            },
+            fallbackTheme: lightCustomTheme,
+          ),
+          builder: (context, theme) => MaterialApp(
+            debugShowCheckedModeBanner: false,
+            title: title,
+            navigatorKey: StackedService.navigatorKey,
+            onGenerateRoute: StackedRouter().onGenerateRoute,
+            theme: theme,
+            home: home,
+            localizationsDelegates: localizationsDelegates,
+          ),
+        );
+      },
+    );
+  }
+}

lib/ui/views/app_selector/app_selector_view.dart

@@ -1,6 +1,5 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_i18n/flutter_i18n.dart';
-import 'package:revanced_manager/theme.dart';
 import 'package:revanced_manager/ui/widgets/appSelectorView/installed_app_item.dart';
 import 'package:revanced_manager/ui/widgets/shared/search_bar.dart';
 import 'package:revanced_manager/ui/widgets/appSelectorView/app_skeleton_loader.dart';
@@ -30,11 +29,6 @@ class _AppSelectorViewState extends State<AppSelectorView> {
             model.selectAppFromStorage(context);
             Navigator.of(context).pop();
           },
-          shape: RoundedRectangleBorder(
-            borderRadius: BorderRadius.circular(12),
-          ),
-          backgroundColor: Theme.of(context).colorScheme.secondary,
-          foregroundColor: Theme.of(context).colorScheme.surface,
         ),
         body: SafeArea(
           child: Padding(
@@ -50,15 +44,10 @@ class _AppSelectorViewState extends State<AppSelectorView> {
                         children: <Widget>[
                           SearchBar(
                             showSelectIcon: false,
-                            fillColor: isDark
-                                ? const Color(0xff1B222B)
-                                : Colors.grey[200],
                             hintText: FlutterI18n.translate(
                               context,
                               'appSelectorView.searchBarHint',
                             ),
-                            hintTextColor:
-                                Theme.of(context).colorScheme.tertiary,
                             onQueryChanged: (searchQuery) {
                               setState(() {
                                 _query = searchQuery;

lib/ui/views/app_selector/app_selector_viewmodel.dart

@@ -6,12 +6,13 @@ import 'package:flutter_i18n/flutter_i18n.dart';
 import 'package:fluttertoast/fluttertoast.dart';
 import 'package:revanced_manager/app/app.locator.dart';
 import 'package:revanced_manager/models/patched_application.dart';
+import 'package:revanced_manager/services/manager_api.dart';
 import 'package:revanced_manager/services/patcher_api.dart';
 import 'package:revanced_manager/ui/views/patcher/patcher_viewmodel.dart';
-import 'package:shared_preferences/shared_preferences.dart';
 import 'package:stacked/stacked.dart';
 
 class AppSelectorViewModel extends BaseViewModel {
+  final ManagerAPI _managerAPI = locator<ManagerAPI>();
   final PatcherAPI _patcherAPI = locator<PatcherAPI>();
   final List<ApplicationWithIcon> apps = [];
   bool noApps = false;
@@ -21,8 +22,7 @@ class AppSelectorViewModel extends BaseViewModel {
     apps.addAll(await _patcherAPI.getFilteredInstalledApps());
     apps.sort((a, b) => a.appName.compareTo(b.appName));
     noApps = apps.isEmpty;
-    SharedPreferences prefs = await SharedPreferences.getInstance();
+    _isRooted = _managerAPI.isRooted() ?? false;
-    _isRooted = prefs.getBool('isRooted') ?? false;
     notifyListeners();
   }
 

lib/ui/views/home/home_view.dart

@@ -2,10 +2,9 @@ import 'package:flutter/material.dart';
 import 'package:flutter_i18n/flutter_i18n.dart';
 import 'package:google_fonts/google_fonts.dart';
 import 'package:revanced_manager/app/app.locator.dart';
-import 'package:revanced_manager/theme.dart';
 import 'package:revanced_manager/ui/views/home/home_viewmodel.dart';
 import 'package:revanced_manager/ui/widgets/homeView/available_updates_card.dart';
-import 'package:revanced_manager/ui/widgets/homeView/dashboard_raw_chip.dart';
+import 'package:revanced_manager/ui/widgets/homeView/dashboard_chip.dart';
 import 'package:revanced_manager/ui/widgets/homeView/installed_apps_card.dart';
 import 'package:revanced_manager/ui/widgets/homeView/latest_commit_card.dart';
 import 'package:revanced_manager/ui/widgets/shared/custom_sliver_app_bar.dart';
@@ -29,8 +28,7 @@ class HomeView extends StatelessWidget {
                 child: Text(
                   '',
                   style: GoogleFonts.inter(
-                    color: Theme.of(context).textTheme.headline5!.color,
+                    color: Theme.of(context).textTheme.headline6!.color,
-                    fontWeight: FontWeight.w500,
                   ),
                 ),
               ),
@@ -44,13 +42,7 @@ class HomeView extends StatelessWidget {
                       'homeView.updatesSubtitle',
                       child: Text(
                         '',
-                        style: GoogleFonts.inter(
+                        style: Theme.of(context).textTheme.headline6!,
-                          fontSize: 20,
-                          fontWeight: FontWeight.w500,
-                          color: isDark
-                              ? const Color(0xffD1E1FA)
-                              : const Color(0xff384E6E),
-                        ),
                       ),
                     ),
                     const SizedBox(height: 10),
@@ -62,12 +54,7 @@ class HomeView extends StatelessWidget {
                       'homeView.patchedSubtitle',
                       child: Text(
                         '',
-                        style: GoogleFonts.inter(
+                        style: Theme.of(context).textTheme.headline6!,
-                          fontSize: 20,
-                          color: isDark
-                              ? const Color(0xffD1E1FA)
-                              : const Color(0xff384E6E),
-                        ),
                       ),
                     ),
                     const SizedBox(height: 8),

lib/ui/views/installer/installer_view.dart

@@ -3,6 +3,7 @@ import 'package:flutter_i18n/flutter_i18n.dart';
 import 'package:google_fonts/google_fonts.dart';
 import 'package:revanced_manager/ui/views/installer/installer_viewmodel.dart';
 import 'package:revanced_manager/ui/widgets/installerView/custom_material_button.dart';
+import 'package:revanced_manager/ui/widgets/shared/custom_card.dart';
 import 'package:revanced_manager/ui/widgets/shared/custom_sliver_app_bar.dart';
 import 'package:stacked/stacked.dart';
 
@@ -23,14 +24,13 @@ class InstallerView extends StatelessWidget {
                 title: Text(
                   model.headerLogs,
                   style: GoogleFonts.inter(
-                    color: Theme.of(context).textTheme.headline5!.color,
+                    color: Theme.of(context).textTheme.headline6!.color,
-                    fontWeight: FontWeight.w500,
                   ),
                 ),
                 bottom: PreferredSize(
                   preferredSize: const Size(double.infinity, 1.0),
                   child: LinearProgressIndicator(
-                    color: Theme.of(context).colorScheme.secondary,
+                    color: Theme.of(context).colorScheme.primary,
                     backgroundColor: Colors.white,
                     value: model.progress,
                   ),
@@ -41,13 +41,7 @@ class InstallerView extends StatelessWidget {
                 sliver: SliverList(
                   delegate: SliverChildListDelegate.fixed(
                     <Widget>[
-                      Container(
+                      CustomCard(
-                        padding: const EdgeInsets.all(12.0),
-                        width: double.infinity,
-                        decoration: BoxDecoration(
-                          color: Theme.of(context).colorScheme.primary,
-                          borderRadius: BorderRadius.circular(12),
-                        ),
                         child: Text(
                           model.logs,
                           style: GoogleFonts.jetBrainsMono(

lib/ui/views/patcher/patcher_view.dart

@@ -2,7 +2,6 @@ import 'package:flutter/material.dart';
 import 'package:flutter_i18n/flutter_i18n.dart';
 import 'package:google_fonts/google_fonts.dart';
 import 'package:revanced_manager/app/app.locator.dart';
-import 'package:revanced_manager/theme.dart';
 import 'package:revanced_manager/ui/views/app_selector/app_selector_view.dart';
 import 'package:revanced_manager/ui/views/installer/installer_view.dart';
 import 'package:revanced_manager/ui/views/patcher/patcher_viewmodel.dart';
@@ -30,11 +29,6 @@ class PatcherView extends StatelessWidget {
               label: I18nText('patcherView.patchButton'),
               icon: const Icon(Icons.build),
               onPressed: openContainer,
-              shape: RoundedRectangleBorder(
-                borderRadius: BorderRadius.circular(12),
-              ),
-              backgroundColor: Theme.of(context).colorScheme.secondary,
-              foregroundColor: Theme.of(context).colorScheme.surface,
             ),
           ),
         ),
@@ -46,8 +40,7 @@ class PatcherView extends StatelessWidget {
                 child: Text(
                   '',
                   style: GoogleFonts.inter(
-                    color: Theme.of(context).textTheme.headline5!.color,
+                    color: Theme.of(context).textTheme.headline6!.color,
-                    fontWeight: FontWeight.w500,
                   ),
                 ),
               ),
@@ -65,9 +58,7 @@ class PatcherView extends StatelessWidget {
                     ),
                     const SizedBox(height: 16),
                     Opacity(
-                      opacity: isDark
+                      opacity: model.dimPatchesCard() ? 0.5 : 1,
-                          ? (model.dimPatchesCard() ? 0.5 : 1)
-                          : (model.dimPatchesCard() ? 0.75 : 1),
                       child: OpenContainerWrapper(
                         openBuilder: (_, __) => const PatchesSelectorView(),
                         closedBuilder: (_, openContainer) => PatchSelectorCard(

lib/ui/views/patches_selector/patches_selector_view.dart

@@ -2,7 +2,6 @@ import 'package:expandable/expandable.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_i18n/flutter_i18n.dart';
 import 'package:google_fonts/google_fonts.dart';
-import 'package:revanced_manager/theme.dart';
 import 'package:revanced_manager/ui/views/patches_selector/patches_selector_viewmodel.dart';
 import 'package:revanced_manager/ui/widgets/patchesSelectorView/patch_item.dart';
 import 'package:revanced_manager/ui/widgets/patchesSelectorView/patch_options_fields.dart';
@@ -35,11 +34,6 @@ class _PatchesSelectorViewState extends State<PatchesSelectorView> {
               model.selectPatches();
               Navigator.of(context).pop();
             },
-            shape: RoundedRectangleBorder(
-              borderRadius: BorderRadius.circular(12),
-            ),
-            backgroundColor: Theme.of(context).colorScheme.secondary,
-            foregroundColor: Theme.of(context).colorScheme.surface,
           ),
         ),
         body: SafeArea(
@@ -49,20 +43,17 @@ class _PatchesSelectorViewState extends State<PatchesSelectorView> {
             child: model.patches.isEmpty
                 ? Center(
                     child: CircularProgressIndicator(
-                      color: Theme.of(context).colorScheme.secondary,
+                      color: Theme.of(context).colorScheme.primary,
                     ),
                   )
                 : Column(
                     children: <Widget>[
                       SearchBar(
                         showSelectIcon: true,
-                        fillColor:
-                            isDark ? const Color(0xff1B222B) : Colors.grey[200],
                         hintText: FlutterI18n.translate(
                           context,
                           'patchesSelectorView.searchBarHint',
                         ),
-                        hintTextColor: Theme.of(context).colorScheme.tertiary,
                         onQueryChanged: (searchQuery) {
                           setState(() {
                             _query = searchQuery;

lib/ui/views/root_checker/root_checker_view.dart

@@ -17,11 +17,6 @@ class RootCheckerView extends StatelessWidget {
           label: I18nText('rootCheckerView.nonRootButton'),
           icon: const Icon(Icons.keyboard_arrow_right),
           onPressed: () => model.navigateAsNonRoot(),
-          shape: RoundedRectangleBorder(
-            borderRadius: BorderRadius.circular(12),
-          ),
-          backgroundColor: Theme.of(context).colorScheme.secondary,
-          foregroundColor: Theme.of(context).colorScheme.surface,
         ),
         body: Container(
           height: double.infinity,
@@ -41,10 +36,10 @@ class RootCheckerView extends StatelessWidget {
               const SizedBox(height: 24),
               I18nText(
                 'rootCheckerView.widgetDescription',
-                child: Text(
+                child: const Text(
                   '',
                   textAlign: TextAlign.center,
-                  style: GoogleFonts.roboto(
+                  style: TextStyle(
                     fontSize: 17,
                     letterSpacing: 1.1,
                   ),
@@ -62,10 +57,6 @@ class RootCheckerView extends StatelessWidget {
                       translationParams: {
                         'isRooted': model.isRooted.toString(),
                       },
-                      child: Text(
-                        '',
-                        style: GoogleFonts.poppins(),
-                      ),
                     ),
                   ],
                 ),

lib/ui/views/root_checker/root_checker_viewmodel.dart

@@ -1,12 +1,13 @@
 import 'package:revanced_manager/app/app.locator.dart';
 import 'package:revanced_manager/app/app.router.dart';
-import 'package:shared_preferences/shared_preferences.dart';
+import 'package:revanced_manager/services/manager_api.dart';
 import 'package:stacked/stacked.dart';
 import 'package:root/root.dart';
 import 'package:stacked_services/stacked_services.dart';
 
 class RootCheckerViewModel extends BaseViewModel {
   final NavigationService _navigationService = locator<NavigationService>();
+  final ManagerAPI _managerAPI = locator<ManagerAPI>();
   bool isRooted = false;
 
   Future<void> navigateAsRoot() async {
@@ -25,8 +26,7 @@ class RootCheckerViewModel extends BaseViewModel {
   }
 
   Future<void> navigateToHome() async {
-    final prefs = await SharedPreferences.getInstance();
+    _managerAPI.setIsRooted(isRooted);
-    await prefs.setBool('isRooted', isRooted);
     _navigationService.navigateTo(Routes.navigation);
   }
 }

lib/ui/views/settings/settings_view.dart

@@ -1,8 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_i18n/flutter_i18n.dart';
 import 'package:google_fonts/google_fonts.dart';
-import 'package:revanced_manager/constants.dart';
-import 'package:revanced_manager/theme.dart';
 import 'package:revanced_manager/ui/views/contributors/contributors_view.dart';
 import 'package:revanced_manager/ui/views/settings/settings_viewmodel.dart';
 import 'package:revanced_manager/ui/widgets/settingsView/about_widget.dart';
@@ -14,7 +12,6 @@ import 'package:revanced_manager/ui/widgets/settingsView/sources_widget.dart';
 import 'package:revanced_manager/ui/widgets/shared/custom_sliver_app_bar.dart';
 import 'package:revanced_manager/ui/widgets/shared/open_container_wrapper.dart';
 import 'package:stacked/stacked.dart';
-import 'package:stacked_themes/stacked_themes.dart';
 
 class SettingsView extends StatelessWidget {
   final TextEditingController organizationController = TextEditingController();
@@ -37,8 +34,7 @@ class SettingsView extends StatelessWidget {
                 child: Text(
                   '',
                   style: GoogleFonts.inter(
-                    color: Theme.of(context).textTheme.headline5!.color,
+                    color: Theme.of(context).textTheme.headline6!.color,
-                    fontWeight: FontWeight.w500,
                   ),
                 ),
               ),
@@ -56,18 +52,39 @@ class SettingsView extends StatelessWidget {
                       children: <Widget>[
                         CustomSwitchTile(
                           title: I18nText(
-                            'settingsView.themeLabel',
+                            'settingsView.darkThemeLabel',
-                            child: Text(
+                            child: const Text(
                               '',
-                              style: kSettingItemTextStyle,
+                              style: TextStyle(
+                                fontSize: 20,
+                                fontWeight: FontWeight.w500,
+                              ),
                             ),
                           ),
-                          subtitle: I18nText('settingsView.themeHint'),
+                          subtitle: I18nText('settingsView.darkThemeHint'),
-                          value: isDark,
+                          value: model.getDarkThemeStatus(),
-                          onTap: (value) {
+                          onTap: (value) => model.setUseDarkTheme(
-                            isDark = value;
+                            context,
-                            getThemeManager(context).toggleDarkLightTheme();
+                            value,
-                          },
+                          ),
+                        ),
+                        CustomSwitchTile(
+                          title: I18nText(
+                            'settingsView.dynamicThemeLabel',
+                            child: const Text(
+                              '',
+                              style: TextStyle(
+                                fontSize: 20,
+                                fontWeight: FontWeight.w500,
+                              ),
+                            ),
+                          ),
+                          subtitle: I18nText('settingsView.dynamicThemeHint'),
+                          value: model.getDynamicThemeStatus(),
+                          onTap: (value) => model.setUseDynamicTheme(
+                            context,
+                            value,
+                          ),
                         ),
                       ],
                     ),
@@ -102,9 +119,12 @@ class SettingsView extends StatelessWidget {
                           contentPadding: EdgeInsets.zero,
                           title: I18nText(
                             'settingsView.rootModeLabel',
-                            child: Text(
+                            child: const Text(
                               '',
-                              style: kSettingItemTextStyle,
+                              style: TextStyle(
+                                fontSize: 20,
+                                fontWeight: FontWeight.w500,
+                              ),
                             ),
                           ),
                           subtitle: I18nText('settingsView.rootModeHint'),
@@ -129,7 +149,13 @@ class SettingsView extends StatelessWidget {
                             contentPadding: EdgeInsets.zero,
                             title: I18nText(
                               'settingsView.contributorsLabel',
-                              child: Text('', style: kSettingItemTextStyle),
+                              child: const Text(
+                                '',
+                                style: TextStyle(
+                                  fontSize: 20,
+                                  fontWeight: FontWeight.w500,
+                                ),
+                              ),
                             ),
                             subtitle: I18nText('settingsView.contributorsHint'),
                             onTap: openContainer,

lib/ui/views/settings/settings_viewmodel.dart

@@ -1,13 +1,18 @@
+// ignore_for_file: use_build_context_synchronously
+
+import 'package:dynamic_themes/dynamic_themes.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_i18n/flutter_i18n.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:stacked/stacked.dart';
 import 'package:stacked_services/stacked_services.dart';
 import 'package:timeago/timeago.dart';
 
 class SettingsViewModel extends BaseViewModel {
   final NavigationService _navigationService = locator<NavigationService>();
+  final ManagerAPI _managerAPI = locator<ManagerAPI>();
 
   void setLanguage(String language) {
     notifyListeners();
@@ -23,4 +28,34 @@ class SettingsViewModel extends BaseViewModel {
       setLocaleMessages(value, EnMessages());
     }
   }
+
+  bool getDynamicThemeStatus() {
+    return _managerAPI.getUseDynamicTheme();
+  }
+
+  void setUseDynamicTheme(BuildContext context, bool value) async {
+    await _managerAPI.setUseDynamicTheme(value);
+    int currentTheme = DynamicTheme.of(context)!.themeId;
+    if (currentTheme.isEven) {
+      DynamicTheme.of(context)!.setTheme(value ? 2 : 0);
+    } else {
+      DynamicTheme.of(context)!.setTheme(value ? 3 : 1);
+    }
+    notifyListeners();
+  }
+
+  bool getDarkThemeStatus() {
+    return _managerAPI.getUseDarkTheme();
+  }
+
+  void setUseDarkTheme(BuildContext context, bool value) async {
+    await _managerAPI.setUseDarkTheme(value);
+    int currentTheme = DynamicTheme.of(context)!.themeId;
+    if (currentTheme < 2) {
+      DynamicTheme.of(context)!.setTheme(value ? 1 : 0);
+    } else {
+      DynamicTheme.of(context)!.setTheme(value ? 3 : 2);
+    }
+    notifyListeners();
+  }
 }

lib/ui/widgets/appSelectorView/installed_app_item.dart

@@ -1,7 +1,6 @@
 import 'dart:typed_data';
 import 'package:flutter/material.dart';
-import 'package:google_fonts/google_fonts.dart';
+import 'package:revanced_manager/ui/widgets/shared/custom_card.dart';
-import 'package:revanced_manager/constants.dart';
 
 class InstalledAppItem extends StatefulWidget {
   final String name;
@@ -24,12 +23,7 @@ class _InstalledAppItemState extends State<InstalledAppItem> {
   Widget build(BuildContext context) {
     return Padding(
       padding: const EdgeInsets.symmetric(vertical: 4.0),
-      child: Container(
+      child: CustomCard(
-        padding: const EdgeInsets.all(12.0),
-        decoration: BoxDecoration(
-          borderRadius: BorderRadius.circular(12),
-          color: Theme.of(context).colorScheme.primary,
-        ),
         child: Row(
           mainAxisAlignment: MainAxisAlignment.spaceBetween,
           children: <Widget>[
@@ -52,16 +46,13 @@ class _InstalledAppItemState extends State<InstalledAppItem> {
                     widget.name,
                     maxLines: 2,
                     overflow: TextOverflow.visible,
-                    style: GoogleFonts.inter(
+                    style: const TextStyle(
                       fontSize: 16,
                       fontWeight: FontWeight.w500,
                     ),
                   ),
                   const SizedBox(height: 4),
-                  Text(
+                  Text(widget.pkgName),
-                    widget.pkgName,
-                    style: kRobotoTextStyle,
-                  ),
                 ],
               ),
             ),

lib/ui/widgets/contributorsView/contributors_card.dart

@@ -1,7 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:github/github.dart';
-import 'package:google_fonts/google_fonts.dart';
+import 'package:revanced_manager/ui/widgets/shared/custom_card.dart';
-import 'package:revanced_manager/theme.dart';
 import 'package:url_launcher/url_launcher.dart';
 
 class ContributorsCard extends StatefulWidget {
@@ -23,54 +22,49 @@ class ContributorsCard extends StatefulWidget {
 class _ContributorsCardState extends State<ContributorsCard> {
   @override
   Widget build(BuildContext context) {
-    return Column(
+    return Padding(
-      crossAxisAlignment: CrossAxisAlignment.start,
+      padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 20),
-      children: <Widget>[
+      child: Column(
-        Padding(
+        crossAxisAlignment: CrossAxisAlignment.start,
-          padding: const EdgeInsets.symmetric(vertical: 4.0, horizontal: 4.0),
+        children: <Widget>[
-          child: Text(
+          Padding(
-            widget.title,
+            padding: const EdgeInsets.only(bottom: 8.0),
-            style: GoogleFonts.poppins(
+            child: Text(
-              fontSize: 20,
+              widget.title,
-              fontWeight: FontWeight.w600,
+              style: const TextStyle(
+                fontSize: 20,
+                fontWeight: FontWeight.w600,
+              ),
             ),
           ),
-        ),
+          CustomCard(
-        Container(
+            child: GridView.builder(
-          margin: const EdgeInsets.all(8.0),
+              shrinkWrap: true,
-          padding: const EdgeInsets.all(4.0),
+              physics: const NeverScrollableScrollPhysics(),
-          decoration: BoxDecoration(
+              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
-            color: isDark
+                crossAxisCount: 7,
-                ? Theme.of(context).colorScheme.primary
+                mainAxisSpacing: 8,
-                : Theme.of(context).navigationBarTheme.backgroundColor!,
+                crossAxisSpacing: 8,
-            borderRadius: BorderRadius.circular(12),
+              ),
-          ),
+              itemCount: widget.contributors.length,
-          height: widget.height,
+              itemBuilder: (context, index) {
-          child: GridView.builder(
+                return ClipRRect(
-            physics: const NeverScrollableScrollPhysics(),
+                  borderRadius: BorderRadius.circular(100),
-            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+                  child: GestureDetector(
-              crossAxisCount: 7,
+                    onTap: () => launchUrl(
-              mainAxisSpacing: 8,
+                        Uri.parse(widget.contributors[index].htmlUrl!)),
-              crossAxisSpacing: 8,
+                    child: Image.network(
-            ),
+                      widget.contributors[index].avatarUrl!,
-            itemCount: widget.contributors.length,
+                      height: 40,
-            itemBuilder: (context, index) {
+                      width: 40,
-              return ClipRRect(
+                    ),
-                borderRadius: BorderRadius.circular(100),
-                child: GestureDetector(
-                  onTap: () =>
-                      launchUrl(Uri.parse(widget.contributors[index].htmlUrl!)),
-                  child: Image.network(
-                    widget.contributors[index].avatarUrl!,
-                    height: 40,
-                    width: 40,
                   ),
-                ),
+                );
-              );
+              },
-            },
+            ),
           ),
-        ),
+        ],
-      ],
+      ),
     );
   }
 }

lib/ui/widgets/homeView/available_updates_card.dart

@@ -4,6 +4,7 @@ import 'package:revanced_manager/app/app.locator.dart';
 import 'package:revanced_manager/models/patched_application.dart';
 import 'package:revanced_manager/ui/views/home/home_viewmodel.dart';
 import 'package:revanced_manager/ui/widgets/shared/application_item.dart';
+import 'package:revanced_manager/ui/widgets/shared/custom_card.dart';
 
 class AvailableUpdatesCard extends StatelessWidget {
   AvailableUpdatesCard({Key? key}) : super(key: key);
@@ -14,28 +15,18 @@ class AvailableUpdatesCard extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return apps.isEmpty
-        ? Container(
+        ? CustomCard(
-            decoration: BoxDecoration(
-              borderRadius: BorderRadius.circular(12),
-              color: Theme.of(context).colorScheme.primary,
-            ),
-            padding: const EdgeInsets.symmetric(vertical: 18, horizontal: 20),
             child: Center(
               child: Column(
                 children: <Widget>[
-                  Icon(
+                  const Icon(Icons.update_disabled, size: 40),
-                    Icons.update_disabled,
-                    size: 40,
-                    color: Theme.of(context).colorScheme.secondary,
-                  ),
                   const SizedBox(height: 16),
                   I18nText(
                     'homeView.noUpdates',
                     child: Text(
                       '',
                       textAlign: TextAlign.center,
-                      style: Theme.of(context).textTheme.subtitle1!.copyWith(
+                      style: Theme.of(context).textTheme.subtitle1!,
-                          color: Theme.of(context).colorScheme.secondary),
                     ),
                   )
                 ],

lib/ui/widgets/homeView/dashboard_chip.dart

@@ -0,0 +1,31 @@
+import 'package:flutter/material.dart';
+
+class DashboardChip extends StatelessWidget {
+  final Widget label;
+  final bool isSelected;
+  final Function(bool)? onSelected;
+
+  const DashboardChip({
+    Key? key,
+    required this.label,
+    required this.isSelected,
+    this.onSelected,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return RawChip(
+      showCheckmark: false,
+      label: label,
+      selected: isSelected,
+      labelStyle: Theme.of(context).textTheme.subtitle2!.copyWith(
+            color: Theme.of(context).colorScheme.primary,
+            fontWeight: FontWeight.bold,
+          ),
+      backgroundColor: Colors.transparent,
+      selectedColor: Theme.of(context).colorScheme.secondaryContainer,
+      padding: const EdgeInsets.all(10),
+      onSelected: onSelected,
+    );
+  }
+}

lib/ui/widgets/homeView/dashboard_raw_chip.dart

@@ -1,52 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:google_fonts/google_fonts.dart';
-import 'package:revanced_manager/theme.dart';
-
-class DashboardChip extends StatelessWidget {
-  final Widget label;
-  final bool isSelected;
-  final Function(bool)? onSelected;
-
-  const DashboardChip({
-    Key? key,
-    required this.label,
-    required this.isSelected,
-    this.onSelected,
-  }) : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    return RawChip(
-      showCheckmark: false,
-      label: label,
-      selected: isSelected,
-      labelStyle: GoogleFonts.inter(
-        color: isSelected
-            ? isDark
-                ? const Color(0xff95C0FE)
-                : Theme.of(context).colorScheme.secondary
-            : isDark
-                ? Colors.grey
-                : Colors.grey[700],
-        fontWeight: FontWeight.w500,
-      ),
-      backgroundColor:
-          isDark ? Theme.of(context).colorScheme.background : Colors.white,
-      selectedColor: const Color.fromRGBO(118, 155, 209, 0.42),
-      shape: RoundedRectangleBorder(
-        borderRadius: BorderRadius.circular(12),
-        side: BorderSide(
-          width: 1,
-          color: isDark
-              ? isSelected
-                  ? const Color.fromRGBO(118, 155, 209, 0.42)
-                  : Colors.grey
-              : isSelected
-                  ? const Color.fromRGBO(118, 155, 209, 0.42)
-                  : Colors.grey,
-        ),
-      ),
-      onSelected: onSelected,
-    );
-  }
-}

lib/ui/widgets/homeView/installed_apps_card.dart

@@ -5,6 +5,7 @@ import 'package:revanced_manager/app/app.locator.dart';
 import 'package:revanced_manager/models/patched_application.dart';
 import 'package:revanced_manager/ui/views/home/home_viewmodel.dart';
 import 'package:revanced_manager/ui/widgets/shared/application_item.dart';
+import 'package:revanced_manager/ui/widgets/shared/custom_card.dart';
 
 class InstalledAppsCard extends StatelessWidget {
   InstalledAppsCard({Key? key}) : super(key: key);
@@ -15,28 +16,18 @@ class InstalledAppsCard extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return apps.isEmpty
-        ? Container(
+        ? CustomCard(
-            decoration: BoxDecoration(
-              borderRadius: BorderRadius.circular(12),
-              color: Theme.of(context).colorScheme.primary,
-            ),
-            padding: const EdgeInsets.symmetric(vertical: 18, horizontal: 20),
             child: Center(
               child: Column(
                 children: <Widget>[
-                  Icon(
+                  const Icon(Icons.file_download_off, size: 40),
-                    Icons.file_download_off,
-                    size: 40,
-                    color: Theme.of(context).colorScheme.secondary,
-                  ),
                   const SizedBox(height: 16),
                   I18nText(
                     'homeView.noInstallations',
                     child: Text(
                       '',
                       textAlign: TextAlign.center,
-                      style: Theme.of(context).textTheme.subtitle1!.copyWith(
+                      style: Theme.of(context).textTheme.subtitle1!,
-                          color: Theme.of(context).colorScheme.secondary),
                     ),
                   )
                 ],

lib/ui/widgets/homeView/latest_commit_card.dart

@@ -1,11 +1,11 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_i18n/flutter_i18n.dart';
-import 'package:google_fonts/google_fonts.dart';
 import 'package:revanced_manager/app/app.locator.dart';
 import 'package:revanced_manager/services/github_api.dart';
 import 'package:revanced_manager/constants.dart';
 import 'package:revanced_manager/ui/views/home/home_viewmodel.dart';
-import 'package:revanced_manager/ui/widgets/shared/patch_text_button.dart';
+import 'package:revanced_manager/ui/widgets/installerView/custom_material_button.dart';
+import 'package:revanced_manager/ui/widgets/shared/custom_card.dart';
 
 class LatestCommitCard extends StatefulWidget {
   final Function() onPressed;
@@ -24,12 +24,7 @@ class _LatestCommitCardState extends State<LatestCommitCard> {
 
   @override
   Widget build(BuildContext context) {
-    return Container(
+    return CustomCard(
-      decoration: BoxDecoration(
-        borderRadius: BorderRadius.circular(12),
-        color: Theme.of(context).colorScheme.primary,
-      ),
-      padding: const EdgeInsets.symmetric(vertical: 18, horizontal: 20),
       child: Row(
         mainAxisAlignment: MainAxisAlignment.spaceBetween,
         children: <Widget>[
@@ -40,11 +35,9 @@ class _LatestCommitCardState extends State<LatestCommitCard> {
                 children: <Widget>[
                   I18nText(
                     'latestCommitCard.patcherLabel',
-                    child: Text(
+                    child: const Text(
                       '',
-                      style: GoogleFonts.roboto(
+                      style: TextStyle(fontWeight: FontWeight.bold),
-                        fontWeight: FontWeight.w700,
-                      ),
                     ),
                   ),
                   FutureBuilder<String>(
@@ -60,7 +53,6 @@ class _LatestCommitCardState extends State<LatestCommitCard> {
                               context,
                               'latestCommitCard.loadingLabel',
                             ),
-                      style: kRobotoTextStyle,
                     ),
                   ),
                 ],
@@ -70,28 +62,20 @@ class _LatestCommitCardState extends State<LatestCommitCard> {
                 children: <Widget>[
                   I18nText(
                     'latestCommitCard.managerLabel',
-                    child: Text(
+                    child: const Text(
                       '',
-                      style: GoogleFonts.roboto(
+                      style: TextStyle(fontWeight: FontWeight.bold),
-                        fontWeight: FontWeight.w700,
-                      ),
                     ),
                   ),
                   FutureBuilder<String>(
                     future: _githubAPI.latestCommitTime(ghOrg, managerRepo),
-                    builder: (context, snapshot) => Text(
+                    builder: (context, snapshot) =>
-                      snapshot.hasData && snapshot.data!.isNotEmpty
+                        snapshot.hasData && snapshot.data!.isNotEmpty
-                          ? FlutterI18n.translate(
+                            ? I18nText(
-                              context,
+                                'latestCommitCard.timeagoLabel',
-                              'latestCommitCard.timeagoLabel',
+                                translationParams: {'time': snapshot.data!},
-                              translationParams: {'time': snapshot.data!},
+                              )
-                            )
+                            : I18nText('latestCommitCard.loadingLabel'),
-                          : FlutterI18n.translate(
-                              context,
-                              'latestCommitCard.loadingLabel',
-                            ),
-                      style: kRobotoTextStyle,
-                    ),
                   ),
                 ],
               ),
@@ -101,17 +85,13 @@ class _LatestCommitCardState extends State<LatestCommitCard> {
             future: locator<HomeViewModel>().hasManagerUpdates(),
             initialData: false,
             builder: (context, snapshot) => Opacity(
-              opacity: snapshot.hasData && snapshot.data! ? 1.0 : 0.5,
+              opacity: snapshot.hasData && snapshot.data! ? 1.0 : 1.0,
-              child: PatchTextButton(
+              child: CustomMaterialButton(
-                text: FlutterI18n.translate(
+                isExpanded: false,
-                  context,
+                label: I18nText('latestCommitCard.updateButton'),
-                  'latestCommitCard.updateButton',
-                ),
                 onPressed: snapshot.hasData && snapshot.data!
                     ? widget.onPressed
                     : () => {},
-                backgroundColor: Theme.of(context).colorScheme.secondary,
-                borderColor: Theme.of(context).colorScheme.secondary,
               ),
             ),
           ),

lib/ui/widgets/installerView/custom_material_button.dart

@@ -1,5 +1,4 @@
 import 'package:flutter/material.dart';
-import 'package:revanced_manager/theme.dart';
 
 class CustomMaterialButton extends StatelessWidget {
   final Widget label;
@@ -21,43 +20,17 @@ class CustomMaterialButton extends StatelessWidget {
       style: ButtonStyle(
         padding: MaterialStateProperty.all(
           isExpanded
-              ? const EdgeInsets.symmetric(
+              ? const EdgeInsets.symmetric(horizontal: 24, vertical: 12)
-                  horizontal: 24,
+              : const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
-                  vertical: 12,
-                )
-              : const EdgeInsets.symmetric(
-                  horizontal: 20,
-                  vertical: 12,
-                ),
-        ),
-        shape: MaterialStateProperty.all(
-          RoundedRectangleBorder(
-            borderRadius: BorderRadius.circular(100),
-            side: BorderSide(
-              width: 1,
-              color: Theme.of(context).colorScheme.secondary,
-            ),
-          ),
-        ),
-        side: MaterialStateProperty.all(
-          BorderSide(
-            color: isFilled
-                ? Colors.transparent
-                : Theme.of(context).iconTheme.color!.withOpacity(0.4),
-            width: 1,
-          ),
         ),
+        shape: MaterialStateProperty.all(const StadiumBorder()),
         backgroundColor: MaterialStateProperty.all(
-          isFilled
+          isFilled ? Theme.of(context).colorScheme.primary : Colors.transparent,
-              ? Theme.of(context).colorScheme.secondary
-              : isDark
-                  ? Theme.of(context).colorScheme.background
-                  : Colors.white,
         ),
         foregroundColor: MaterialStateProperty.all(
           isFilled
-              ? Theme.of(context).colorScheme.background
+              ? Theme.of(context).colorScheme.surface
-              : Theme.of(context).colorScheme.secondary,
+              : Theme.of(context).colorScheme.primary,
         ),
       ),
       onPressed: onPressed,

lib/ui/widgets/patcherView/app_selector_card.dart

@@ -1,10 +1,9 @@
 import 'dart:typed_data';
 import 'package:flutter/material.dart';
 import 'package:flutter_i18n/flutter_i18n.dart';
-import 'package:google_fonts/google_fonts.dart';
 import 'package:revanced_manager/app/app.locator.dart';
-import 'package:revanced_manager/constants.dart';
 import 'package:revanced_manager/ui/views/patcher/patcher_viewmodel.dart';
+import 'package:revanced_manager/ui/widgets/shared/custom_card.dart';
 
 class AppSelectorCard extends StatelessWidget {
   final Function() onPressed;
@@ -18,13 +17,7 @@ class AppSelectorCard extends StatelessWidget {
   Widget build(BuildContext context) {
     return GestureDetector(
       onTap: onPressed,
-      child: Container(
+      child: CustomCard(
-        width: double.infinity,
-        decoration: BoxDecoration(
-          borderRadius: BorderRadius.circular(12),
-          color: Theme.of(context).colorScheme.primary,
-        ),
-        padding: const EdgeInsets.symmetric(vertical: 18, horizontal: 20),
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: <Widget>[
@@ -32,9 +25,9 @@ class AppSelectorCard extends StatelessWidget {
               locator<PatcherViewModel>().selectedApp == null
                   ? 'appSelectorCard.widgetTitle'
                   : 'appSelectorCard.widgetTitleSelected',
-              child: Text(
+              child: const Text(
                 '',
-                style: GoogleFonts.roboto(
+                style: TextStyle(
                   fontSize: 18,
                   fontWeight: FontWeight.w500,
                 ),
@@ -42,13 +35,7 @@ class AppSelectorCard extends StatelessWidget {
             ),
             const SizedBox(height: 10),
             locator<PatcherViewModel>().selectedApp == null
-                ? I18nText(
+                ? I18nText('appSelectorCard.widgetSubtitle')
-                    'appSelectorCard.widgetSubtitle',
-                    child: Text(
-                      '',
-                      style: kRobotoTextStyle,
-                    ),
-                  )
                 : Row(
                     children: <Widget>[
                       SizedBox(
@@ -63,10 +50,7 @@ class AppSelectorCard extends StatelessWidget {
                         ),
                       ),
                       const SizedBox(width: 4),
-                      Text(
+                      Text(_getAppSelection()),
-                        _getAppSelection(),
-                        style: kRobotoTextStyle,
-                      ),
                     ],
                   ),
           ],

lib/ui/widgets/patcherView/patch_selector_card.dart

@@ -1,10 +1,9 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_i18n/flutter_i18n.dart';
-import 'package:google_fonts/google_fonts.dart';
 import 'package:revanced_manager/app/app.locator.dart';
-import 'package:revanced_manager/constants.dart';
 import 'package:revanced_manager/models/patch.dart';
 import 'package:revanced_manager/ui/views/patcher/patcher_viewmodel.dart';
+import 'package:revanced_manager/ui/widgets/shared/custom_card.dart';
 
 class PatchSelectorCard extends StatelessWidget {
   final Function() onPressed;
@@ -18,13 +17,7 @@ class PatchSelectorCard extends StatelessWidget {
   Widget build(BuildContext context) {
     return GestureDetector(
       onTap: onPressed,
-      child: Container(
+      child: CustomCard(
-        width: double.infinity,
-        decoration: BoxDecoration(
-          borderRadius: BorderRadius.circular(12),
-          color: Theme.of(context).colorScheme.primary,
-        ),
-        padding: const EdgeInsets.symmetric(vertical: 18, horizontal: 20),
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: <Widget>[
@@ -32,9 +25,9 @@ class PatchSelectorCard extends StatelessWidget {
               locator<PatcherViewModel>().selectedPatches.isEmpty
                   ? 'patchSelectorCard.widgetTitle'
                   : 'patchSelectorCard.widgetTitleSelected',
-              child: Text(
+              child: const Text(
                 '',
-                style: GoogleFonts.roboto(
+                style: TextStyle(
                   fontSize: 18,
                   fontWeight: FontWeight.w500,
                 ),
@@ -42,25 +35,10 @@ class PatchSelectorCard extends StatelessWidget {
             ),
             const SizedBox(height: 10),
             locator<PatcherViewModel>().selectedApp == null
-                ? I18nText(
+                ? I18nText('patchSelectorCard.widgetSubtitle')
-                    'patchSelectorCard.widgetSubtitle',
-                    child: Text(
-                      '',
-                      style: kRobotoTextStyle,
-                    ),
-                  )
                 : locator<PatcherViewModel>().selectedPatches.isEmpty
-                    ? I18nText(
+                    ? I18nText('patchSelectorCard.widgetEmptySubtitle')
-                        'patchSelectorCard.widgetEmptySubtitle',
+                    : Text(_getPatchesSelection()),
-                        child: Text(
-                          '',
-                          style: kRobotoTextStyle,
-                        ),
-                      )
-                    : Text(
-                        _getPatchesSelection(),
-                        style: kRobotoTextStyle,
-                      ),
           ],
         ),
       ),

lib/ui/widgets/patchesSelectorView/patch_item.dart

@@ -1,8 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_i18n/flutter_i18n.dart';
-import 'package:google_fonts/google_fonts.dart';
 import 'package:revanced_manager/ui/widgets/patchesSelectorView/patch_options_fields.dart';
-import 'package:revanced_manager/ui/widgets/shared/patch_text_button.dart';
+import 'package:revanced_manager/ui/widgets/installerView/custom_material_button.dart';
+import 'package:revanced_manager/ui/widgets/shared/custom_card.dart';
 
 // ignore: must_be_immutable
 class PatchItem extends StatefulWidget {
@@ -43,96 +43,92 @@ class _PatchItemState extends State<PatchItem> {
         setState(() => widget.isSelected = !widget.isSelected);
         widget.onChanged(widget.isSelected);
       },
-      child: Container(
+      child: Padding(
-        decoration: BoxDecoration(
+        padding: const EdgeInsets.symmetric(vertical: 4.0),
-          color: Theme.of(context).colorScheme.primary,
+        child: CustomCard(
-          borderRadius: BorderRadius.circular(12),
+          child: Column(
-        ),
+            children: <Widget>[
-        padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 12),
+              Row(
-        margin: const EdgeInsets.symmetric(vertical: 4, horizontal: 8),
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
-        child: Column(
+                children: <Widget>[
-          children: <Widget>[
+                  Flexible(
-            Row(
+                    child: Column(
-              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                      crossAxisAlignment: CrossAxisAlignment.start,
-              children: <Widget>[
+                      children: <Widget>[
-                Flexible(
+                        Row(
-                  child: Column(
+                          crossAxisAlignment: CrossAxisAlignment.end,
-                    crossAxisAlignment: CrossAxisAlignment.start,
+                          children: <Widget>[
-                    children: <Widget>[
+                            Text(
-                      Row(
+                              widget.simpleName,
-                        crossAxisAlignment: CrossAxisAlignment.end,
+                              style: const TextStyle(
-                        children: <Widget>[
+                                fontSize: 16,
-                          Text(
+                                fontWeight: FontWeight.w600,
-                            widget.simpleName,
-                            style: GoogleFonts.inter(
-                              fontSize: 16,
-                              fontWeight: FontWeight.w600,
-                            ),
-                          ),
-                          const SizedBox(width: 4),
-                          Text(widget.version)
-                        ],
-                      ),
-                      const SizedBox(height: 4),
-                      Text(
-                        widget.description,
-                        softWrap: true,
-                        maxLines: 3,
-                        overflow: TextOverflow.visible,
-                        style: GoogleFonts.roboto(
-                          fontSize: 14,
-                        ),
-                      ),
-                    ],
-                  ),
-                ),
-                Transform.scale(
-                  scale: 1.2,
-                  child: Checkbox(
-                    value: widget.isSelected,
-                    activeColor: Theme.of(context).colorScheme.secondary,
-                    onChanged: (newValue) {
-                      setState(() => widget.isSelected = newValue!);
-                      widget.onChanged(widget.isSelected);
-                    },
-                  ),
-                )
-              ],
-            ),
-            widget.isUnsupported
-                ? Row(
-                    children: <Widget>[
-                      Padding(
-                        padding: const EdgeInsets.only(top: 8),
-                        child: TextButton.icon(
-                          label: I18nText('patchItem.unsupportedWarningButton'),
-                          icon: const Icon(Icons.warning),
-                          onPressed: () => _showUnsupportedWarningDialog(),
-                          style: ButtonStyle(
-                            shape: MaterialStateProperty.all(
-                              RoundedRectangleBorder(
-                                borderRadius: BorderRadius.circular(12),
-                                side: BorderSide(
-                                  width: 1,
-                                  color:
-                                      Theme.of(context).colorScheme.secondary,
-                                ),
                               ),
                             ),
-                            backgroundColor: MaterialStateProperty.all(
+                            const SizedBox(width: 4),
-                              Colors.transparent,
+                            Text(widget.version)
-                            ),
+                          ],
-                            foregroundColor: MaterialStateProperty.all(
+                        ),
-                              Theme.of(context).colorScheme.secondary,
+                        const SizedBox(height: 4),
+                        Text(
+                          widget.description,
+                          softWrap: true,
+                          maxLines: 3,
+                          overflow: TextOverflow.visible,
+                          style: const TextStyle(fontSize: 14),
+                        ),
+                      ],
+                    ),
+                  ),
+                  Transform.scale(
+                    scale: 1.2,
+                    child: Checkbox(
+                      value: widget.isSelected,
+                      activeColor: Theme.of(context).colorScheme.primary,
+                      onChanged: (newValue) {
+                        setState(() => widget.isSelected = newValue!);
+                        widget.onChanged(widget.isSelected);
+                      },
+                    ),
+                  )
+                ],
+              ),
+              widget.isUnsupported
+                  ? Row(
+                      children: <Widget>[
+                        Padding(
+                          padding: const EdgeInsets.only(top: 8),
+                          child: TextButton.icon(
+                            label:
+                                I18nText('patchItem.unsupportedWarningButton'),
+                            icon: const Icon(Icons.warning),
+                            onPressed: () => _showUnsupportedWarningDialog(),
+                            style: ButtonStyle(
+                              shape: MaterialStateProperty.all(
+                                RoundedRectangleBorder(
+                                  borderRadius: BorderRadius.circular(12),
+                                  side: BorderSide(
+                                    width: 1,
+                                    color:
+                                        Theme.of(context).colorScheme.primary,
+                                  ),
+                                ),
+                              ),
+                              backgroundColor: MaterialStateProperty.all(
+                                Colors.transparent,
+                              ),
+                              foregroundColor: MaterialStateProperty.all(
+                                Theme.of(context).colorScheme.primary,
+                              ),
                             ),
                           ),
                         ),
-                      ),
+                      ],
-                    ],
+                    )
-                  )
+                  : Container(),
-                : Container(),
+              widget.child ?? const SizedBox(),
-            widget.child ?? const SizedBox(),
+            ],
-          ],
+          ),
         ),
       ),
     );
@@ -152,14 +148,13 @@ class _PatchItemState extends State<PatchItem> {
           },
         ),
         actions: [
-          PatchTextButton(
+          CustomMaterialButton(
-            text: FlutterI18n.translate(context, 'okButton'),
+            isFilled: true,
+            label: I18nText('okButton'),
             onPressed: () => Navigator.of(context).pop(),
-            backgroundColor: Theme.of(context).colorScheme.secondary,
-            borderColor: Theme.of(context).colorScheme.secondary,
           )
         ],
-        backgroundColor: Theme.of(context).colorScheme.surface,
+        backgroundColor: Theme.of(context).colorScheme.secondaryContainer,
       ),
     );
   }

lib/ui/widgets/rootCheckerView/magisk_button.dart

@@ -1,7 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_i18n/flutter_i18n.dart';
 import 'package:flutter_svg/flutter_svg.dart';
-import 'package:google_fonts/google_fonts.dart';
 
 class MagiskButton extends StatelessWidget {
   final Function() onPressed;
@@ -20,7 +19,7 @@ class MagiskButton extends StatelessWidget {
           onTap: onPressed,
           child: CircleAvatar(
             radius: 32,
-            backgroundColor: Theme.of(context).colorScheme.secondary,
+            backgroundColor: Theme.of(context).colorScheme.primary,
             child: SvgPicture.asset(
               'assets/images/magisk.svg',
               color: Theme.of(context).colorScheme.surface,
@@ -32,11 +31,9 @@ class MagiskButton extends StatelessWidget {
         const SizedBox(height: 8),
         I18nText(
           'rootCheckerView.grantPermission',
-          child: Text(
+          child: const Text(
             '',
-            style: GoogleFonts.poppins(
+            style: TextStyle(fontSize: 15),
-              fontSize: 15,
-            ),
           ),
         ),
       ],

lib/ui/widgets/settingsView/about_widget.dart

@@ -1,7 +1,5 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_i18n/flutter_i18n.dart';
-import 'package:revanced_manager/constants.dart';
-import 'package:revanced_manager/theme.dart';
 import 'package:revanced_manager/utils/about_info.dart';
 import 'package:flutter/services.dart';
 
@@ -22,7 +20,13 @@ class _AboutWidgetState extends State<AboutWidget> {
         children: <Widget>[
           I18nText(
             'settingsView.aboutLabel',
-            child: Text('', style: kSettingItemTextStyle),
+            child: const Text(
+              '',
+              style: TextStyle(
+                fontSize: 20,
+                fontWeight: FontWeight.w500,
+              ),
+            ),
           ),
           const SizedBox(height: 4),
           FutureBuilder<Map<String, dynamic>>(
@@ -42,30 +46,50 @@ class _AboutWidgetState extends State<AboutWidget> {
                     );
                     ScaffoldMessenger.of(context).showSnackBar(
                       SnackBar(
-                        content: Text(
+                        content: const Text('Copied to clipboard'),
-                          'Copied to clipboard',
+                        backgroundColor:
-                          style: TextStyle(
+                            Theme.of(context).colorScheme.secondary,
-                            color: isDark ? Colors.white : Colors.grey[300],
-                          ),
-                        ),
-                        backgroundColor: Theme.of(context).colorScheme.tertiary,
                       ),
                     );
                   },
                   child: Column(
                     crossAxisAlignment: CrossAxisAlignment.start,
                     children: <Widget>[
-                      Text('Version: ${snapshot.data!['version']}',
-                          style: kSettingItemSubtitleTextStyle),
-                      Text('Build: ${snapshot.data!['buildNumber']}',
-                          style: kSettingItemSubtitleTextStyle),
-                      Text('Model: ${snapshot.data!['model']}',
-                          style: kSettingItemSubtitleTextStyle),
                       Text(
-                          'Android Version: ${snapshot.data!['androidVersion']}',
+                        'Version: ${snapshot.data!['version']}',
-                          style: kSettingItemSubtitleTextStyle),
+                        style: const TextStyle(
-                      Text('Arch: ${snapshot.data!['arch']}',
+                          fontSize: 13,
-                          style: kSettingItemSubtitleTextStyle),
+                          fontWeight: FontWeight.w300,
+                        ),
+                      ),
+                      Text(
+                        'Build: ${snapshot.data!['buildNumber']}',
+                        style: const TextStyle(
+                          fontSize: 13,
+                          fontWeight: FontWeight.w300,
+                        ),
+                      ),
+                      Text(
+                        'Model: ${snapshot.data!['model']}',
+                        style: const TextStyle(
+                          fontSize: 13,
+                          fontWeight: FontWeight.w300,
+                        ),
+                      ),
+                      Text(
+                        'Android Version: ${snapshot.data!['androidVersion']}',
+                        style: const TextStyle(
+                          fontSize: 13,
+                          fontWeight: FontWeight.w300,
+                        ),
+                      ),
+                      Text(
+                        'Arch: ${snapshot.data!['arch']}',
+                        style: const TextStyle(
+                          fontSize: 13,
+                          fontWeight: FontWeight.w300,
+                        ),
+                      ),
                     ],
                   ),
                 );

lib/ui/widgets/settingsView/custom_switch.dart

@@ -12,8 +12,6 @@ class CustomSwitch extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    Color? activeColor = Theme.of(context).colorScheme.tertiary;
-    Color? inactiveColor = Theme.of(context).colorScheme.secondary;
     return GestureDetector(
       onTap: () => onChanged(!value),
       child: SizedBox(
@@ -30,7 +28,9 @@ class CustomSwitch extends StatelessWidget {
                 borderRadius: const BorderRadius.all(
                   Radius.circular(25.0),
                 ),
-                color: !value ? activeColor : inactiveColor,
+                color: value
+                    ? Theme.of(context).colorScheme.primary
+                    : Theme.of(context).colorScheme.secondary,
               ),
             ),
             AnimatedAlign(

lib/ui/widgets/settingsView/custom_text_field.dart

@@ -1,5 +1,4 @@
 import 'package:flutter/material.dart';
-import 'package:revanced_manager/theme.dart';
 
 class CustomTextField extends StatelessWidget {
   final TextEditingController inputController;
@@ -17,69 +16,55 @@ class CustomTextField extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Padding(
+    return Column(
-      padding: const EdgeInsets.all(8.0),
+      crossAxisAlignment: CrossAxisAlignment.start,
-      child: Column(
+      children: <Widget>[
-        crossAxisAlignment: CrossAxisAlignment.start,
+        const SizedBox(height: 8),
-        children: <Widget>[
+        TextField(
-          const SizedBox(height: 8),
+          controller: inputController,
-          TextField(
+          onChanged: onChanged,
-            controller: inputController,
+          keyboardType: TextInputType.text,
-            onChanged: onChanged,
+          decoration: InputDecoration(
-            keyboardType: TextInputType.text,
+            label: label,
-            style: TextStyle(
+            filled: true,
-              fontSize: 14,
+            fillColor: Theme.of(context).colorScheme.secondaryContainer,
-              color: Theme.of(context).textTheme.headline5!.color,
+            hintText: hint,
+            contentPadding: const EdgeInsets.symmetric(
+              vertical: 0.0,
+              horizontal: 20.0,
             ),
-            cursorColor: Theme.of(context).textTheme.headline5!.color,
+            border: OutlineInputBorder(
-            decoration: InputDecoration(
+              borderSide: BorderSide(
-              label: label,
+                color: Theme.of(context).colorScheme.primary,
-              labelStyle: TextStyle(
+                width: 1.0,
-                color: isDark ? Colors.grey[300] : Colors.black,
               ),
-              filled: true,
+              borderRadius: BorderRadius.circular(10),
-              fillColor: Theme.of(context).colorScheme.primary,
+              gapPadding: 4.0,
-              hintText: hint,
+            ),
-              hintStyle: TextStyle(
+            focusedBorder: OutlineInputBorder(
-                color: Colors.grey.withOpacity(.75),
+              borderSide: BorderSide(
+                color: Theme.of(context).colorScheme.primary,
+                width: 2.0,
               ),
-              contentPadding: const EdgeInsets.symmetric(
+              borderRadius: BorderRadius.circular(10),
-                vertical: 0.0,
+            ),
-                horizontal: 20.0,
+            errorBorder: OutlineInputBorder(
+              borderSide: const BorderSide(
+                color: Colors.red,
+                width: 1.0,
               ),
-              border: OutlineInputBorder(
+              borderRadius: BorderRadius.circular(10),
-                borderSide: BorderSide(
+            ),
-                  color: Theme.of(context).colorScheme.tertiary,
+            enabledBorder: OutlineInputBorder(
-                  width: 1.0,
+              borderSide: BorderSide(
-                ),
+                color: Theme.of(context).colorScheme.primary,
-                borderRadius: BorderRadius.circular(10),
+                width: 1.0,
-                gapPadding: 4.0,
-              ),
-              focusedBorder: OutlineInputBorder(
-                borderSide: BorderSide(
-                  color: Theme.of(context).colorScheme.secondary,
-                  width: 2.0,
-                ),
-                borderRadius: BorderRadius.circular(10),
-              ),
-              errorBorder: OutlineInputBorder(
-                borderSide: const BorderSide(
-                  color: Color(0xffEF4444),
-                  width: 1.0,
-                ),
-                borderRadius: BorderRadius.circular(10),
-              ),
-              enabledBorder: OutlineInputBorder(
-                borderSide: BorderSide(
-                  color: Theme.of(context).colorScheme.tertiary,
-                  width: 1.0,
-                ),
-                borderRadius: BorderRadius.circular(10),
               ),
+              borderRadius: BorderRadius.circular(10),
             ),
           ),
-        ],
+        ),
-      ),
+      ],
     );
   }
 }

lib/ui/widgets/settingsView/settings_section.dart

@@ -23,7 +23,7 @@ class SettingsSection extends StatelessWidget {
             child: Text(
               '',
               style: TextStyle(
-                color: Theme.of(context).colorScheme.secondary,
+                color: Theme.of(context).colorScheme.primary,
               ),
             ),
           ),

lib/ui/widgets/settingsView/settings_tile_dialog.dart

@@ -1,6 +1,5 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_i18n/flutter_i18n.dart';
-import 'package:revanced_manager/constants.dart';
 
 class SettingsTileDialog extends StatelessWidget {
   final String title;
@@ -20,9 +19,12 @@ class SettingsTileDialog extends StatelessWidget {
       contentPadding: EdgeInsets.zero,
       title: I18nText(
         title,
-        child: Text(
+        child: const Text(
           '',
-          style: kSettingItemTextStyle,
+          style: TextStyle(
+            fontSize: 20,
+            fontWeight: FontWeight.w500,
+          ),
         ),
       ),
       subtitle: I18nText(subtitle),

lib/ui/widgets/settingsView/social_media_widget.dart

@@ -2,8 +2,7 @@ import 'package:expandable/expandable.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_i18n/flutter_i18n.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
-import 'package:revanced_manager/constants.dart';
+import 'package:revanced_manager/ui/widgets/shared/custom_card.dart';
-import 'package:revanced_manager/theme.dart';
 import 'package:url_launcher/url_launcher.dart';
 
 class SocialMediaWidget extends StatelessWidget {
@@ -18,32 +17,25 @@ class SocialMediaWidget extends StatelessWidget {
         iconPadding: const EdgeInsets.symmetric(vertical: 16.0),
         animationDuration: const Duration(milliseconds: 400),
       ),
-      header: SizedBox(
+      header: ListTile(
-        width: double.infinity,
+        contentPadding: EdgeInsets.zero,
-        child: ListTile(
+        title: I18nText(
-          contentPadding: EdgeInsets.zero,
+          'socialMediaCard.widgetTitle',
-          title: I18nText(
+          child: const Text(
-            'socialMediaCard.widgetTitle',
+            '',
-            child: Text('', style: kSettingItemTextStyle),
+            style: TextStyle(
-          ),
+              fontSize: 20,
-          subtitle: I18nText(
+              fontWeight: FontWeight.w500,
-            'socialMediaCard.widgetSubtitle',
-            child: Text(
-              '',
-              style: Theme.of(context).textTheme.bodyMedium!.copyWith(
-                    color: isDark ? Colors.grey[400] : Colors.grey[600],
-                  ),
             ),
           ),
         ),
+        subtitle: I18nText('socialMediaCard.widgetSubtitle'),
       ),
-      expanded: Card(
+      expanded: CustomCard(
-        color: isDark
-            ? Theme.of(context).colorScheme.primary
-            : Theme.of(context).navigationBarTheme.backgroundColor!,
         child: Column(
           children: <Widget>[
             ListTile(
+              contentPadding: EdgeInsets.zero,
               leading: Padding(
                 padding: const EdgeInsets.all(8.0),
                 child: FaIcon(
@@ -59,6 +51,7 @@ class SocialMediaWidget extends StatelessWidget {
               ),
             ),
             ListTile(
+              contentPadding: EdgeInsets.zero,
               leading: Padding(
                 padding: const EdgeInsets.all(8.0).copyWith(left: 5),
                 child: FaIcon(
@@ -74,6 +67,7 @@ class SocialMediaWidget extends StatelessWidget {
               ),
             ),
             ListTile(
+              contentPadding: EdgeInsets.zero,
               leading: Padding(
                 padding: const EdgeInsets.all(8.0),
                 child: FaIcon(
@@ -89,6 +83,7 @@ class SocialMediaWidget extends StatelessWidget {
               ),
             ),
             ListTile(
+              contentPadding: EdgeInsets.zero,
               leading: Padding(
                 padding: const EdgeInsets.all(8.0),
                 child: FaIcon(
@@ -104,6 +99,7 @@ class SocialMediaWidget extends StatelessWidget {
               ),
             ),
             ListTile(
+              contentPadding: EdgeInsets.zero,
               leading: Padding(
                 padding: const EdgeInsets.all(8.0),
                 child: FaIcon(
@@ -119,6 +115,7 @@ class SocialMediaWidget extends StatelessWidget {
               ),
             ),
             ListTile(
+              contentPadding: EdgeInsets.zero,
               leading: Padding(
                 padding: const EdgeInsets.all(8.0),
                 child: FaIcon(

lib/ui/widgets/settingsView/sources_widget.dart

@@ -2,8 +2,8 @@ import 'package:expandable/expandable.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_i18n/flutter_i18n.dart';
 import 'package:revanced_manager/constants.dart';
-import 'package:revanced_manager/theme.dart';
 import 'package:revanced_manager/ui/widgets/settingsView/custom_text_field.dart';
+import 'package:revanced_manager/ui/widgets/shared/custom_card.dart';
 
 class SourcesWidget extends StatelessWidget {
   final String title;
@@ -28,29 +28,21 @@ class SourcesWidget extends StatelessWidget {
         iconPadding: const EdgeInsets.symmetric(vertical: 16.0),
         animationDuration: const Duration(milliseconds: 400),
       ),
-      header: SizedBox(
+      header: ListTile(
-        width: double.infinity,
+        contentPadding: EdgeInsets.zero,
-        child: ListTile(
+        title: I18nText(
-          contentPadding: EdgeInsets.zero,
+          'sourcesCard.widgetTitle',
-          title: I18nText(
+          child: const Text(
-            'sourcesCard.widgetTitle',
+            '',
-            child: Text('', style: kSettingItemTextStyle),
+            style: TextStyle(
-          ),
+              fontSize: 20,
-          subtitle: I18nText(
+              fontWeight: FontWeight.w500,
-            'sourcesCard.widgetSubtitle',
-            child: Text(
-              '',
-              style: Theme.of(context).textTheme.bodyMedium!.copyWith(
-                    color: isDark ? Colors.grey[400] : Colors.grey[600],
-                  ),
             ),
           ),
         ),
+        subtitle: I18nText('sourcesCard.widgetSubtitle'),
       ),
-      expanded: Card(
+      expanded: CustomCard(
-        color: isDark
-            ? Theme.of(context).colorScheme.primary
-            : Theme.of(context).navigationBarTheme.backgroundColor!,
         child: Column(
           children: <Widget>[
             CustomTextField(
@@ -59,12 +51,14 @@ class SourcesWidget extends StatelessWidget {
               hint: ghOrg,
               onChanged: (value) => ghOrg = value,
             ),
+            const SizedBox(height: 8),
             CustomTextField(
               inputController: patchesSourceController,
               label: I18nText('sourcesCard.patchesSourceLabel'),
               hint: patchesRepo,
               onChanged: (value) => patchesRepo = value,
             ),
+            const SizedBox(height: 8),
             CustomTextField(
               inputController: integrationsSourceController,
               label: I18nText('sourcesCard.integrationsSourceLabel'),

lib/ui/widgets/shared/application_item.dart

@@ -1,10 +1,8 @@
 import 'dart:typed_data';
 import 'package:flutter/material.dart';
 import 'package:flutter_i18n/flutter_i18n.dart';
-import 'package:google_fonts/google_fonts.dart';
+import 'package:revanced_manager/ui/widgets/installerView/custom_material_button.dart';
-import 'package:revanced_manager/constants.dart';
+import 'package:revanced_manager/ui/widgets/shared/custom_card.dart';
-import 'package:revanced_manager/theme.dart';
-import 'package:revanced_manager/ui/widgets/shared/patch_text_button.dart';
 import 'package:expandable/expandable.dart';
 import 'package:timeago/timeago.dart';
 
@@ -33,56 +31,35 @@ class ApplicationItem extends StatelessWidget {
         hasIcon: false,
         animationDuration: Duration(milliseconds: 450),
       ),
-      header: Container(
+      header: CustomCard(
-        height: 60,
-        decoration: BoxDecoration(
-          borderRadius: BorderRadius.circular(12),
-          color: Theme.of(context).colorScheme.primary,
-        ),
-        padding: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 12.0),
         child: Row(
           children: <Widget>[
             SizedBox(
               width: 60,
-              child: Image.memory(
+              child: Image.memory(icon, height: 39, width: 39),
-                icon,
-                height: 39,
-                width: 39,
-              ),
             ),
             const SizedBox(width: 4),
-            SizedBox(
+            Column(
-              width: MediaQuery.of(context).size.width - 250,
+              crossAxisAlignment: CrossAxisAlignment.start,
-              child: Column(
+              children: <Widget>[
-                crossAxisAlignment: CrossAxisAlignment.start,
+                Text(
-                children: <Widget>[
+                  name,
-                  Text(
+                  style: const TextStyle(
-                    name,
+                    fontSize: 16,
-                    style: GoogleFonts.roboto(
+                    fontWeight: FontWeight.w500,
-                      color: Theme.of(context).colorScheme.secondary,
-                      fontWeight: FontWeight.w600,
-                    ),
                   ),
-                  Text(
+                ),
-                    format(patchDate, locale: 'en_short'),
+                Text(format(patchDate, locale: 'en_short')),
-                    style: kRobotoTextStyle.copyWith(
+              ],
-                      color: Theme.of(context).colorScheme.tertiary,
-                    ),
-                  ),
-                ],
-              ),
             ),
             const Spacer(),
             Padding(
               padding: const EdgeInsets.symmetric(horizontal: 8.0),
-              child: PatchTextButton(
+              child: CustomMaterialButton(
-                text: isUpdatableApp
+                label: isUpdatableApp
-                    ? 'applicationItem.patchButton'
+                    ? I18nText('applicationItem.patchButton')
-                    : 'applicationItem.openButton',
+                    : I18nText('applicationItem.openButton'),
                 onPressed: onPressed,
-                borderColor: isDark
-                    ? const Color(0xff4D5054)
-                    : const Color.fromRGBO(119, 146, 168, 1),
               ),
             ),
           ],
@@ -96,16 +73,13 @@ class ApplicationItem extends StatelessWidget {
           children: <Widget>[
             I18nText(
               'applicationItem.changelogLabel',
-              child: Text(
+              child: const Text(
                 '',
-                style: kRobotoTextStyle.copyWith(fontWeight: FontWeight.w700),
+                style: TextStyle(fontWeight: FontWeight.w700),
               ),
             ),
             const SizedBox(height: 4),
-            Text(
+            Text('\u2022 ${changelog.join('\n\u2022 ')}'),
-              '\u2022 ${changelog.join('\n\u2022 ')}',
-              style: kRobotoTextStyle,
-            ),
           ],
         ),
       ),

lib/ui/widgets/shared/custom_card.dart

@@ -0,0 +1,32 @@
+import 'package:flutter/material.dart';
+
+class CustomCard extends StatelessWidget {
+  final bool isFilled;
+  final Widget child;
+
+  const CustomCard({
+    Key? key,
+    this.isFilled = true,
+    required this.child,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(16),
+        color: isFilled
+            ? Theme.of(context).colorScheme.secondaryContainer
+            : Colors.transparent,
+        border: isFilled
+            ? null
+            : Border.all(
+                width: 1,
+                color: Theme.of(context).colorScheme.secondary,
+              ),
+      ),
+      padding: const EdgeInsets.all(20),
+      child: child,
+    );
+  }
+}

lib/ui/widgets/shared/custom_sliver_app_bar.dart

@@ -1,5 +1,4 @@
 import 'package:flutter/material.dart';
-import 'package:revanced_manager/theme.dart';
 
 class CustomSliverAppBar extends StatelessWidget {
   final Widget title;
@@ -21,10 +20,8 @@ class CustomSliverAppBar extends StatelessWidget {
       automaticallyImplyLeading: false,
       backgroundColor: MaterialStateColor.resolveWith(
         (states) => states.contains(MaterialState.scrolledUnder)
-            ? isDark
+            ? Theme.of(context).colorScheme.surface
-                ? Theme.of(context).colorScheme.primary
+            : Theme.of(context).canvasColor,
-                : Theme.of(context).navigationBarTheme.backgroundColor!
-            : Theme.of(context).scaffoldBackgroundColor,
       ),
       flexibleSpace: FlexibleSpaceBar(
         titlePadding: const EdgeInsets.symmetric(

lib/ui/widgets/shared/open_container_wrapper.dart

@@ -21,7 +21,7 @@ class OpenContainerWrapper extends StatelessWidget {
       openColor: Theme.of(context).colorScheme.primary,
       closedColor: Colors.transparent,
       closedShape: RoundedRectangleBorder(
-        borderRadius: BorderRadius.circular(12),
+        borderRadius: BorderRadius.circular(16),
       ),
     );
   }

lib/ui/widgets/shared/patch_text_button.dart

@@ -1,51 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:flutter_i18n/flutter_i18n.dart';
-import 'package:revanced_manager/constants.dart';
-import 'package:revanced_manager/theme.dart';
-
-class PatchTextButton extends StatelessWidget {
-  final String text;
-  final Function() onPressed;
-  final Color borderColor;
-  final Color backgroundColor;
-
-  const PatchTextButton({
-    Key? key,
-    required this.text,
-    required this.onPressed,
-    this.borderColor = const Color(0xff7792BA),
-    this.backgroundColor = Colors.transparent,
-  }) : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    return TextButton(
-      onPressed: onPressed,
-      style: Theme.of(context).textButtonTheme.style?.copyWith(
-          backgroundColor: MaterialStateProperty.all<Color?>(backgroundColor),
-          side: MaterialStateProperty.all<BorderSide>(
-            BorderSide(
-              color: borderColor,
-              width: 1,
-            ),
-          ),
-          padding: MaterialStateProperty.all<EdgeInsetsGeometry>(
-            const EdgeInsets.symmetric(
-              horizontal: 16,
-              vertical: 4,
-            ),
-          )),
-      child: I18nText(text,
-          child: Text(
-            '',
-            style: kInterTextStyle.copyWith(
-              color: backgroundColor == Colors.transparent
-                  ? const Color.fromRGBO(119, 146, 186, 1)
-                  : isDark
-                      ? Colors.black
-                      : Colors.white,
-            ),
-          )),
-    );
-  }
-}

lib/ui/widgets/shared/search_bar.dart

@@ -1,23 +1,16 @@
 import 'package:flutter/material.dart';
-import 'package:google_fonts/google_fonts.dart';
 
 class SearchBar extends StatefulWidget {
   final String? hintText;
-  final Color? fillColor;
   final bool showSelectIcon;
   final Function(bool)? onSelectAll;
-  final Color? backgroundColor;
-  final Color? hintTextColor;
 
   const SearchBar({
     Key? key,
     required this.hintText,
-    required this.fillColor,
-    required this.onQueryChanged,
-    this.onSelectAll,
     this.showSelectIcon = false,
-    this.backgroundColor = const Color(0xff1B222B),
+    this.onSelectAll,
-    this.hintTextColor = Colors.white,
+    required this.onQueryChanged,
   }) : super(key: key);
 
   final Function(String) onQueryChanged;
@@ -34,14 +27,8 @@ class _SearchBarState extends State<SearchBar> {
   Widget build(BuildContext context) {
     return Container(
       decoration: BoxDecoration(
-        borderRadius: BorderRadius.circular(12),
+        borderRadius: BorderRadius.circular(16),
-        color: widget.backgroundColor,
+        color: Theme.of(context).colorScheme.secondaryContainer,
-        border: Border.all(
-          color: widget.backgroundColor != null
-              ? widget.backgroundColor!
-              : Colors.white,
-          width: 1,
-        ),
       ),
       child: Row(
         children: <Widget>[
@@ -49,25 +36,18 @@ class _SearchBarState extends State<SearchBar> {
             child: TextFormField(
               onChanged: widget.onQueryChanged,
               controller: _textController,
-              cursorColor: Theme.of(context).textTheme.headline5!.color,
               decoration: InputDecoration(
-                fillColor: widget.fillColor,
                 filled: true,
+                fillColor: Theme.of(context).colorScheme.secondaryContainer,
                 contentPadding: const EdgeInsets.all(12.0),
                 hintText: widget.hintText,
-                hintStyle: GoogleFonts.poppins(
-                  color: widget.hintTextColor,
-                  fontWeight: FontWeight.w400,
-                ),
                 prefixIcon: Icon(
                   Icons.search,
-                  size: 24.0,
                   color: Theme.of(context).iconTheme.color,
                 ),
                 suffixIcon: _textController.text.isNotEmpty
                     ? IconButton(
                         icon: const Icon(Icons.clear),
-                        iconSize: 24.0,
                         onPressed: () {
                           _textController.clear();
                           widget.onQueryChanged('');
@@ -78,7 +58,6 @@ class _SearchBarState extends State<SearchBar> {
                             icon: _toggleSelectAll
                                 ? const Icon(Icons.deselect)
                                 : const Icon(Icons.select_all),
-                            iconSize: 24.0,
                             onPressed: widget.onSelectAll != null
                                 ? () {
                                     setState(() {
@@ -94,11 +73,6 @@ class _SearchBarState extends State<SearchBar> {
                   borderSide: BorderSide.none,
                 ),
               ),
-              style: GoogleFonts.poppins(
-                color: Theme.of(context).textTheme.headline5!.color,
-                fontWeight: FontWeight.w400,
-                fontSize: 16,
-              ),
             ),
           ),
         ],

pubspec.yaml

@@ -18,8 +18,11 @@ dependencies:
       url: https://github.com/ponces/flutter_plugin_device_apps
       ref: appinfo-from-storage
   device_info_plus: ^4.1.2
+  dynamic_color: ^1.5.4
+  dynamic_themes: ^1.1.0
   expandable: ^5.0.1
   file_picker: ^5.0.1
+  flex_color_scheme: ^6.0.0
   flutter:
     sdk: flutter
   flutter_background: ^1.1.0