Merge pull request #36 from defuncart/feat/dark-mode

feat: Support Dark Mode

Author: simonbengtsson

lib/interface/home.dart

@@ -956,8 +956,10 @@ class HomeScreenState extends ConsumerState<HomeScreen>
   Widget buildSectionTitle(String text) {
     return Padding(
       padding: const EdgeInsets.only(left: 16, right: 16),
-      child: Text(text.toUpperCase(),
-          style: const TextStyle(color: Colors.black54, fontSize: 13)),
+      child: Text(
+        text.toUpperCase(),
+        style: Theme.of(context).textTheme.titleSmall,
+      ),
     );
   }
 
@@ -1006,7 +1008,6 @@ class HomeScreenState extends ConsumerState<HomeScreen>
             },
             selected: selected,
             trailing: selected ? const Icon(Icons.check) : null,
-            selectedTileColor: Colors.grey[100],
             leading: Column(
               mainAxisAlignment: MainAxisAlignment.center,
               children: [
@@ -1049,17 +1050,11 @@ class HomeScreenState extends ConsumerState<HomeScreen>
   }
 
   Widget buildOwnDeviceView(Device device) {
-    return Container(
-      decoration: const BoxDecoration(
-        color: Colors.white,
-        boxShadow: [
-          BoxShadow(
-            color: Colors.black12,
-            offset: Offset(0, 0),
-            blurRadius: 10.0,
-          ),
-        ],
-      ),
+    print(Theme.of(context).brightness);
+    print(MediaQuery.platformBrightnessOf(context));
+
+    return Material(
+      elevation: 2,
       child: SafeArea(
         bottom: false,
         child: Column(

lib/interface/pairing_dialog.dart

@@ -61,8 +61,7 @@ class PairingDialogState extends State<PairingDialog> {
               Row(
                 mainAxisAlignment: MainAxisAlignment.spaceBetween,
                 children: [
-                  const Text('Pairing Code',
-                      style: TextStyle(color: Color.fromRGBO(0, 0, 0, 0.7))),
+                  const Text('Pairing Code'),
                   Padding(
                     padding: const EdgeInsets.only(top: 8, bottom: 8),
                     child: Container(
@@ -108,13 +107,11 @@ class PairingDialogState extends State<PairingDialog> {
                   ),
                 ],
               ),
-              const Divider(color: Colors.grey),
+              const Divider(),
               Row(
                 mainAxisAlignment: MainAxisAlignment.spaceBetween,
                 children: [
-                  const Text('Your Pairing Code',
-                      style: TextStyle(
-                          color: Color.fromRGBO(0, 0, 0, 0.7), height: 2)),
+                  const Text('Your Pairing Code', style: TextStyle(height: 2)),
                   Padding(
                     padding: const EdgeInsets.only(top: 16.0, bottom: 8.0),
                     child: Text(localPairingCode,
@@ -127,14 +124,19 @@ class PairingDialogState extends State<PairingDialog> {
               ),
               if (errorMessage != null)
                 Padding(
-                  padding: const EdgeInsets.only(top: 16.0),
+                  padding: const EdgeInsets.symmetric(vertical: 16.0),
                   child: Container(
                     padding: const EdgeInsets.only(
                         top: 8, bottom: 8, right: 15, left: 15),
                     decoration: BoxDecoration(
-                        borderRadius: BorderRadius.circular(100),
-                        color: const Color.fromRGBO(0, 0, 0, 0.1)),
-                    child: Text(errorMessage ?? ''),
+                      borderRadius: BorderRadius.circular(100),
+                      color: Theme.of(context).colorScheme.error,
+                    ),
+                    child: Text(
+                      errorMessage ?? '',
+                      style: TextStyle(
+                          color: Theme.of(context).colorScheme.onError),
+                    ),
                   ),
                 ),
             ],

lib/interface/themes.dart

@@ -0,0 +1,25 @@
+import 'package:flutter/material.dart';
+
+const _primaryColor = Color.fromRGBO(150, 150, 250, 1);
+
+final lightTheme = ThemeData(
+  colorScheme: ColorScheme.fromSeed(seedColor: _primaryColor),
+  useMaterial3: true,
+  textTheme: const TextTheme(
+    titleSmall: TextStyle(color: Colors.black54),
+  ),
+);
+
+final darkTheme = ThemeData.dark(
+  useMaterial3: true,
+).copyWith(
+  colorScheme: ColorScheme.fromSeed(
+    brightness: Brightness.dark,
+    seedColor: _primaryColor,
+  ),
+  textTheme: TextTheme(
+    titleSmall: TextStyle(
+      color: Colors.white.withOpacity(0.87),
+    ),
+  ),
+);

lib/main.dart

@@ -1,3 +1,4 @@
+import 'package:airdash/interface/themes.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:sentry_flutter/sentry_flutter.dart';
@@ -24,12 +25,11 @@ class App extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    var primaryColor = const Color.fromRGBO(150, 150, 250, 1);
     return MaterialApp(
       debugShowCheckedModeBanner: false,
-      theme: ThemeData(
-          colorScheme: ColorScheme.fromSeed(seedColor: primaryColor),
-          useMaterial3: true),
+      theme: lightTheme,
+      darkTheme: darkTheme,
+      themeMode: ThemeMode.system,
       home: const SetupScreen(),
     );
   }