From e679d501b270be511ef78d48e774e390a4bc0c5e Mon Sep 17 00:00:00 2001
From: Adam Velebil <adam.velebil@yubico.com>
Date: Thu, 11 Jan 2024 18:17:40 +0100
Subject: [PATCH] preview selected color in customization dialog

---
 lib/app/state.dart                | 10 ++---
 lib/app/views/customize_page.dart | 73 ++++++++++++++++---------------
 2 files changed, 42 insertions(+), 41 deletions(-)

diff --git a/lib/app/state.dart b/lib/app/state.dart
index b21b2686..d4c0af41 100755
--- a/lib/app/state.dart
+++ b/lib/app/state.dart
@@ -171,8 +171,8 @@ class ThemeNotifier extends Notifier<ThemeData> {
   static ThemeData _getDefault(ThemeMode themeMode) =>
       themeMode == ThemeMode.light ? AppTheme.lightTheme : AppTheme.darkTheme;
 
-  ThemeData _get(ThemeMode themeMode, {YubiKeyData? yubiKeyData}) {
-    Color? primaryColor;
+  ThemeData _get(ThemeMode themeMode, {Color? color, YubiKeyData? yubiKeyData}) {
+    Color? primaryColor = color;
     if (yubiKeyData != null) {
       final manager = ref.read(keyCustomizationManagerProvider);
 
@@ -198,9 +198,9 @@ class ThemeNotifier extends Notifier<ThemeData> {
         : _getDefault(themeMode);
   }
 
-  void setPrimaryColor(Color? primaryColor) {
-    _log.debug('Set primary color to $primaryColor');
-    state = _get(_themeMode);
+  void setColor(Color? color) {
+    _log.debug('Set color to $color');
+    state = _get(_themeMode, color: color);
   }
 }
 
diff --git a/lib/app/views/customize_page.dart b/lib/app/views/customize_page.dart
index 9fe98dfe..8a0113fb 100755
--- a/lib/app/views/customize_page.dart
+++ b/lib/app/views/customize_page.dart
@@ -42,6 +42,7 @@ class CustomizePage extends ConsumerStatefulWidget {
 class _CustomizePageState extends ConsumerState<CustomizePage> {
   String? _displayName;
   String? _displayColor;
+  Color? _previewColor;
 
   @override
   void initState() {
@@ -58,10 +59,8 @@ class _CustomizePageState extends ConsumerState<CustomizePage> {
   void updateColor(String? colorString) {
     setState(() {
       _displayColor = colorString;
-      Color? color =
+      _previewColor =
           colorString != null ? Color(int.parse(colorString, radix: 16)) : null;
-      ref.watch(darkThemeProvider.notifier).setPrimaryColor(color);
-      ref.watch(lightThemeProvider.notifier).setPrimaryColor(color);
     });
   }
 
@@ -70,42 +69,44 @@ class _CustomizePageState extends ConsumerState<CustomizePage> {
     final l10n = AppLocalizations.of(context)!;
     final theme = Theme.of(context);
 
-    return ResponsiveDialog(
-      title: const Text('Customize key appearance'),
-      actions: [
-        TextButton(
-          onPressed: () async {
-            KeyCustomization newValue = KeyCustomization(
-                widget.initialCustomization!.serialNumber, <String, dynamic>{
-              'display_color': _displayColor,
-              'display_name': _displayName
-            });
+    return Theme(
+      // show the selected color directly in this dialog
+      data: theme.copyWith(
+        colorScheme: ColorScheme.fromSeed(
+            brightness: theme.brightness,
+            seedColor: _previewColor ?? theme.colorScheme.primary),
+      ),
+      child: ResponsiveDialog(
+        title: const Text('Customize key appearance'),
+        actions: [
+          TextButton(
+            onPressed: () async {
+              KeyCustomization newValue = KeyCustomization(
+                  widget.initialCustomization!.serialNumber, <String, dynamic>{
+                'display_color': _displayColor,
+                'display_name': _displayName
+              });
 
-            _log.debug('Saving customization for '
-                '${widget.initialCustomization!.serialNumber}: '
-                '$_displayName/$_displayColor');
+              _log.debug('Saving customization for '
+                  '${widget.initialCustomization!.serialNumber}: '
+                  '$_displayName/$_displayColor');
 
-            final manager = ref.read(keyCustomizationManagerProvider);
-            manager.set(newValue);
-            await manager.write();
+              final manager = ref.read(keyCustomizationManagerProvider);
+              manager.set(newValue);
+              await manager.write();
 
-            await ref.read(withContextProvider)((context) async {
-              FocusUtils.unfocus(context);
-              final nav = Navigator.of(context);
-              nav.pop();
-            });
-          },
-          child: Text(l10n.s_save),
-        ),
-      ],
-      child: Theme(
-        // Make the headers use the primary color to pop a bit.
-        // Once M3 is implemented this will probably not be needed.
-        data: theme.copyWith(
-          textTheme: theme.textTheme.copyWith(
-              labelLarge: theme.textTheme.labelLarge
-                  ?.copyWith(color: theme.colorScheme.primary)),
-        ),
+              ref.invalidate(lightThemeProvider);
+              ref.invalidate(darkThemeProvider);
+
+              await ref.read(withContextProvider)((context) async {
+                FocusUtils.unfocus(context);
+                final nav = Navigator.of(context);
+                nav.pop();
+              });
+            },
+            child: Text(l10n.s_save),
+          ),
+        ],
         child: Padding(
           padding: const EdgeInsets.symmetric(horizontal: 18.0),
           child: Column(