diff --git a/client/src/standalone/player/src/sass/shared/_player-variables.scss b/client/src/standalone/player/src/sass/shared/_player-variables.scss
index e939d3c4e..7e1978cce 100644
--- a/client/src/standalone/player/src/sass/shared/_player-variables.scss
+++ b/client/src/standalone/player/src/sass/shared/_player-variables.scss
@@ -1,9 +1,7 @@
 @use "sass:color";
 
-$primary-foreground-color: #fff;
-$primary-foreground-opacity: 0.9;
-$primary-foreground-opacity-hover: 1;
-$primary-background-color: rgba(0, 0, 0, 0.8);
+$fg-opacity: 0.9;
+$fg-opacity-hover: 1;
 
 $font-size: 13px;
 
diff --git a/client/src/standalone/player/src/sass/shared/context-menu.scss b/client/src/standalone/player/src/sass/shared/context-menu.scss
index 8f12bcac7..568806eb7 100644
--- a/client/src/standalone/player/src/sass/shared/context-menu.scss
+++ b/client/src/standalone/player/src/sass/shared/context-menu.scss
@@ -13,7 +13,7 @@ $context-menu-width: 350px;
   z-index: 105; // On top of the progress bar
 
   .vjs-menu-content {
-    opacity: $primary-foreground-opacity;
+    opacity: $fg-opacity;
     color: pvar(--embed-fg);
     font-size: $font-size !important;
     font-weight: $font-semibold;
@@ -27,7 +27,7 @@ $context-menu-width: 350px;
     justify-content: flex-start;
 
     &:hover {
-      background-color: rgba(255, 255, 255, 0.2);
+      background-color: var(--embed-background-color-hover);
     }
 
     [class^="vjs-icon-"] {
diff --git a/client/src/standalone/player/src/sass/shared/control-bar.scss b/client/src/standalone/player/src/sass/shared/control-bar.scss
index 3d6e597a0..6c761ca71 100644
--- a/client/src/standalone/player/src/sass/shared/control-bar.scss
+++ b/client/src/standalone/player/src/sass/shared/control-bar.scss
@@ -88,10 +88,10 @@ $chapter-marker-size: 9px;
     transition: opacity 0.1s;
 
     &:not(.vjs-disabled) {
-      opacity: $primary-foreground-opacity;
+      opacity: $fg-opacity;
 
       &:hover {
-        opacity: $primary-foreground-opacity-hover;
+        opacity: $fg-opacity-hover;
       }
     }
   }
@@ -154,7 +154,7 @@ $chapter-marker-size: 9px;
   .vjs-duration,
   .vjs-peertube {
     color: pvar(--embed-fg);
-    opacity: $primary-foreground-opacity;
+    opacity: $fg-opacity;
   }
 
   .vjs-time-control {
@@ -195,7 +195,7 @@ $chapter-marker-size: 9px;
 
   .vjs-pt-live-control {
     width: auto;
-    opacity: $primary-foreground-opacity; // videojs adds a .vjs-disabled when the live is synced
+    opacity: $fg-opacity; // videojs adds a .vjs-disabled when the live is synced
     font-size: var(--control-bar-font-size);
 
     @include margin-right(auto);
@@ -204,7 +204,7 @@ $chapter-marker-size: 9px;
       cursor: pointer;
 
       &:hover {
-        opacity: $primary-foreground-opacity-hover;
+        opacity: $fg-opacity-hover;
       }
     }
 
@@ -480,7 +480,7 @@ $chapter-marker-size: 9px;
 
     &.enabled,
     &.enabled:hover {
-      opacity: $primary-foreground-opacity !important;
+      opacity: $fg-opacity !important;
     }
 
     &:focus {
diff --git a/client/src/standalone/player/src/sass/shared/peertube-skin.scss b/client/src/standalone/player/src/sass/shared/peertube-skin.scss
index ddc80393d..fb37ee814 100644
--- a/client/src/standalone/player/src/sass/shared/peertube-skin.scss
+++ b/client/src/standalone/player/src/sass/shared/peertube-skin.scss
@@ -5,10 +5,11 @@
 @use "./_player-mixins" as *;
 
 body {
-  --embed-foreground-color: #{$primary-foreground-color};
-  --embed-background-color: #{$primary-background-color};
+  --embed-foreground-color: #fff;
+  --embed-background-color: rgba(0, 0, 0, 0.6);
+  --embed-background-color-hover: rgba(255, 255, 255, 0.1);
 
-  --embed-big-play-background-color: #{$primary-background-color};
+  --embed-big-play-background-color: rgba(0, 0, 0, 0.8);
 
   // Prevent z-index bug with Firefox PiP button
   // See:
@@ -85,7 +86,7 @@ body {
     }
 
     .vjs-control-bar {
-      opacity: $primary-foreground-opacity-hover;
+      opacity: $fg-opacity-hover;
     }
   }
 
diff --git a/client/src/standalone/player/src/sass/shared/settings-menu.scss b/client/src/standalone/player/src/sass/shared/settings-menu.scss
index 3185f6253..432089715 100644
--- a/client/src/standalone/player/src/sass/shared/settings-menu.scss
+++ b/client/src/standalone/player/src/sass/shared/settings-menu.scss
@@ -88,7 +88,7 @@ $setting-transition-easing: ease-out;
 
           &:hover {
             cursor: pointer;
-            background-color: rgba(255, 255, 255, 0.2);
+            background-color: var(--embed-background-color-hover);
           }
 
           &.disabled {