Merge pull request #1360 from Yubico/rikard/color-changes

some color changes for the theme selector and across the app

lib/app/key_customization/views/key_customization_dialog.dart

@@ -61,17 +61,17 @@ class _KeyCustomizationDialogState
   Widget build(BuildContext context) {
     final l10n = AppLocalizations.of(context)!;
     final currentNode = widget.node;
-
     final theme = Theme.of(context);
+    final primaryColor = ref.watch(defaultColorProvider);
 
     final Widget hero;
     if (currentNode != null) {
-      hero = _CurrentDeviceAvatar(currentNode, _customColor ?? Colors.white);
+      hero = _CurrentDeviceAvatar(currentNode, _customColor ?? primaryColor);
     } else {
       hero = Column(
         children: [
           _HeroAvatar(
-            color: _customColor ?? Colors.white,
+            color: _customColor ?? primaryColor,
             child: DeviceAvatar(
               radius: 64,
               child: Icon(isAndroid ? Icons.no_cell : Icons.usb),
@@ -86,8 +86,6 @@ class _KeyCustomizationDialogState
       );
     }
 
-    final primaryColor = ref.watch(defaultColorProvider);
-
     final didChange = widget.initialCustomization.name != _customName ||
         widget.initialCustomization.color != _customColor;
 
@@ -143,17 +141,17 @@ class _KeyCustomizationDialogState
                       spacing: 16,
                       children: [
                         ...[
-                          Colors.yellow.withOpacity(1.0),
-                          Colors.orange.withOpacity(1.0),
-                          Colors.red.withOpacity(1.0),
-                          Colors.deepPurple.withOpacity(1.0),
-                          Colors.green.withOpacity(1.0),
-                          Colors.teal.withOpacity(1.0),
-                          Colors.cyan.withOpacity(1.0),
+                          Colors.teal,
+                          Colors.cyan,
+                          Colors.blueAccent,
+                          Colors.deepPurple,
+                          Colors.red,
+                          Colors.orange,
+                          Colors.yellow,
                           // add nice color to devices with dynamic color
                           if (isAndroid &&
                               ref.read(androidSdkVersionProvider) >= 31)
-                            Colors.blueAccent.withOpacity(1.0)
+                            Colors.lightGreen
                         ].map((e) => _ColorButton(
                               color: e,
                               isSelected: _customColor == e,
@@ -167,16 +165,17 @@ class _KeyCustomizationDialogState
                           onPressed: () => _updateColor(null),
                           constraints: const BoxConstraints(
                               minWidth: 32.0, minHeight: 32.0),
-                          fillColor: _customColor == null
-                              ? theme.colorScheme.surface
-                              : theme.colorScheme.onSurface,
+                          fillColor: (isAndroid &&
+                                  ref.read(androidSdkVersionProvider) >= 31)
+                              ? theme.colorScheme.onSurface
+                              : primaryColor,
                           shape: const CircleBorder(),
                           child: Icon(
                             Icons.cancel_rounded,
                             size: 16,
                             color: _customColor == null
                                 ? theme.colorScheme.onSurface
-                                : theme.colorScheme.surface,
+                                : theme.colorScheme.surface.withOpacity(0.2),
                           ),
                         ),
                       ],

lib/fido/views/pin_entry_form.dart

@@ -83,7 +83,7 @@ class _PinEntryFormState extends ConsumerState<PinEntryForm> {
         children: [
           Text(l10n.l_enter_fido2_pin),
           Padding(
-            padding: const EdgeInsets.only(top: 16.0, bottom: 16.0),
+            padding: const EdgeInsets.only(top: 16.0, bottom: 4.0),
             child: AppTextField(
               autofocus: true,
               obscureText: _isObscure,
@@ -116,8 +116,10 @@ class _PinEntryFormState extends ConsumerState<PinEntryForm> {
             ),
           ),
           ListTile(
-            leading:
-                noFingerprints ? const Icon(Icons.warning_amber_rounded) : null,
+            leading: noFingerprints
+                ? Icon(Icons.warning_amber,
+                    color: Theme.of(context).colorScheme.tertiary)
+                : null,
             title: noFingerprints
                 ? Text(
                     l10n.l_no_fps_added,

lib/oath/views/unlock_form.dart

@@ -73,8 +73,9 @@ class _UnlockFormState extends ConsumerState<UnlockForm> {
               Text(
                 l10n.l_enter_oath_pw,
               ),
-              const SizedBox(height: 16.0),
-              AppTextField(
+              Padding(
+                padding: const EdgeInsets.only(top: 16.0, bottom: 4.0),
+                child: AppTextField(
                   key: keys.passwordField,
                   controller: _passwordController,
                   autofocus: true,
@@ -104,7 +105,8 @@ class _UnlockFormState extends ConsumerState<UnlockForm> {
                   }), // Update state on change
                   onSubmitted: (_) => _submit(),
                 ),
-              const SizedBox(height: 8.0),
+              ),
+              const SizedBox(height: 3.0),
               Column(
                 crossAxisAlignment: CrossAxisAlignment.stretch,
                 children: [
@@ -120,7 +122,9 @@ class _UnlockFormState extends ConsumerState<UnlockForm> {
                               spacing: 4.0,
                               runSpacing: 8.0,
                               children: [
-                                const Icon(Icons.warning_amber_rounded),
+                                Icon(Icons.warning_amber,
+                                    color:
+                                        Theme.of(context).colorScheme.tertiary),
                                 Text(l10n.l_keystore_unavailable)
                               ],
                             )

lib/piv/views/cert_info_view.dart

@@ -36,7 +36,7 @@ class CertInfoTable extends ConsumerWidget {
     final textTheme = Theme.of(context).textTheme;
     // This is what ListTile uses for subtitle
     final subtitleStyle = textTheme.bodyMedium!.copyWith(
-      color: textTheme.bodySmall!.color,
+      color: Theme.of(context).colorScheme.onSurfaceVariant,
     );
     final dateFormat =
         DateFormat.yMMMEd(ref.watch(currentLocaleProvider).toString());

lib/piv/views/generate_key_dialog.dart

@@ -71,7 +71,7 @@ class _GenerateKeyDialogState extends ConsumerState<GenerateKeyDialog> {
     final textTheme = Theme.of(context).textTheme;
     // This is what ListTile uses for subtitle
     final subtitleStyle = textTheme.bodyMedium!.copyWith(
-      color: textTheme.bodySmall!.color,
+      color: Theme.of(context).colorScheme.onSurfaceVariant,
     );
 
     return ResponsiveDialog(

lib/piv/views/import_file_dialog.dart

@@ -88,7 +88,7 @@ class _ImportFileDialogState extends ConsumerState<ImportFileDialog> {
     final textTheme = Theme.of(context).textTheme;
     // This is what ListTile uses for subtitle
     final subtitleStyle = textTheme.bodyMedium!.copyWith(
-      color: textTheme.bodySmall!.color,
+      color: Theme.of(context).colorScheme.onSurfaceVariant,
     );
     final state = _state;
     if (state == null) {

lib/piv/views/piv_screen.dart

@@ -75,7 +75,7 @@ class _PivScreenState extends ConsumerState<PivScreen> {
             final textTheme = theme.textTheme;
             // This is what ListTile uses for subtitle
             final subtitleStyle = textTheme.bodyMedium!.copyWith(
-              color: textTheme.bodySmall!.color,
+              color: Theme.of(context).colorScheme.onSurfaceVariant,
             );
             return PivActions(
               devicePath: widget.devicePath,

lib/piv/views/slot_dialog.dart

@@ -45,7 +45,7 @@ class SlotDialog extends ConsumerWidget {
     final textTheme = Theme.of(context).textTheme;
     // This is what ListTile uses for subtitle
     final subtitleStyle = textTheme.bodyMedium!.copyWith(
-      color: textTheme.bodySmall!.color,
+      color: Theme.of(context).colorScheme.onSurfaceVariant,
     );
 
     final pivState = ref.watch(pivStateProvider(node.path)).valueOrNull;

lib/theme.dart

@@ -16,7 +16,7 @@
 
 import 'package:flutter/material.dart';
 
-const defaultPrimaryColor = Colors.blueAccent;
+const defaultPrimaryColor = Colors.lightGreen;
 
 class AppTheme {
   static ThemeData getTheme(Brightness brightness, Color primaryColor) =>
@@ -58,7 +58,6 @@ class AppTheme {
           brightness: Brightness.dark,
           seedColor: primaryColor,
           background: const Color(0xff282828),
-          surface: const Color(0xff282828),
           onSurface: const Color(0xeeffffff),
           onSurfaceVariant: const Color(0xaaffffff),
         ),