diff --git a/src/components/Embeds/VideoPlayer.tsx b/src/components/Embeds/VideoPlayer.tsx
index b8caab4..f0f1c4c 100644
--- a/src/components/Embeds/VideoPlayer.tsx
+++ b/src/components/Embeds/VideoPlayer.tsx
@@ -608,7 +608,7 @@ export const VideoPlayer: FC<VideoPlayerProps> = ({
       <ControlsContainer
         sx={{
           position: 'relative',
-          background: 'var(--bg-primary)',
+          background: 'var(--videoplayer-bg)',
           width: '100%',
           flexShrink: 0,
         }}
diff --git a/src/styles/theme-common.ts b/src/styles/theme-common.ts
index cb7ac59..481f82f 100644
--- a/src/styles/theme-common.ts
+++ b/src/styles/theme-common.ts
@@ -95,7 +95,6 @@ const commonThemeOptions = {
       styleOverrides: {
         root: {
           backgroundColor: 'inherit',
-          color: 'inherit',
         },
       },
     },
diff --git a/src/styles/theme-dark.ts b/src/styles/theme-dark.ts
index a4a8a3b..d8937a8 100644
--- a/src/styles/theme-dark.ts
+++ b/src/styles/theme-dark.ts
@@ -61,6 +61,7 @@ export const darkThemeOptions: ThemeOptions = {
           '--background-default': theme.palette.background.default,
           '--background-paper': theme.palette.background.paper,
           '--background-surface': theme.palette.background.surface,
+          '--videoplayer-bg': 'rgba(31, 32, 35, 1)',
         },
 
         '*, *::before, *::after': {
@@ -76,7 +77,6 @@ export const darkThemeOptions: ThemeOptions = {
           padding: 0,
           margin: 0,
           wordBreak: 'break-word',
-          backgroundColor: 'var(--bg-primary)',
         },
         '::-webkit-scrollbar-track': {
           backgroundColor: 'transparent',
diff --git a/src/styles/theme-light.ts b/src/styles/theme-light.ts
index 7fc6a8b..314ad7c 100644
--- a/src/styles/theme-light.ts
+++ b/src/styles/theme-light.ts
@@ -62,6 +62,7 @@ export const lightThemeOptions: ThemeOptions = {
           '--background-default': theme.palette.background.default,
           '--background-paper': theme.palette.background.paper,
           '--background-surface': theme.palette.background.surface,
+          '--videoplayer-bg': 'rgba(31, 32, 35, 1)',
         },
 
         '*, *::before, *::after': {
@@ -77,7 +78,6 @@ export const lightThemeOptions: ThemeOptions = {
           padding: 0,
           margin: 0,
           wordBreak: 'break-word',
-          backgroundColor: 'var(--bg-primary)',
         },
 
         '::-webkit-scrollbar-track': {