diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index ea3526145..a37c3ba14 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -10,6 +10,7 @@
 @use './primeng-custom';
 @use './z-index';
 @use './class-helpers/index.scss';
+@use '_css-variables' as *;
 
 @mixin main-col-expanded {
   --main-col-width: 100vw;
@@ -25,145 +26,7 @@ input[type="search"]::-webkit-search-results-button,
 input[type="search"]::-webkit-search-results-decoration { display: none; }
 
 body {
-  // ---------------------------------------------------------------------------
-  // New theme with fallback
-  // ---------------------------------------------------------------------------
-
-  --menu-bg: var(--menuBackgroundColor);
-  --menu-fg: var(--menuForegroundColor);
-
-  --fg: var(--mainForegroundColor, #000);
-
-  --bg: var(--mainBackgroundColor, #fff);
-  --bg-secondary: var(--greyBackgroundColor, #E5E5E5);
-
-  --primary: var(--mainColor, hsl(24, 90%, 45%));
-  --on-primary: #{pvar(--fg)};
-
-  --red: #{$red};
-  --on-red: #{$white};
-
-  --green: #{$green};
-
-  --input-fg: var(--inputForegroundColor, #{pvar(--fg)});
-  --input-bg: var(--inputBackgroundColor, #{pvar(--bg-secondary-400)});
-  --input-placeholder: var(--inputPlaceholderColor, #{pvar(--fg-50)});
-  --input-border-color: var(--inputBorderColor, #{pvar(--input-bg)});
-  --input-bg-in-secondary: #{pvar(--bg-secondary-450)};
-
-  --input-check-active-fg: #{pvar(--on-primary)};
-  --input-check-active-bg: #{pvar(--primary)};
-
-  --input-y-padding: 5px;
-  --input-x-padding: 20px;
-
-  --input-border-radius: 4px;
-
-  --textarea-fg: var(--textareaForegroundColor, #{pvar(--input-fg)});
-  --textarea-bg: var(--textareaBackgroundColor, #{pvar(--input-bg)});
-
-  --support-btn-fg: var(--supportButtonColor, #{pvar(--fg-300)});
-  --support-btn-bg: var(--supportButtonBackgroundColor, transparent);
-  --support-btn-heart-bg: var(--supportButtonHeartColor, #{$support-button-heart});
-
-  --x-margin-content: 2rem;
-
-  --main-col-width: calc(100vw - #{$menu-width});
-
-  --secondary-icon-color: #{pvar(--fg-50)};
-  --active-icon-color: #{pvar(--on-primary)};
-  --active-icon-bg: #{pvar(--primary)};
-
-  --border-primary: #{pvar(--primary)};
-  --border-secondary: #{pvar(--bg-secondary-450)};
-
-  --alert-primary-fg: #{pvar(--on-primary-200)};
-  --alert-primary-bg: #{pvar(--primary-200)};
-  --alert-primary-border-color: #{pvar(--primary-300)};
-
-  --menu-margin-left: #{$menu-margin-left};
-
-  --header-height: #{$header-height};
-
-  &.mobile-app-msg {
-    --header-height: #{$header-height + $header-mobile-msg-height};
-  }
-
-  --menu-fg: #{pvar(--fg-400)};
-  --menu-bg: #{pvar(--bg-secondary-400)};
-
-  @media screen and (max-width: $small-view) {
-    --header-height: #{$header-height-small-view};
-
-    &.mobile-app-msg {
-      --header-height: #{$header-height-small-view + $header-mobile-msg-height};
-    }
-  }
-
-  @media screen and (max-width: $mobile-view) {
-    --header-height: #{$header-height-mobile-view};
-
-    &.mobile-app-msg {
-      --header-height: #{$header-height-mobile-view + $header-mobile-msg-height};
-    }
-  }
-
-  // Light theme
-  &[data-pt-theme=peertube-core-light-beige],
-  &[data-pt-theme=default] {
-    --is-dark: 0;
-
-    --primary: #FF8F37;
-    --border-primary: #F2690D;
-
-    --fg: hsl(0 14% 2%);
-    --fg-200: hsl(0 14% 29%);
-
-    --bg: hsl(250 5% 96%);
-    --bg-secondary: hsl(0 12% 72%);
-    --bg-secondary-500: hsl(0 12% 72%);
-    --bg-secondary-450: hsl(0 13% 81%);
-    --bg-secondary-400: hsl(0 19% 89%);
-    --bg-secondary-350: hsl(0 13% 92%);
-
-    --menu-bg-600: hsl(0 12% 72%);
-    --menu-bg-550: hsl(0 13% 81%);
-    --menu-bg: hsl(0 19% 89%);
-
-    --secondary-icon-color: hsl(0, 9%, 51%);
-    --input-placeholder: hsl(0, 9%, 51%);
-
-    --input-check-active-fg: #{pvar(--bg)};
-    --input-check-active-bg: #{pvar(--fg-250)};
-
-    --alert-primary-fg: #{pvar(--on-primary-200)};
-    --alert-primary-bg: #{pvar(--primary-200)};
-    --alert-primary-border-color: #{pvar(--primary-300)};
-  }
-
-  // Brown
-  &[data-pt-theme=peertube-core-dark-brown] {
-    --is-dark: 1;
-
-    --primary: #FD9C50;
-    --on-primary: #111;
-    --border-primary: #F2690D;
-
-    --input-bg: #{pvar(--bg-secondary-450)};
-    --input-bg-in-secondary: #{pvar(--bg-secondary-500)};
-
-    --fg: hsl(0 10% 96%);
-
-    --bg: hsl(0 14% 7%);
-    --bg-secondary: hsl(0 14% 22%);
-
-    --alert-primary-fg: #{pvar(--on-primary)};
-    --alert-primary-bg: #cd9e7a;
-    --alert-primary-border-color: #{pvar(--primary-600)};
-
-    --active-icon-color: #{pvar(--fg-450)};
-    --active-icon-bg: #{pvar(--bg-secondary-600)};
-  }
+  @include define-css-variables();
 
   & {
     font-family: $main-fonts;
diff --git a/client/src/sass/include/_css-variables.scss b/client/src/sass/include/_css-variables.scss
new file mode 100644
index 000000000..8381f13de
--- /dev/null
+++ b/client/src/sass/include/_css-variables.scss
@@ -0,0 +1,147 @@
+@use '_variables' as *;
+@use '_mixins' as *;
+
+@mixin define-css-variables () {
+    // ---------------------------------------------------------------------------
+  // New theme with fallback
+  // ---------------------------------------------------------------------------
+
+  --menu-bg: var(--menuBackgroundColor);
+  --menu-fg: var(--menuForegroundColor);
+
+  --fg: var(--mainForegroundColor, #000);
+
+  --bg: var(--mainBackgroundColor, #fff);
+  --bg-secondary: var(--greyBackgroundColor, #E5E5E5);
+
+  --primary: var(--mainColor, hsl(24, 90%, 45%));
+  --on-primary: #{pvar(--fg)};
+
+  --red: #{$red};
+  --on-red: #{$white};
+
+  --green: #{$green};
+
+  --input-fg: var(--inputForegroundColor, #{pvar(--fg)});
+  --input-bg: var(--inputBackgroundColor, #{pvar(--bg-secondary-400)});
+  --input-placeholder: var(--inputPlaceholderColor, #{pvar(--fg-50)});
+  --input-border-color: var(--inputBorderColor, #{pvar(--input-bg)});
+  --input-bg-in-secondary: #{pvar(--bg-secondary-450)};
+
+  --input-check-active-fg: #{pvar(--on-primary)};
+  --input-check-active-bg: #{pvar(--primary)};
+
+  --input-y-padding: 5px;
+  --input-x-padding: 20px;
+
+  --input-border-radius: 4px;
+
+  --textarea-fg: var(--textareaForegroundColor, #{pvar(--input-fg)});
+  --textarea-bg: var(--textareaBackgroundColor, #{pvar(--input-bg)});
+
+  --support-btn-fg: var(--supportButtonColor, #{pvar(--fg-300)});
+  --support-btn-bg: var(--supportButtonBackgroundColor, transparent);
+  --support-btn-heart-bg: var(--supportButtonHeartColor, #{$support-button-heart});
+
+  --x-margin-content: 2rem;
+
+  --main-col-width: calc(100vw - #{$menu-width});
+
+  --secondary-icon-color: #{pvar(--fg-50)};
+  --active-icon-color: #{pvar(--on-primary)};
+  --active-icon-bg: #{pvar(--primary)};
+
+  --border-primary: #{pvar(--primary)};
+  --border-secondary: #{pvar(--bg-secondary-450)};
+
+  --alert-primary-fg: #{pvar(--on-primary-200)};
+  --alert-primary-bg: #{pvar(--primary-200)};
+  --alert-primary-border-color: #{pvar(--primary-300)};
+
+  --menu-margin-left: #{$menu-margin-left};
+
+  --header-height: #{$header-height};
+
+  --embed-fg: #fff;
+  --embed-big-play-bg: transparent;
+
+  &.mobile-app-msg {
+    --header-height: #{$header-height + $header-mobile-msg-height};
+  }
+
+  --menu-fg: #{pvar(--fg-400)};
+  --menu-bg: #{pvar(--bg-secondary-400)};
+
+  @media screen and (max-width: $small-view) {
+    --header-height: #{$header-height-small-view};
+
+    &.mobile-app-msg {
+      --header-height: #{$header-height-small-view + $header-mobile-msg-height};
+    }
+  }
+
+  @media screen and (max-width: $mobile-view) {
+    --header-height: #{$header-height-mobile-view};
+
+    &.mobile-app-msg {
+      --header-height: #{$header-height-mobile-view + $header-mobile-msg-height};
+    }
+  }
+
+  // Light theme
+  &[data-pt-theme=peertube-core-light-beige],
+  &[data-pt-theme=default] {
+    --is-dark: 0;
+
+    --primary: #FF8F37;
+    --border-primary: #F2690D;
+
+    --fg: hsl(0 14% 2%);
+    --fg-200: hsl(0 14% 29%);
+
+    --bg: hsl(250 5% 96%);
+    --bg-secondary: hsl(0 12% 72%);
+    --bg-secondary-500: hsl(0 12% 72%);
+    --bg-secondary-450: hsl(0 13% 81%);
+    --bg-secondary-400: hsl(0 19% 89%);
+    --bg-secondary-350: hsl(0 13% 92%);
+
+    --menu-bg-600: hsl(0 12% 72%);
+    --menu-bg-550: hsl(0 13% 81%);
+    --menu-bg: hsl(0 19% 89%);
+
+    --secondary-icon-color: hsl(0, 9%, 51%);
+    --input-placeholder: hsl(0, 9%, 51%);
+
+    --input-check-active-fg: #{pvar(--bg)};
+    --input-check-active-bg: #{pvar(--fg-250)};
+
+    --alert-primary-fg: #{pvar(--on-primary-200)};
+    --alert-primary-bg: #{pvar(--primary-200)};
+    --alert-primary-border-color: #{pvar(--primary-300)};
+  }
+
+  // Brown
+  &[data-pt-theme=peertube-core-dark-brown] {
+    --is-dark: 1;
+
+    --primary: #FD9C50;
+    --on-primary: #111;
+    --border-primary: #F2690D;
+
+    --input-bg: #{pvar(--bg-secondary-450)};
+    --input-bg-in-secondary: #{pvar(--bg-secondary-500)};
+
+    --fg: hsl(0 10% 96%);
+
+    --bg: hsl(0 14% 7%);
+    --bg-secondary: hsl(0 14% 22%);
+
+    --alert-primary-fg: #{pvar(--on-primary)};
+    --alert-primary-bg: #cd9e7a;
+    --alert-primary-border-color: #{pvar(--primary-600)};
+
+    --active-icon-color: #{pvar(--fg-450)};
+    --active-icon-bg: #{pvar(--bg-secondary-600)};
+  }
+}
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 30b294ee8..fbfb6b700 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -83,9 +83,6 @@ $primeng-breakpoint: 960px;
 // ---------------------------------------------------------------------------
 
 $variables: (
-  --embed-foreground-color: var(--embed-foreground-color),
-  --embed-big-play-background-color: var(--embed-big-play-background-color),
-
   --x-margin-content: var(--x-margin-content),
   --main-col-width: var(--main-col-width),
   --header-height: var(--header-height),
@@ -209,6 +206,9 @@ $variables: (
   --alert-primary-border-color: var(--alert-primary-border-color),
 
   --menu-margin-left: var(--menu-margin-left),
+
+  --embed-fg: var(--embed-fg),
+  --embed-big-play-bg: var(--embed-big-play-bg),
 );
 
 // SASS type check our CSS variables
diff --git a/client/src/sass/player/context-menu.scss b/client/src/sass/player/context-menu.scss
index ee04e5fd0..f5b051be2 100644
--- a/client/src/sass/player/context-menu.scss
+++ b/client/src/sass/player/context-menu.scss
@@ -16,7 +16,7 @@ $context-menu-width: 350px;
 
   .vjs-menu-content {
     opacity: $primary-foreground-opacity;
-    color: pvar(--embed-foreground-color);
+    color: pvar(--embed-fg);
     font-size: $font-size !important;
     font-weight: $font-semibold;
   }
diff --git a/client/src/sass/player/control-bar.scss b/client/src/sass/player/control-bar.scss
index c58d67aad..af54d0ccc 100644
--- a/client/src/sass/player/control-bar.scss
+++ b/client/src/sass/player/control-bar.scss
@@ -27,7 +27,7 @@ $chapter-marker-size: 9px;
   border-radius: $chapter-marker-size;
   margin-left: - math.div($chapter-marker-size, 2);
 
-  background-color: pvar(--bg);
+  background-color: #fff;
   cursor: pointer;
   transition: transform 50ms ease-in-out, border-color 50ms ease-in-out;
   border: 2px solid transparent;
@@ -77,7 +77,7 @@ $chapter-marker-size: 9px;
   .vjs-theater-control,
   .vjs-caption-toggle-control,
   .vjs-settings {
-    color: pvar(--embed-foreground-color) !important;
+    color: pvar(--embed-fg) !important;
 
     opacity: $primary-foreground-opacity;
     transition: opacity .1s;
@@ -90,7 +90,7 @@ $chapter-marker-size: 9px;
   .vjs-current-time,
   .vjs-duration,
   .vjs-peertube {
-    color: pvar(--embed-foreground-color);
+    color: pvar(--embed-fg);
     opacity: $primary-foreground-opacity;
   }
 
@@ -111,7 +111,7 @@ $chapter-marker-size: 9px;
       transition: none;
 
       .vjs-play-progress {
-        background: pvar(--embed-foreground-color);
+        background: pvar(--embed-fg);
 
         // Not display the circle if the progress is not hovered
         &::before {
diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss
index 0c069e88e..ea9f3e335 100644
--- a/client/src/sass/player/peertube-skin.scss
+++ b/client/src/sass/player/peertube-skin.scss
@@ -18,7 +18,7 @@ body {
 
 .video-js.vjs-peertube-skin {
   font-size: $font-size;
-  color: pvar(--embed-foreground-color);
+  color: pvar(--embed-fg);
 
   &.disabled {
     cursor: default;
@@ -101,7 +101,7 @@ body {
   }
 
   .vjs-big-play-button {
-    background-color: pvar(--embed-big-play-background-color);
+    background-color: pvar(--embed-big-play-bg);
   }
 
   .vjs-settings-dialog,
diff --git a/client/src/sass/player/settings-menu.scss b/client/src/sass/player/settings-menu.scss
index 554900bfb..d2095e85b 100644
--- a/client/src/sass/player/settings-menu.scss
+++ b/client/src/sass/player/settings-menu.scss
@@ -19,7 +19,7 @@ $setting-transition-easing: ease-out;
     position: absolute;
     right: .5em;
     bottom: 4em;
-    color: pvar(--embed-foreground-color);
+    color: pvar(--embed-fg);
     opacity: $primary-foreground-opacity;
     margin: 0 auto;
     font-size: $font-size !important;
diff --git a/client/src/standalone/videos/embed.scss b/client/src/standalone/videos/embed.scss
index 6a5d29da8..44082e4a0 100644
--- a/client/src/standalone/videos/embed.scss
+++ b/client/src/standalone/videos/embed.scss
@@ -1,5 +1,6 @@
 @use '_variables' as *;
 @use '_mixins' as *;
+@use '_css-variables' as *;
 @use 'video.js/dist/video-js';
 
 $assets-path: '../../assets/';
@@ -11,9 +12,13 @@ $assets-path: '../../assets/';
 }
 
 body {
-  font-family: $main-fonts;
-  font-weight: $font-regular;
-  color: #000;
+  @include define-css-variables();
+
+  & {
+    font-family: $main-fonts;
+    font-weight: $font-regular;
+    color: #000;
+  }
 }
 
 video {