improve mobile dark UI

boyan01 · Dec 23, 2023 · e6c3b53 · e6c3b53
1 parent 21612eb
commit e6c3b53
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 10 deletions.
diff --git a/lib/navigation/common/material/theme.dart b/lib/navigation/common/material/theme.dart
@@ -73,6 +73,15 @@ extension QuietAppTheme on BuildContext {
   TextTheme get primaryTextTheme => Theme.of(this).primaryTextTheme;
 
   AppColorScheme get colorScheme => AppTheme.colorScheme(this);
+
+  ColorScheme get colorScheme2 => Theme.of(this).colorScheme;
+
+  Color dynamicColor({
+    required Color light,
+    required Color dark,
+  }) {
+    return colorScheme.brightness == Brightness.light ? light : dark;
+  }
 }
 
 extension TextStyleExtesntion on TextStyle? {

diff --git a/lib/navigation/common/player/player_actions.dart b/lib/navigation/common/player/player_actions.dart
@@ -16,7 +16,11 @@ class PlayingOperationBar extends ConsumerWidget {
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    final iconColor = this.iconColor ?? context.colorScheme.onPrimary;
+    final iconColor = this.iconColor ??
+        context.dynamicColor(
+          light: context.colorScheme2.onPrimary,
+          dark: context.colorScheme2.onBackground,
+        );
     final music = ref.watch(playingTrackProvider)!;
 
     return Row(

diff --git a/lib/navigation/common/player/player_progress.dart b/lib/navigation/common/player/player_progress.dart
@@ -17,6 +17,11 @@ class DurationProgressBar extends ConsumerWidget {
     final player = ref.read(playerProvider);
     final theme = Theme.of(context).primaryTextTheme;
 
+    final primaryColor = context.dynamicColor(
+      light: context.colorScheme2.onPrimary,
+      dark: context.colorScheme2.onBackground,
+    );
+
     return Padding(
       padding: const EdgeInsets.symmetric(vertical: 20),
       child: SliderTheme(
@@ -26,12 +31,12 @@ class DurationProgressBar extends ConsumerWidget {
           trackShape: const UnboundedRoundedRectSliderTrackShape(
             removeAdditionalActiveTrackHeight: true,
           ),
-          activeTrackColor: context.colorScheme.onPrimary,
-          inactiveTrackColor: context.colorScheme.onPrimary.withOpacity(0.5),
+          activeTrackColor: primaryColor,
+          inactiveTrackColor: primaryColor.withOpacity(0.5),
           overlayShape: const RoundSliderOverlayShape(
             overlayRadius: 10,
           ),
-          thumbColor: context.colorScheme.onPrimary,
+          thumbColor: primaryColor,
           showValueIndicator: ShowValueIndicator.always,
         ),
         child: Padding(

diff --git a/lib/navigation/mobile/player/page_playing.dart b/lib/navigation/mobile/player/page_playing.dart
@@ -54,7 +54,7 @@ class PlayingPage extends ConsumerWidget {
   }
 }
 
-///player controller
+/// player controller
 /// pause,play,play next,play previous...
 class PlayerControllerBar extends ConsumerWidget {
   const PlayerControllerBar({super.key});
@@ -91,8 +91,13 @@ class PlayerControllerBar extends ConsumerWidget {
       ),
     );
 
-    return IconTheme(
-      data: IconThemeData(color: context.colorScheme.onPrimary),
+    return IconTheme.merge(
+      data: IconThemeData(
+        color: context.dynamicColor(
+          light: context.colorScheme2.onPrimary,
+          dark: context.colorScheme2.onBackground,
+        ),
+      ),
       child: Container(
         padding: const EdgeInsets.symmetric(vertical: 16),
         child: Row(
@@ -199,7 +204,12 @@ class PlayingTitle extends ConsumerWidget {
   Widget build(BuildContext context, WidgetRef ref) {
     return AppBar(
       elevation: 0,
-      leading: AppBackButton(color: context.colorScheme.onPrimary),
+      leading: AppBackButton(
+        color: context.dynamicColor(
+          light: context.colorScheme2.onPrimary,
+          dark: context.colorScheme2.onBackground,
+        ),
+      ),
       titleSpacing: 0,
       title: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
@@ -228,7 +238,10 @@ class PlayingTitle extends ConsumerWidget {
                 Icon(
                   FluentIcons.chevron_right_20_regular,
                   size: 17,
-                  color: context.colorScheme.onPrimary,
+                  color: context.dynamicColor(
+                    light: context.colorScheme2.onPrimary,
+                    dark: context.colorScheme2.onBackground,
+                  ),
                 ),
                 const SizedBox(width: 16),
               ],

diff --git a/lib/navigation/mobile/playlists/playlist_flexible_app_bar.dart b/lib/navigation/mobile/playlists/playlist_flexible_app_bar.dart
@@ -434,7 +434,7 @@ class _AppBar extends StatelessWidget {
       automaticallyImplyLeading: false,
       title: Text(t > 0.5 ? playlist.name : context.strings.playlist),
       backgroundColor: Colors.transparent,
-      foregroundColor: context.colorScheme.onPrimary,
+      foregroundColor: Colors.white,
       elevation: 0,
       centerTitle: false,
       titleSpacing: 0,