diff --git a/app/styles/components/video-player.scss b/app/styles/components/video-player.scss
index aff5bb19f..ada5b26f5 100644
--- a/app/styles/components/video-player.scss
+++ b/app/styles/components/video-player.scss
@@ -291,6 +291,7 @@
     }
 
     &__current {
+      @apply bg-accent-500;
       display: block;
       position: absolute;
       height: 4px;
@@ -298,10 +299,10 @@
       left: 0;
       top: 50%;
       transform: translate(0, -50%);
-      background: var(--accent-color);
     }
 
     &__handle {
+      @apply bg-accent-500;
       position: absolute;
       z-index: 3;
       border-radius: 50%;
@@ -311,7 +312,6 @@
       left: 0;
       margin-left: -6px;
       transform: translate(0, -50%);
-      background: var(--accent-color);
       box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
       opacity: 0;
 
@@ -365,7 +365,10 @@
       height: 4px;
       border-radius: 4px;
       top: 14px;
-      background: var(--accent-color);
+    }
+
+    &__progress {
+      @apply bg-accent-500;
     }
 
     &__buffer {
@@ -373,6 +376,7 @@
     }
 
     &__handle {
+      @apply bg-accent-500;
       position: absolute;
       z-index: 3;
       opacity: 0;
@@ -381,7 +385,6 @@
       height: 12px;
       top: 10px;
       margin-left: -6px;
-      background: var(--accent-color);
       box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
 
       .no-reduce-motion & {