feat: Add theme toggle and improve UI consistency

- Implemented a theme toggle in the settings screen to switch between light and dark modes.
- Enhanced the bug report dialog by adding an optional username field, auto-populating it from the remembered device name.
- Updated connection panel UI to use color scheme for better visibility in dark mode.
- Improved map widget behavior for initial GPS zoom and added logging for better debugging.
- Refined color usage across various widgets to align with the current theme, ensuring consistent appearance in both light and dark modes.
- Adjusted button colors and states to enhance user experience during interactions.

Author: MrAlders0n

android/local.properties

@@ -1,5 +1,5 @@
 sdk.dir=/opt/homebrew/share/android-commandlinetools
 flutter.sdk=/opt/homebrew/share/flutter
-flutter.buildMode=debug
+flutter.buildMode=release
 flutter.versionName=1.0.0
-flutter.versionCode=1
+flutter.versionCode=1770007371

ios/Flutter/Generated.xcconfig

@@ -5,10 +5,10 @@ COCOAPODS_PARALLEL_CODE_SIGN=true
 FLUTTER_TARGET=lib/main.dart
 FLUTTER_BUILD_DIR=build
 FLUTTER_BUILD_NAME=1.0.0
-FLUTTER_BUILD_NUMBER=1769992189
+FLUTTER_BUILD_NUMBER=1770007371
 EXCLUDED_ARCHS[sdk=iphonesimulator*]=i386
 EXCLUDED_ARCHS[sdk=iphoneos*]=armv7
-DART_DEFINES=QVBQX1ZFUlNJT049QVBQLTE3Njk5OTIxODk=,RkxVVFRFUl9WRVJTSU9OPTMuMzguOQ==,RkxVVFRFUl9DSEFOTkVMPXN0YWJsZQ==,RkxVVFRFUl9HSVRfVVJMPWh0dHBzOi8vZ2l0aHViLmNvbS9mbHV0dGVyL2ZsdXR0ZXIuZ2l0,RkxVVFRFUl9GUkFNRVdPUktfUkVWSVNJT049NjczMjNkZTI4NQ==,RkxVVFRFUl9FTkdJTkVfUkVWSVNJT049NTg3YzE4Zjg3Mw==,RkxVVFRFUl9EQVJUX1ZFUlNJT049My4xMC44
+DART_DEFINES=QVBQX1ZFUlNJT049QVBQLTE3NzAwMDczNzE=,RkxVVFRFUl9WRVJTSU9OPTMuMzguOQ==,RkxVVFRFUl9DSEFOTkVMPXN0YWJsZQ==,RkxVVFRFUl9HSVRfVVJMPWh0dHBzOi8vZ2l0aHViLmNvbS9mbHV0dGVyL2ZsdXR0ZXIuZ2l0,RkxVVFRFUl9GUkFNRVdPUktfUkVWSVNJT049NjczMjNkZTI4NQ==,RkxVVFRFUl9FTkdJTkVfUkVWSVNJT049NTg3YzE4Zjg3Mw==,RkxVVFRFUl9EQVJUX1ZFUlNJT049My4xMC44
 DART_OBFUSCATION=false
 TRACK_WIDGET_CREATION=false
 TREE_SHAKE_ICONS=true

ios/Flutter/flutter_export_environment.sh

@@ -6,8 +6,8 @@ export "COCOAPODS_PARALLEL_CODE_SIGN=true"
 export "FLUTTER_TARGET=lib/main.dart"
 export "FLUTTER_BUILD_DIR=build"
 export "FLUTTER_BUILD_NAME=1.0.0"
-export "FLUTTER_BUILD_NUMBER=1769992189"
-export "DART_DEFINES=QVBQX1ZFUlNJT049QVBQLTE3Njk5OTIxODk=,RkxVVFRFUl9WRVJTSU9OPTMuMzguOQ==,RkxVVFRFUl9DSEFOTkVMPXN0YWJsZQ==,RkxVVFRFUl9HSVRfVVJMPWh0dHBzOi8vZ2l0aHViLmNvbS9mbHV0dGVyL2ZsdXR0ZXIuZ2l0,RkxVVFRFUl9GUkFNRVdPUktfUkVWSVNJT049NjczMjNkZTI4NQ==,RkxVVFRFUl9FTkdJTkVfUkVWSVNJT049NTg3YzE4Zjg3Mw==,RkxVVFRFUl9EQVJUX1ZFUlNJT049My4xMC44"
+export "FLUTTER_BUILD_NUMBER=1770007371"
+export "DART_DEFINES=QVBQX1ZFUlNJT049QVBQLTE3NzAwMDczNzE=,RkxVVFRFUl9WRVJTSU9OPTMuMzguOQ==,RkxVVFRFUl9DSEFOTkVMPXN0YWJsZQ==,RkxVVFRFUl9HSVRfVVJMPWh0dHBzOi8vZ2l0aHViLmNvbS9mbHV0dGVyL2ZsdXR0ZXIuZ2l0,RkxVVFRFUl9GUkFNRVdPUktfUkVWSVNJT049NjczMjNkZTI4NQ==,RkxVVFRFUl9FTkdJTkVfUkVWSVNJT049NTg3YzE4Zjg3Mw==,RkxVVFRFUl9EQVJUX1ZFUlNJT049My4xMC44"
 export "DART_OBFUSCATION=false"
 export "TRACK_WIDGET_CREATION=false"
 export "TREE_SHAKE_ICONS=true"

lib/main.dart

@@ -35,6 +35,10 @@ void main() async {
   await Hive.initFlutter();
   debugLog('[APP] Hive initialized');
 
+  // Load theme preference BEFORE runApp to avoid flash of wrong theme
+  final initialThemeMode = await _loadInitialThemeMode();
+  debugLog('[APP] Initial theme mode: $initialThemeMode');
+
   // Register noise floor session adapters before opening any boxes
   if (!Hive.isAdapterRegistered(10)) {
     Hive.registerAdapter(NoiseFloorSampleAdapter());
@@ -58,7 +62,24 @@ void main() async {
   // Initialize background service for continuous wardriving (mobile only)
   await BackgroundServiceManager.initialize();
 
-  runApp(const MeshMapperApp());
+  runApp(MeshMapperApp(initialThemeMode: initialThemeMode));
+}
+
+/// Load theme mode from Hive before app starts to avoid flash of wrong theme
+Future<String> _loadInitialThemeMode() async {
+  try {
+    final box = await Hive.openBox('user_preferences');
+    final json = box.get('preferences');
+    if (json != null && json is Map) {
+      final themeMode = json['themeMode'] as String?;
+      if (themeMode != null) {
+        return themeMode;
+      }
+    }
+  } catch (e) {
+    debugLog('[APP] Failed to load initial theme: $e');
+  }
+  return 'dark'; // Default to dark mode
 }
 
 /// Request all required permissions on app startup
@@ -128,14 +149,50 @@ Future<void> _requestAndroidPermissions() async {
   }
 }
 
+// Dark theme - Tailwind Slate palette
+const darkColorScheme = ColorScheme.dark(
+  primary: Color(0xFF059669),       // emerald-600 (main actions)
+  onPrimary: Colors.white,
+  secondary: Color(0xFF0284C7),     // sky-600 (TX ping)
+  onSecondary: Colors.white,
+  tertiary: Color(0xFF4F46E5),      // indigo-600 (auto modes)
+  onTertiary: Colors.white,
+  surface: Color(0xFF1E293B),       // slate-800 (cards/panels)
+  onSurface: Color(0xFFF1F5F9),     // slate-100 (primary text)
+  onSurfaceVariant: Color(0xFF94A3B8), // slate-400 (muted text)
+  surfaceContainerHighest: Color(0xFF0F172A), // slate-900 (main bg)
+  outline: Color(0xFF334155),       // slate-700 (borders)
+  error: Color(0xFFF87171),         // red-400
+  onError: Colors.white,
+);
+
+// Light theme - Tailwind Slate palette (inverted)
+const lightColorScheme = ColorScheme.light(
+  primary: Color(0xFF059669),       // emerald-600
+  onPrimary: Colors.white,
+  secondary: Color(0xFF0284C7),     // sky-600
+  onSecondary: Colors.white,
+  tertiary: Color(0xFF4F46E5),      // indigo-600
+  onTertiary: Colors.white,
+  surface: Color(0xFFF8FAFC),       // slate-50 (cards/panels)
+  onSurface: Color(0xFF1E293B),     // slate-800 (primary text)
+  onSurfaceVariant: Color(0xFF64748B), // slate-500 (muted text)
+  surfaceContainerHighest: Color(0xFFFFFFFF), // white (main bg)
+  outline: Color(0xFFCBD5E1),       // slate-300 (borders)
+  error: Color(0xFFDC2626),         // red-600
+  onError: Colors.white,
+);
+
 class MeshMapperApp extends StatelessWidget {
-  const MeshMapperApp({super.key});
+  final String initialThemeMode;
+
+  const MeshMapperApp({super.key, required this.initialThemeMode});
 
   @override
   Widget build(BuildContext context) {
     // Create platform-appropriate Bluetooth service
-    final BluetoothService bluetoothService = kIsWeb 
-        ? WebBluetoothService() 
+    final BluetoothService bluetoothService = kIsWeb
+        ? WebBluetoothService()
         : MobileBluetoothService();
 
     return MultiProvider(
@@ -144,55 +201,110 @@ class MeshMapperApp extends StatelessWidget {
           create: (_) => AppStateProvider(bluetoothService: bluetoothService),
         ),
       ],
-      child: MaterialApp(
-        title: 'MeshMapper',
-        theme: ThemeData(
-          colorScheme: const ColorScheme.dark(
-            // Tailwind Slate palette
-            primary: Color(0xFF059669),       // emerald-600 (main actions)
-            onPrimary: Colors.white,
-            secondary: Color(0xFF0284C7),     // sky-600 (TX ping)
-            onSecondary: Colors.white,
-            tertiary: Color(0xFF4F46E5),      // indigo-600 (auto modes)
-            onTertiary: Colors.white,
-            surface: Color(0xFF1E293B),       // slate-800 (cards/panels)
-            onSurface: Color(0xFFF1F5F9),     // slate-100 (primary text)
-            onSurfaceVariant: Color(0xFF94A3B8), // slate-400 (muted text)
-            surfaceContainerHighest: Color(0xFF0F172A), // slate-900 (main bg)
-            outline: Color(0xFF334155),       // slate-700 (borders)
-            error: Color(0xFFF87171),         // red-400
-            onError: Colors.white,
-          ),
-          scaffoldBackgroundColor: const Color(0xFF0F172A), // slate-900
-          appBarTheme: const AppBarTheme(
-            backgroundColor: Color(0xFF1E293B), // slate-800
-            foregroundColor: Color(0xFFF1F5F9), // slate-100
-          ),
-          cardTheme: CardThemeData(
-            color: const Color(0xFF1E293B), // slate-800
-            shape: RoundedRectangleBorder(
-              borderRadius: BorderRadius.circular(12),
-              side: const BorderSide(color: Color(0xFF334155)), // slate-700
+      child: _ThemedApp(initialThemeMode: initialThemeMode),
+    );
+  }
+}
+
+/// Separate widget to handle theme switching with Consumer
+/// Uses initialThemeMode on first build to avoid flash of wrong theme
+class _ThemedApp extends StatefulWidget {
+  final String initialThemeMode;
+
+  const _ThemedApp({required this.initialThemeMode});
+
+  @override
+  State<_ThemedApp> createState() => _ThemedAppState();
+}
+
+class _ThemedAppState extends State<_ThemedApp> {
+  bool _isFirstBuild = true;
+
+  @override
+  Widget build(BuildContext context) {
+    return Consumer<AppStateProvider>(
+      builder: (context, appState, child) {
+        String effectiveThemeMode;
+
+        if (_isFirstBuild) {
+          // On first build, use the pre-loaded theme to avoid flash
+          effectiveThemeMode = widget.initialThemeMode;
+          // Schedule switching to provider-managed theme after first frame
+          WidgetsBinding.instance.addPostFrameCallback((_) {
+            if (mounted && _isFirstBuild) {
+              setState(() => _isFirstBuild = false);
+            }
+          });
+        } else {
+          // After first build, always use provider's value for dynamic updates
+          effectiveThemeMode = appState.preferences.themeMode;
+        }
+
+        final isDarkMode = effectiveThemeMode == 'dark';
+
+        return MaterialApp(
+          title: 'MeshMapper',
+          theme: ThemeData(
+            colorScheme: lightColorScheme,
+            scaffoldBackgroundColor: const Color(0xFFF1F5F9), // slate-100
+            appBarTheme: const AppBarTheme(
+              backgroundColor: Color(0xFFF8FAFC), // slate-50
+              foregroundColor: Color(0xFF1E293B), // slate-800
+            ),
+            cardTheme: CardThemeData(
+              color: const Color(0xFFF8FAFC), // slate-50
+              shape: RoundedRectangleBorder(
+                borderRadius: BorderRadius.circular(12),
+                side: const BorderSide(color: Color(0xFFCBD5E1)), // slate-300
+              ),
             ),
+            dividerColor: const Color(0xFFCBD5E1), // slate-300
+            snackBarTheme: SnackBarThemeData(
+              backgroundColor: const Color(0xFF334155), // slate-700
+              contentTextStyle: const TextStyle(
+                color: Color(0xFFF1F5F9), // slate-100
+                fontSize: 14,
+              ),
+              shape: RoundedRectangleBorder(
+                borderRadius: BorderRadius.circular(8),
+              ),
+              behavior: SnackBarBehavior.floating,
+            ),
+            useMaterial3: true,
           ),
-          dividerColor: const Color(0xFF334155), // slate-700
-          snackBarTheme: SnackBarThemeData(
-            backgroundColor: const Color(0xFF334155), // slate-700
-            contentTextStyle: const TextStyle(
-              color: Color(0xFFF1F5F9), // slate-100
-              fontSize: 14,
+          darkTheme: ThemeData(
+            colorScheme: darkColorScheme,
+            scaffoldBackgroundColor: const Color(0xFF0F172A), // slate-900
+            appBarTheme: const AppBarTheme(
+              backgroundColor: Color(0xFF1E293B), // slate-800
+              foregroundColor: Color(0xFFF1F5F9), // slate-100
+            ),
+            cardTheme: CardThemeData(
+              color: const Color(0xFF1E293B), // slate-800
+              shape: RoundedRectangleBorder(
+                borderRadius: BorderRadius.circular(12),
+                side: const BorderSide(color: Color(0xFF334155)), // slate-700
+              ),
             ),
-            shape: RoundedRectangleBorder(
-              borderRadius: BorderRadius.circular(8),
+            dividerColor: const Color(0xFF334155), // slate-700
+            snackBarTheme: SnackBarThemeData(
+              backgroundColor: const Color(0xFF334155), // slate-700
+              contentTextStyle: const TextStyle(
+                color: Color(0xFFF1F5F9), // slate-100
+                fontSize: 14,
+              ),
+              shape: RoundedRectangleBorder(
+                borderRadius: BorderRadius.circular(8),
+              ),
+              behavior: SnackBarBehavior.floating,
             ),
-            behavior: SnackBarBehavior.floating,
+            useMaterial3: true,
           ),
-          useMaterial3: true,
-        ),
-        themeMode: ThemeMode.light, // Force our dark theme
-        home: const MainScaffold(),
-        debugShowCheckedModeBanner: false,
-      ),
+          themeMode: isDarkMode ? ThemeMode.dark : ThemeMode.light,
+          home: const MainScaffold(),
+          debugShowCheckedModeBanner: false,
+        );
+      },
     );
   }
 }

lib/models/user_preferences.dart

@@ -46,6 +46,9 @@ class UserPreferences {
   /// Close app after disconnect (Android only)
   final bool closeAppAfterDisconnect;
 
+  /// App theme mode (dark, light)
+  final String themeMode;
+
   const UserPreferences({
     this.powerLevel = 0.3,
     this.txPower = 22,
@@ -62,6 +65,7 @@ class UserPreferences {
     this.developerModeEnabled = false,
     this.mapStyle = 'dark',
     this.closeAppAfterDisconnect = false,
+    this.themeMode = 'dark',
   });
 
   /// Create from JSON (for persistence)
@@ -82,6 +86,7 @@ class UserPreferences {
       developerModeEnabled: (json['developerModeEnabled'] as bool?) ?? false,
       mapStyle: (json['mapStyle'] as String?) ?? 'dark',
       closeAppAfterDisconnect: (json['closeAppAfterDisconnect'] as bool?) ?? false,
+      themeMode: (json['themeMode'] as String?) ?? 'dark',
     );
   }
 
@@ -103,6 +108,7 @@ class UserPreferences {
       'developerModeEnabled': developerModeEnabled,
       'mapStyle': mapStyle,
       'closeAppAfterDisconnect': closeAppAfterDisconnect,
+      'themeMode': themeMode,
     };
   }
 
@@ -123,6 +129,7 @@ class UserPreferences {
     bool? developerModeEnabled,
     String? mapStyle,
     bool? closeAppAfterDisconnect,
+    String? themeMode,
   }) {
     return UserPreferences(
       powerLevel: powerLevel ?? this.powerLevel,
@@ -140,6 +147,7 @@ class UserPreferences {
       developerModeEnabled: developerModeEnabled ?? this.developerModeEnabled,
       mapStyle: mapStyle ?? this.mapStyle,
       closeAppAfterDisconnect: closeAppAfterDisconnect ?? this.closeAppAfterDisconnect,
+      themeMode: themeMode ?? this.themeMode,
     );
   }
 
@@ -182,7 +190,8 @@ class UserPreferences {
         other.backgroundModeEnabled == backgroundModeEnabled &&
         other.developerModeEnabled == developerModeEnabled &&
         other.mapStyle == mapStyle &&
-        other.closeAppAfterDisconnect == closeAppAfterDisconnect;
+        other.closeAppAfterDisconnect == closeAppAfterDisconnect &&
+        other.themeMode == themeMode;
   }
 
   @override
@@ -202,6 +211,7 @@ class UserPreferences {
       developerModeEnabled,
       mapStyle,
       closeAppAfterDisconnect,
+      themeMode,
     );
   }
 }