Make better theme

lib/main.dart

@@ -20,11 +20,18 @@ class MyApp extends StatelessWidget {
       title: 'Gergle',
       theme: ThemeData(
         useMaterial3: true,
-
+        colorScheme: const ColorScheme(
-        // primaryColor: const Color(0x002244FF),
-        colorScheme: ColorScheme.fromSeed(
-          seedColor: Colors.lightBlue,
           brightness: Brightness.dark,
+          primary: Color(0xFF86CECB),
+          onPrimary: Color.fromARGB(255, 200, 255, 252),
+          secondary: Color.fromARGB(255, 19, 122, 127),
+          onSecondary: Color.fromARGB(255, 25, 157, 164),
+          error: Colors.red,
+          onError: Colors.redAccent,
+          surface: Color.fromARGB(255, 12, 72, 75),
+          surfaceBright: Color.fromARGB(255, 19, 122, 127),
+          surfaceDim: Color.fromARGB(255, 8, 53, 54),
+          onSurface: Color.fromARGB(255, 255, 255, 255),
         ),
       ),
       home: MultiBlocProvider(

lib/player_ui/app_bar.dart

@@ -12,7 +12,8 @@ class PlayerUIAppBar {
   static AppBar appbar(BuildContext context) {
     return AppBar(
       title: const Text('Gergle'),
-      backgroundColor: Theme.of(context).primaryColor,
+      backgroundColor: Theme.of(context).colorScheme.surfaceBright,
+      surfaceTintColor: Colors.transparent,
       actions: [
         IconButton(
           icon: const Icon(Icons.copy_all),

lib/player_ui/bottom_bar.dart

@@ -26,6 +26,7 @@ class PlayerUIBottomBar extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return BottomAppBar(
+      color: Theme.of(context).colorScheme.surfaceBright,
       child: Row(
         children: [
           IconButton(