7 files changed, 22 insertions, 20 deletions
diff --git a/src/sass/components/badges.scss b/src/sass/components/badges.scss
index 3a9a28b5..b0d575bb 100644
--- a/src/sass/components/badges.scss
+++ b/src/sass/components/badges.scss
@@ -3,10 +3,10 @@
 // --------------------------------------------------------------
 
 .plyr__badge {
-    background: $plyr-badge-bg;
+    background: var(--plyr-badge-background, $plyr-badge-background);
     border-radius: 2px;
-    color: $plyr-badge-color;
-    font-size: $plyr-font-size-badge;
+    color: var(--plyr-badge-color, $plyr-badge-color);
+    font-size: var(--plyr-font-size-badge, $plyr-font-size-badge);
     line-height: 1;
     padding: 3px 4px;
 }
diff --git a/src/sass/components/captions.scss b/src/sass/components/captions.scss
index 1cfca92e..85899ef3 100644
--- a/src/sass/components/captions.scss
+++ b/src/sass/components/captions.scss
@@ -10,7 +10,6 @@
 .plyr__captions {
     animation: plyr-fade-in 0.3s ease;
     bottom: 0;
-    color: $plyr-captions-color;
     display: none;
     font-size: $plyr-font-size-captions-small;
     left: 0;
@@ -21,9 +20,12 @@
     width: 100%;
 
     .plyr__caption {
-        background: $plyr-captions-bg;
+        background: $plyr-captions-background;
+        background: var(--plyr-captions-background, $plyr-captions-background);
         border-radius: 2px;
         box-decoration-break: clone;
+        color: $plyr-captions-text-color;
+        color: var(--plyr-captions-text-color, $plyr-captions-text-color);
         line-height: 185%;
         padding: 0.2em 0.5em;
         white-space: pre-wrap;
@@ -56,4 +58,3 @@
 .plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty) ~ .plyr__captions {
     transform: translateY(-($plyr-control-spacing * 4));
 }
-
diff --git a/src/sass/components/control.scss b/src/sass/components/control.scss
index 64390dbd..2940897b 100644
--- a/src/sass/components/control.scss
+++ b/src/sass/components/control.scss
@@ -6,20 +6,21 @@
     background: transparent;
     border: 0;
     border-radius: $plyr-control-radius;
+    border-radius: var(--plyr-control-radius, $plyr-control-radius);
     color: inherit;
     cursor: pointer;
     flex-shrink: 0;
     overflow: visible; // IE11
-    padding: $plyr-control-padding;
+    padding: var(--plyr-control-padding, $plyr-control-padding);
     position: relative;
     transition: all 0.3s ease;
 
     svg {
         display: block;
         fill: currentColor;
-        height: $plyr-control-icon-size;
+        height: var(--plyr-control-icon-size, $plyr-control-icon-size);
         pointer-events: none;
-        width: $plyr-control-icon-size;
+        width: var(--plyr-control-icon-size, $plyr-control-icon-size);
     }
 
     // Default focus
diff --git a/src/sass/components/menus.scss b/src/sass/components/menus.scss
index be354e46..50a47248 100644
--- a/src/sass/components/menus.scss
+++ b/src/sass/components/menus.scss
@@ -24,7 +24,7 @@
     // The actual menu container
     &__container {
         animation: plyr-popup 0.2s ease;
-        background: $plyr-menu-bg;
+        background: $plyr-menu-background;
         border-radius: 4px;
         bottom: 100%;
         box-shadow: $plyr-menu-shadow;
@@ -45,7 +45,7 @@
         // Arrow
         &::after {
             border: 4px solid transparent;
-            border-top-color: $plyr-menu-bg;
+            border-top-color: $plyr-menu-background;
             content: '';
             height: 0;
             position: absolute;
@@ -172,7 +172,7 @@
 
             &[aria-checked='true'] {
                 &::before {
-                    background: $plyr-color-main;
+                    background: var(--plyr-color-main, $plyr-color-main);
                 }
                 &::after {
                     opacity: 1;
diff --git a/src/sass/components/progress.scss b/src/sass/components/progress.scss
index f28bec8c..c15ee911 100644
--- a/src/sass/components/progress.scss
+++ b/src/sass/components/progress.scss
@@ -72,11 +72,11 @@ $plyr-progress-offset: $plyr-range-thumb-height;
     animation: plyr-progress 1s linear infinite;
     background-image: linear-gradient(
         -45deg,
-        $plyr-progress-loading-bg 25%,
+        var(--plyr-progress-loading-background, $plyr-progress-loading-background) 25%,
         transparent 25%,
         transparent 50%,
-        $plyr-progress-loading-bg 50%,
-        $plyr-progress-loading-bg 75%,
+        var(--plyr-progress-loading-background, $plyr-progress-loading-background) 50%,
+        var(--plyr-progress-loading-background, $plyr-progress-loading-background) 75%,
         transparent 75%,
         transparent
     );
@@ -86,9 +86,9 @@ $plyr-progress-offset: $plyr-range-thumb-height;
 }
 
 .plyr--video.plyr--loading .plyr__progress__buffer {
-    background-color: $plyr-video-progress-buffered-bg;
+    background-color: $plyr-video-progress-buffered-background;
 }
 
 .plyr--audio.plyr--loading .plyr__progress__buffer {
-    background-color: $plyr-audio-progress-buffered-bg;
+    background-color: $plyr-audio-progress-buffered-background;
 }
diff --git a/src/sass/components/sliders.scss b/src/sass/components/sliders.scss
index 7b519fc6..7b13348e 100644
--- a/src/sass/components/sliders.scss
+++ b/src/sass/components/sliders.scss
@@ -9,7 +9,7 @@
     border: 0;
     border-radius: ($plyr-range-thumb-height * 2);
     // color is used in JS to populate lower fill for WebKit
-    color: $plyr-range-fill-bg;
+    color: $plyr-range-fill-background;
     display: block;
     height: $plyr-range-max-height;
     margin: 0;
diff --git a/src/sass/components/tooltips.scss b/src/sass/components/tooltips.scss
index 80603bb5..15f11f03 100644
--- a/src/sass/components/tooltips.scss
+++ b/src/sass/components/tooltips.scss
@@ -3,7 +3,7 @@
 // --------------------------------------------------------------
 
 .plyr__tooltip {
-    background: $plyr-tooltip-bg;
+    background: $plyr-tooltip-background;
     border-radius: $plyr-tooltip-radius;
     bottom: 100%;
     box-shadow: $plyr-tooltip-shadow;
@@ -27,7 +27,7 @@
     &::before {
         border-left: $plyr-tooltip-arrow-size solid transparent;
         border-right: $plyr-tooltip-arrow-size solid transparent;
-        border-top: $plyr-tooltip-arrow-size solid $plyr-tooltip-bg;
+        border-top: $plyr-tooltip-arrow-size solid $plyr-tooltip-background;
         bottom: -$plyr-tooltip-arrow-size;
         content: '';
         height: 0;