diff --git a/libs/components/src/lib/video-player/partials/variables.scss b/libs/components/src/lib/video-player/partials/variables.scss
index 6cb9217431..36a0c9ae1f 100644
--- a/libs/components/src/lib/video-player/partials/variables.scss
+++ b/libs/components/src/lib/video-player/partials/variables.scss
@@ -1,8 +1,18 @@
-// setting variables with hard-coded color, since design required both dark & light be the same
-$video-player-neutral-900: #1a1a1a;
+$video-player-neutral-900: light-dark(
+	var(--vvd-color-neutral-900),
+	var(--vvd-color-neutral-50)
+);
 $video-player-neutral-950: --vvd-color-neutral-950;
-$video-player-neutral-800: #333;
-$video-player-canvas-text: #fff;
+$video-player-neutral-800: light-dark(
+	var(--vvd-color-neutral-800),
+	var(--vvd-color-neutral-100)
+);
+$video-player-canvas-text: light-dark(
+	var(--vvd-color-canvas),
+	var(--vvd-color-canvas-text)
+);
+
+// setting variables with hard-coded color, since design required both dark & light be the same, and #0d0d0d is not set in both themes.
 $video-player-canvas: #0d0d0d;
 $video-player-canvas-opacity: #0d0d0dcc;
 $video-player-color-surface-4dp: linear-gradient(#ffffff14, #ffffff14), #0d0d0d;
diff --git a/libs/components/src/lib/video-player/video-player.scss b/libs/components/src/lib/video-player/video-player.scss
index 706699c82e..f634d4bf68 100644
--- a/libs/components/src/lib/video-player/video-player.scss
+++ b/libs/components/src/lib/video-player/video-player.scss
@@ -148,7 +148,10 @@
 		@include scrollbar.scrollbar;
 
 		& {
-			#{variables.$video-player-neutral-950}: #fff;
+			#{variables.$video-player-neutral-950}: light-dark(
+				var(--vvd-color-canvas),
+				var(--vvd-color-canvas-text)
+			);
 		}
 
 		&-button {