Fix styling of chips

lib/about_page.dart

@@ -155,7 +155,6 @@ class AboutPage extends ConsumerWidget {
               ActionChip(
                 key: diagnosticsChip,
                 avatar: const Icon(Symbols.bug_report),
-                backgroundColor: Theme.of(context).colorScheme.surfaceVariant,
                 label: Text(l10n.s_run_diagnostics),
                 onPressed: () async {
                   _log.info('Running diagnostics...');
@@ -188,7 +187,6 @@ class AboutPage extends ConsumerWidget {
               FilterChip(
                 key: screenshotChip,
                 label: Text(l10n.s_allow_screenshots),
-                backgroundColor: Theme.of(context).colorScheme.surfaceVariant,
                 selected: ref.watch(androidAllowScreenshotsProvider),
                 onSelected: (value) async {
                   ref
@@ -236,7 +234,6 @@ class LoggingPanel extends ConsumerWidget {
         ActionChip(
           key: logChip,
           avatar: const Icon(Symbols.content_copy),
-          backgroundColor: Theme.of(context).colorScheme.surfaceVariant,
           label: Text(l10n.s_copy_log),
           onPressed: () async {
             _log.info('Copying log to clipboard ($version)...');

lib/desktop/init.dart

@@ -384,7 +384,6 @@ class _HelperWaiterState extends ConsumerState<_HelperWaiter> {
         actionsBuilder: (context, expanded) => [
           ActionChip(
             avatar: const Icon(Symbols.content_copy),
-            backgroundColor: Theme.of(context).colorScheme.surfaceVariant,
             label: Text(l10n.s_copy_log),
             onPressed: () async {
               _log.info('Copying log to clipboard ($version)...');

lib/home/views/home_screen.dart

@@ -358,13 +358,7 @@ class _HeroAvatar extends StatelessWidget {
         ),
       ),
       padding: const EdgeInsets.all(12),
-      child: Theme(
+      child: child,
-        // Give the avatar a transparent background
-        data: theme.copyWith(
-            colorScheme:
-                theme.colorScheme.copyWith(surfaceVariant: Colors.transparent)),
-        child: child,
-      ),
     );
   }
 }

lib/management/views/management_screen.dart

@@ -61,7 +61,6 @@ class _CapabilityForm extends StatelessWidget {
           .where((c) => capabilities & c.value != 0)
           .map((c) => FilterChip(
                 label: Text(c.getDisplayName(l10n)),
-                backgroundColor: Theme.of(context).colorScheme.surfaceVariant,
                 key: Key('$keyPrefix.${c.name}'),
                 selected: enabled & c.value != 0,
                 onSelected: (_) {

lib/oath/icon_provider/icon_pack_dialog.dart

@@ -202,7 +202,6 @@ class _ImportActionChip extends ConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     return ActionChip(
-        backgroundColor: Theme.of(context).colorScheme.surfaceVariant,
         onPressed: !disabled
             ? () async {
                 _importAction(context, ref);

lib/oath/views/add_account_dialog.dart

@@ -84,8 +84,6 @@ class _AddAccountDialogState extends ConsumerState<AddAccountDialog> {
                   children: [
                     ActionChip(
                       avatar: const Icon(Symbols.qr_code_scanner),
-                      backgroundColor:
-                          Theme.of(context).colorScheme.surfaceVariant,
                       label: Text(l10n.s_qr_scan),
                       onPressed: () async {
                         if (qrScanner != null) {
@@ -107,8 +105,6 @@ class _AddAccountDialogState extends ConsumerState<AddAccountDialog> {
                     ActionChip(
                         key: addAccountManuallyButton,
                         avatar: const Icon(Symbols.edit),
-                        backgroundColor:
-                            Theme.of(context).colorScheme.surfaceVariant,
                         label: Text(l10n.s_add_manually),
                         onPressed: () async {
                           Navigator.of(context).pop();

lib/oath/views/add_account_page.dart

@@ -470,8 +470,6 @@ class _OathAddAccountPageState extends ConsumerState<OathAddAccountPage> {
                         if (oathState?.version.isAtLeast(4, 2) ?? true)
                           FilterChip(
                             key: keys.requireTouchFilterChip,
-                            backgroundColor:
-                                Theme.of(context).colorScheme.surfaceVariant,
                             label: Text(l10n.s_require_touch),
                             selected: _touch,
                             onSelected: (value) {

lib/piv/views/generate_key_dialog.dart

@@ -221,8 +221,6 @@ class _GenerateKeyDialogState extends ConsumerState<GenerateKeyDialog> {
                   ),
                   if (_generateType == GenerateType.certificate)
                     FilterChip(
-                      backgroundColor:
-                          Theme.of(context).colorScheme.surfaceVariant,
                       label: Text(dateFormatter.format(_validTo)),
                       onSelected: _generating
                           ? null

lib/piv/views/manage_key_dialog.dart

@@ -346,8 +346,6 @@ class _ManageKeyDialogState extends ConsumerState<ManageKeyDialog> {
                     ),
                   FilterChip(
                     key: keys.pinLockManagementKeyChip,
-                    backgroundColor:
-                        Theme.of(context).colorScheme.surfaceVariant,
                     label: Text(l10n.s_protect_key),
                     selected: _storeKey,
                     onSelected: (value) {

lib/theme.dart

@@ -25,60 +25,82 @@ class AppTheme {
         Brightness.dark => getDarkTheme(primaryColor),
       };
 
-  static ThemeData getLightTheme(Color primaryColor) => ThemeData(
+  static ColorScheme _colorScheme(Brightness brightness, Color primaryColor) =>
-        useMaterial3: true,
+      switch (brightness) {
-        colorScheme: ColorScheme.fromSeed(
+        Brightness.dark => ColorScheme.fromSeed(
-          brightness: Brightness.light,
+            seedColor: primaryColor,
-          seedColor: primaryColor,
+            brightness: brightness,
-          onSurface: const Color(0xbb000000),
+            background: const Color(0xff282828),
-          onSurfaceVariant: const Color(0x99000000),
+            onSurface: const Color(0xeeffffff),
-        ),
+            onSurfaceVariant: const Color(0xaaffffff),
-        fontFamily: 'Roboto',
-        appBarTheme: const AppBarTheme(
-          color: Colors.transparent,
-        ),
-        listTileTheme: const ListTileThemeData(
-          // For alignment under menu button
-          contentPadding: EdgeInsets.symmetric(horizontal: 18.0),
-          visualDensity: VisualDensity.compact,
-        ),
-        tooltipTheme: const TooltipThemeData(
-          waitDuration: Duration(milliseconds: 500),
-          textStyle: TextStyle(color: Color(0xff3c3c3c)),
-          decoration: BoxDecoration(
-            color: Color(0xffe2e2e6),
-            borderRadius: BorderRadius.all(Radius.circular(8.0)),
           ),
-        ),
+        Brightness.light => ColorScheme.fromSeed(
-      );
+            seedColor: primaryColor,
+            brightness: brightness,
+            onSurface: const Color(0xbb000000),
+            onSurfaceVariant: const Color(0x99000000),
+          )
+      };
 
-  static ThemeData getDarkTheme(Color primaryColor) => ThemeData(
+  static ThemeData getLightTheme(Color primaryColor) {
-        useMaterial3: true,
+    final colorScheme = _colorScheme(Brightness.light, primaryColor);
-        colorScheme: ColorScheme.fromSeed(
+    return ThemeData(
-          brightness: Brightness.dark,
+      useMaterial3: true,
-          seedColor: primaryColor,
+      colorScheme: colorScheme,
-          background: const Color(0xff282828),
+      fontFamily: 'Roboto',
-          onSurface: const Color(0xeeffffff),
+      appBarTheme: const AppBarTheme(
-          onSurfaceVariant: const Color(0xaaffffff),
+        color: Colors.transparent,
+      ),
+      listTileTheme: const ListTileThemeData(
+        // For alignment under menu button
+        contentPadding: EdgeInsets.symmetric(horizontal: 18.0),
+        visualDensity: VisualDensity.compact,
+      ),
+      tooltipTheme: const TooltipThemeData(
+        waitDuration: Duration(milliseconds: 500),
+        textStyle: TextStyle(color: Color(0xff3c3c3c)),
+        decoration: BoxDecoration(
+          color: Color(0xffe2e2e6),
+          borderRadius: BorderRadius.all(Radius.circular(8.0)),
         ),
-        fontFamily: 'Roboto',
+      ),
-        appBarTheme: const AppBarTheme(
+      chipTheme: ChipThemeData(
-          color: Colors.transparent,
+        backgroundColor: colorScheme.surfaceContainerHighest,
+        labelStyle:
+            TextStyle(fontFamily: 'Roboto', color: colorScheme.onSurface),
+      ),
+    );
+  }
+
+  static ThemeData getDarkTheme(Color primaryColor) {
+    final colorScheme = _colorScheme(Brightness.dark, primaryColor);
+    return ThemeData(
+      useMaterial3: true,
+      colorScheme: colorScheme,
+      fontFamily: 'Roboto',
+      appBarTheme: const AppBarTheme(
+        color: Colors.transparent,
+      ),
+      listTileTheme: const ListTileThemeData(
+        // For alignment under menu button
+        contentPadding: EdgeInsets.symmetric(horizontal: 18.0),
+        visualDensity: VisualDensity.compact,
+      ),
+      tooltipTheme: const TooltipThemeData(
+        waitDuration: Duration(milliseconds: 500),
+        textStyle: TextStyle(color: Color(0xffE2E2E6)),
+        decoration: BoxDecoration(
+          color: Color(0xff3c3c3c),
+          borderRadius: BorderRadius.all(Radius.circular(8.0)),
         ),
-        listTileTheme: const ListTileThemeData(
+      ),
-          // For alignment under menu button
+      chipTheme: ChipThemeData(
-          contentPadding: EdgeInsets.symmetric(horizontal: 18.0),
+        backgroundColor: colorScheme.surfaceContainerHighest,
-          visualDensity: VisualDensity.compact,
+        labelStyle:
-        ),
+            TextStyle(fontFamily: 'Roboto', color: colorScheme.onSurface),
-        tooltipTheme: const TooltipThemeData(
+      ),
-          waitDuration: Duration(milliseconds: 500),
+    );
-          textStyle: TextStyle(color: Color(0xffE2E2E6)),
+  }
-          decoration: BoxDecoration(
-            color: Color(0xff3c3c3c),
-            borderRadius: BorderRadius.all(Radius.circular(8.0)),
-          ),
-        ),
-      );
 }
 
 /* TODO: Remove this. It is left here as a reference as we adjust styles to work with Flutter 3.7.

lib/widgets/choice_filter_chip.dart

@@ -71,7 +71,7 @@ class _ChoiceFilterChipState<T> extends State<ChoiceFilterChip<T>> {
       shape: const RoundedRectangleBorder(
         borderRadius: BorderRadius.all(Radius.circular(4)),
       ),
-      color: Theme.of(context).colorScheme.background,
+      color: Theme.of(context).colorScheme.surfaceContainerHighest,
       popUpAnimationStyle: AnimationStyle(duration: Duration.zero),
       items: widget.items
           .map((e) => PopupMenuItem<T>(
@@ -91,7 +91,6 @@ class _ChoiceFilterChipState<T> extends State<ChoiceFilterChip<T>> {
     return FilterChip(
       tooltip: widget.tooltip,
       avatar: widget.avatar,
-      backgroundColor: Theme.of(context).colorScheme.surfaceVariant,
       labelPadding: const EdgeInsets.only(left: 4),
       label: Row(
         mainAxisSize: MainAxisSize.min,
@@ -102,7 +101,7 @@ class _ChoiceFilterChipState<T> extends State<ChoiceFilterChip<T>> {
             child: Icon(
               _showing ? Symbols.arrow_drop_up : Symbols.arrow_drop_down,
               color: ChipTheme.of(context).checkmarkColor,
-              size: 18,
+              size: 16,
             ),
           ),
         ],