diff --git a/lib/pages/player/player_view.dart b/lib/pages/player/player_view.dart
index 7d9da94..3d81078 100644
--- a/lib/pages/player/player_view.dart
+++ b/lib/pages/player/player_view.dart
@@ -216,7 +216,8 @@ class _PlayerPageState extends State<PlayerPage> with WidgetsBindingObserver {
       fit: StackFit.expand,
       children: [
         ColoredBox(
-          color: AppColors.onSurface,
+          key: const Key('player-background'),
+          color: AppColors.ink,
           child: widget.homeMode
               ? null
               : RemoteImage(
diff --git a/lib/pages/player/widgets/player_overlay.dart b/lib/pages/player/widgets/player_overlay.dart
index 54e8f1f..9b9be7e 100644
--- a/lib/pages/player/widgets/player_overlay.dart
+++ b/lib/pages/player/widgets/player_overlay.dart
@@ -167,7 +167,8 @@ class PlayerPlaybackOverlay extends StatelessWidget {
         key: const Key('player-controls-bottom'),
         padding: const EdgeInsets.fromLTRB(14, 8, 14, 6),
         decoration: const BoxDecoration(
-          color: Color(0xED000000),
+          color: AppColors.card,
+          border: Border(top: BorderSide(color: AppColors.border)),
           borderRadius: BorderRadius.vertical(
             top: Radius.circular(_panelRadius),
           ),
@@ -220,7 +221,7 @@ class PlayerPlaybackOverlay extends StatelessWidget {
                   maxLines: 1,
                   overflow: TextOverflow.ellipsis,
                   style: TextStyle(
-                    color: AppColors.onPrimary,
+                    color: AppColors.onSurface,
                     fontFamily: 'Outfit',
                     fontSize: 18 * data.textScale,
                     fontWeight: FontWeight.w800,
@@ -230,7 +231,7 @@ class PlayerPlaybackOverlay extends StatelessWidget {
               const SizedBox(width: 6),
               const Icon(
                 Icons.chevron_right_rounded,
-                color: Colors.white70,
+                color: AppColors.muted,
                 size: 20,
               ),
             ],
@@ -262,8 +263,8 @@ class PlayerPlaybackOverlay extends StatelessWidget {
                         maxLines: 1,
                         overflow: TextOverflow.ellipsis,
                         style: const TextStyle(
-                          color: AppColors.onPrimary,
-                          fontSize: 12,
+                          color: AppColors.onSurface,
+                          fontSize: 11,
                           fontWeight: FontWeight.w700,
                         ),
                       ),
@@ -271,7 +272,7 @@ class PlayerPlaybackOverlay extends StatelessWidget {
                     const SizedBox(width: 3),
                     const Icon(
                       Icons.keyboard_arrow_up_rounded,
-                      color: AppColors.onPrimary,
+                      color: AppColors.onSurface,
                       size: 16,
                     ),
                   ],
diff --git a/lib/pages/player/widgets/player_overlay_parts.dart b/lib/pages/player/widgets/player_overlay_parts.dart
index 99c1452..bcc217e 100644
--- a/lib/pages/player/widgets/player_overlay_parts.dart
+++ b/lib/pages/player/widgets/player_overlay_parts.dart
@@ -87,8 +87,8 @@ class _PipButton extends StatelessWidget {
         tooltip: tooltip,
         padding: EdgeInsets.zero,
         style: IconButton.styleFrom(
-          backgroundColor: const Color(0x80000000),
-          foregroundColor: AppColors.onPrimary,
+          backgroundColor: AppColors.raised,
+          foregroundColor: AppColors.onSurface,
         ),
         onPressed: onPressed,
         icon: const Icon(Icons.picture_in_picture_alt_rounded, size: 17),
@@ -253,7 +253,7 @@ class _EpisodeSynopsisState extends State<_EpisodeSynopsis> {
                 ),
                 const Padding(
                   padding: EdgeInsets.symmetric(horizontal: 6),
-                  child: Text('|', style: TextStyle(color: Colors.white38)),
+                  child: Text('|', style: TextStyle(color: AppColors.border)),
                 ),
                 Expanded(
                   child: Text(
@@ -262,7 +262,7 @@ class _EpisodeSynopsisState extends State<_EpisodeSynopsis> {
                     maxLines: _expanded ? 3 : 1,
                     overflow: TextOverflow.ellipsis,
                     style: TextStyle(
-                      color: Colors.white70,
+                      color: AppColors.muted,
                       fontSize: 11 * widget.textScale,
                       height: 1.35,
                     ),
@@ -273,7 +273,7 @@ class _EpisodeSynopsisState extends State<_EpisodeSynopsis> {
                   _expanded
                       ? Icons.keyboard_arrow_up_rounded
                       : Icons.keyboard_arrow_down_rounded,
-                  color: Colors.white54,
+                  color: AppColors.subtle,
                   size: 16,
                 ),
               ],
@@ -283,7 +283,7 @@ class _EpisodeSynopsisState extends State<_EpisodeSynopsis> {
               Text(
                 widget.authorNote,
                 key: const Key('player-author-note'),
-                style: const TextStyle(color: Colors.white54, fontSize: 10),
+                style: const TextStyle(color: AppColors.muted, fontSize: 10),
               ),
             ],
           ],
diff --git a/test/player/player_fullscreen_test.dart b/test/player/player_fullscreen_test.dart
index ec41d51..8fe2c00 100644
--- a/test/player/player_fullscreen_test.dart
+++ b/test/player/player_fullscreen_test.dart
@@ -11,6 +11,7 @@ import 'package:fruitshorts/core/data/models/play_ticket.dart';
 import 'package:fruitshorts/core/data/repositories/favorite_repository.dart';
 import 'package:fruitshorts/core/data/repositories/playback_repository.dart';
 import 'package:fruitshorts/core/data/repositories/watch_history_repository.dart';
+import 'package:fruitshorts/core/theme/app_colors.dart';
 import 'package:fruitshorts/pages/player/widgets/player_center_toggle.dart';
 import 'package:fruitshorts/pages/player/widgets/seek_progress_bar.dart';
 
@@ -186,6 +187,16 @@ void main() {
     final rail = tester.getRect(
       find.byKey(const Key('player-interaction-rail')),
     );
+    expect(
+      tester
+          .widget<ColoredBox>(find.byKey(const Key('player-background')))
+          .color,
+      AppColors.ink,
+    );
+    final panel = tester.widget<Container>(
+      find.byKey(const Key('player-controls-bottom')),
+    );
+    expect((panel.decoration! as BoxDecoration).color, AppColors.card);
 
     expect(bottom.height, lessThanOrEqualTo(200));
     expect(bottom.top, greaterThanOrEqualTo(screenHeight * 0.78));