diff --git a/web/components/video/Player.module.scss b/web/components/video/Player.module.scss
index 4f3ab16de..2480e9234 100644
--- a/web/components/video/Player.module.scss
+++ b/web/components/video/Player.module.scss
@@ -1,9 +1,4 @@
 .player {
   height: 80vh;
   width: 100%;
-  background-color: black;
-
-  .vjs-big-play-centered .vjs-big-play-button {
-    z-index: 99999 !important;
-  }
 }
diff --git a/web/components/video/player.scss b/web/components/video/player.scss
new file mode 100644
index 000000000..ad3e93eb8
--- /dev/null
+++ b/web/components/video/player.scss
@@ -0,0 +1,14 @@
+/* Change all text and icon colors in the player. */
+.vjs-owncast.video-js {
+  color: var(--primary-color);
+}
+
+.vjs-owncast .vjs-big-play-button {
+  z-index: 999999;
+  border-color: var(--primary-color) !important;
+  border-radius: var(--theme-rounded-corners) !important;
+}
+
+.vjs-owncast .vjs-control-bar {
+  background-color: var(--theme-background) !important;
+}
diff --git a/web/components/video/player.tsx b/web/components/video/player.tsx
index 8d158f642..a1e3489e4 100644
--- a/web/components/video/player.tsx
+++ b/web/components/video/player.tsx
@@ -52,7 +52,7 @@ export function VideoJS(props: Props) {
   return (
     <div data-vjs-player>
       {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
-      <video ref={videoRef} className={`video-js vjs-big-play-centered ${s.player}`} />
+      <video ref={videoRef} className={`video-js vjs-big-play-centered ${s.player} vjs-owncast`} />
     </div>
   );
 }
diff --git a/web/pages/_app.tsx b/web/pages/_app.tsx
index 44f1ccd1e..85a341e3c 100644
--- a/web/pages/_app.tsx
+++ b/web/pages/_app.tsx
@@ -20,6 +20,8 @@ import '../styles/chat.scss';
 import '../styles/pages.scss';
 import '../styles/offline-notice.scss';
 
+import '../components/video/player.scss';
+
 import { AppProps } from 'next/app';
 import { Router, useRouter } from 'next/router';