diff --git a/templates/userChrome.tera b/templates/userChrome.tera
index 86b1aeb..66b0708 100644
--- a/templates/userChrome.tera
+++ b/templates/userChrome.tera
@@ -11,7 +11,6 @@ whiskers:
 /* Catppuccin {{flavor.identifier | capitalize}} {{accent | capitalize}} userChrome.css*/
 
 @media (prefers-color-scheme: {{ if(cond=flavor.dark, t="dark", f="light") }}) {
-
   :root {
     --zen-colors-primary: #{{ surface0.hex }} !important;
     --zen-primary-color: #{{ palette[accent].hex }} !important;
@@ -70,9 +69,22 @@ whiskers:
     background: #{{ crust.hex }} !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #{{ surface0.hex }} !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #{{ crust.hex }};
       }
     }
diff --git a/themes/Frappe/Blue/userChrome.css b/themes/Frappe/Blue/userChrome.css
index 532f2e6..4ed14b3 100644
--- a/themes/Frappe/Blue/userChrome.css
+++ b/themes/Frappe/Blue/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Frappe Blue userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #414559 !important;
     --zen-primary-color: #8caaee !important;
@@ -60,9 +59,22 @@
     background: #232634 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #414559 !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #232634;
       }
     }
diff --git a/themes/Frappe/Flamingo/userChrome.css b/themes/Frappe/Flamingo/userChrome.css
index c2fe894..0ca5331 100644
--- a/themes/Frappe/Flamingo/userChrome.css
+++ b/themes/Frappe/Flamingo/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Frappe Flamingo userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #414559 !important;
     --zen-primary-color: #eebebe !important;
@@ -60,9 +59,22 @@
     background: #232634 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #414559 !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #232634;
       }
     }
diff --git a/themes/Frappe/Green/userChrome.css b/themes/Frappe/Green/userChrome.css
index 99d3a17..0878a15 100644
--- a/themes/Frappe/Green/userChrome.css
+++ b/themes/Frappe/Green/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Frappe Green userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #414559 !important;
     --zen-primary-color: #a6d189 !important;
@@ -60,9 +59,22 @@
     background: #232634 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #414559 !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #232634;
       }
     }
diff --git a/themes/Frappe/Lavender/userChrome.css b/themes/Frappe/Lavender/userChrome.css
index 87e2524..7249d0b 100644
--- a/themes/Frappe/Lavender/userChrome.css
+++ b/themes/Frappe/Lavender/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Frappe Lavender userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #414559 !important;
     --zen-primary-color: #babbf1 !important;
@@ -60,9 +59,22 @@
     background: #232634 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #414559 !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #232634;
       }
     }
diff --git a/themes/Frappe/Maroon/userChrome.css b/themes/Frappe/Maroon/userChrome.css
index 9af6acb..8a73638 100644
--- a/themes/Frappe/Maroon/userChrome.css
+++ b/themes/Frappe/Maroon/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Frappe Maroon userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #414559 !important;
     --zen-primary-color: #ea999c !important;
@@ -60,9 +59,22 @@
     background: #232634 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #414559 !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #232634;
       }
     }
diff --git a/themes/Frappe/Mauve/userChrome.css b/themes/Frappe/Mauve/userChrome.css
index b8295af..d6d85fd 100644
--- a/themes/Frappe/Mauve/userChrome.css
+++ b/themes/Frappe/Mauve/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Frappe Mauve userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #414559 !important;
     --zen-primary-color: #ca9ee6 !important;
@@ -60,9 +59,22 @@
     background: #232634 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #414559 !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #232634;
       }
     }
diff --git a/themes/Frappe/Peach/userChrome.css b/themes/Frappe/Peach/userChrome.css
index 222573c..31ed62d 100644
--- a/themes/Frappe/Peach/userChrome.css
+++ b/themes/Frappe/Peach/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Frappe Peach userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #414559 !important;
     --zen-primary-color: #ef9f76 !important;
@@ -60,9 +59,22 @@
     background: #232634 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #414559 !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #232634;
       }
     }
diff --git a/themes/Frappe/Pink/userChrome.css b/themes/Frappe/Pink/userChrome.css
index a4f372c..5aaec44 100644
--- a/themes/Frappe/Pink/userChrome.css
+++ b/themes/Frappe/Pink/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Frappe Pink userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #414559 !important;
     --zen-primary-color: #f4b8e4 !important;
@@ -60,9 +59,22 @@
     background: #232634 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #414559 !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #232634;
       }
     }
diff --git a/themes/Frappe/Red/userChrome.css b/themes/Frappe/Red/userChrome.css
index eab1738..b51e79c 100644
--- a/themes/Frappe/Red/userChrome.css
+++ b/themes/Frappe/Red/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Frappe Red userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #414559 !important;
     --zen-primary-color: #e78284 !important;
@@ -60,9 +59,22 @@
     background: #232634 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #414559 !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #232634;
       }
     }
diff --git a/themes/Frappe/Rosewater/userChrome.css b/themes/Frappe/Rosewater/userChrome.css
index 6c0c54e..1dca0e2 100644
--- a/themes/Frappe/Rosewater/userChrome.css
+++ b/themes/Frappe/Rosewater/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Frappe Rosewater userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #414559 !important;
     --zen-primary-color: #f2d5cf !important;
@@ -60,9 +59,22 @@
     background: #232634 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #414559 !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #232634;
       }
     }
diff --git a/themes/Frappe/Sapphire/userChrome.css b/themes/Frappe/Sapphire/userChrome.css
index 663f900..6001097 100644
--- a/themes/Frappe/Sapphire/userChrome.css
+++ b/themes/Frappe/Sapphire/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Frappe Sapphire userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #414559 !important;
     --zen-primary-color: #85c1dc !important;
@@ -60,9 +59,22 @@
     background: #232634 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #414559 !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #232634;
       }
     }
diff --git a/themes/Frappe/Sky/userChrome.css b/themes/Frappe/Sky/userChrome.css
index 49bb89d..726faa7 100644
--- a/themes/Frappe/Sky/userChrome.css
+++ b/themes/Frappe/Sky/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Frappe Sky userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #414559 !important;
     --zen-primary-color: #99d1db !important;
@@ -60,9 +59,22 @@
     background: #232634 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #414559 !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #232634;
       }
     }
diff --git a/themes/Frappe/Teal/userChrome.css b/themes/Frappe/Teal/userChrome.css
index 06c5e47..11759b6 100644
--- a/themes/Frappe/Teal/userChrome.css
+++ b/themes/Frappe/Teal/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Frappe Teal userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #414559 !important;
     --zen-primary-color: #81c8be !important;
@@ -60,9 +59,22 @@
     background: #232634 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #414559 !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #232634;
       }
     }
diff --git a/themes/Frappe/Yellow/userChrome.css b/themes/Frappe/Yellow/userChrome.css
index f49f83e..9484021 100644
--- a/themes/Frappe/Yellow/userChrome.css
+++ b/themes/Frappe/Yellow/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Frappe Yellow userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #414559 !important;
     --zen-primary-color: #e5c890 !important;
@@ -60,9 +59,22 @@
     background: #232634 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #414559 !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #232634;
       }
     }
diff --git a/themes/Latte/Blue/userChrome.css b/themes/Latte/Blue/userChrome.css
index 5a8d861..45ce312 100644
--- a/themes/Latte/Blue/userChrome.css
+++ b/themes/Latte/Blue/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Latte Blue userChrome.css*/
 
 @media (prefers-color-scheme: light) {
-
   :root {
     --zen-colors-primary: #ccd0da !important;
     --zen-primary-color: #1e66f5 !important;
@@ -60,9 +59,22 @@
     background: #dce0e8 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #ccd0da !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #dce0e8;
       }
     }
diff --git a/themes/Latte/Flamingo/userChrome.css b/themes/Latte/Flamingo/userChrome.css
index aff617f..122b094 100644
--- a/themes/Latte/Flamingo/userChrome.css
+++ b/themes/Latte/Flamingo/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Latte Flamingo userChrome.css*/
 
 @media (prefers-color-scheme: light) {
-
   :root {
     --zen-colors-primary: #ccd0da !important;
     --zen-primary-color: #dd7878 !important;
@@ -60,9 +59,22 @@
     background: #dce0e8 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #ccd0da !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #dce0e8;
       }
     }
diff --git a/themes/Latte/Green/userChrome.css b/themes/Latte/Green/userChrome.css
index ad2e7ad..147346f 100644
--- a/themes/Latte/Green/userChrome.css
+++ b/themes/Latte/Green/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Latte Green userChrome.css*/
 
 @media (prefers-color-scheme: light) {
-
   :root {
     --zen-colors-primary: #ccd0da !important;
     --zen-primary-color: #40a02b !important;
@@ -60,9 +59,22 @@
     background: #dce0e8 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #ccd0da !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #dce0e8;
       }
     }
diff --git a/themes/Latte/Lavender/userChrome.css b/themes/Latte/Lavender/userChrome.css
index 3a89410..18d0e91 100644
--- a/themes/Latte/Lavender/userChrome.css
+++ b/themes/Latte/Lavender/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Latte Lavender userChrome.css*/
 
 @media (prefers-color-scheme: light) {
-
   :root {
     --zen-colors-primary: #ccd0da !important;
     --zen-primary-color: #7287fd !important;
@@ -60,9 +59,22 @@
     background: #dce0e8 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #ccd0da !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #dce0e8;
       }
     }
diff --git a/themes/Latte/Maroon/userChrome.css b/themes/Latte/Maroon/userChrome.css
index 4cc854c..08c280c 100644
--- a/themes/Latte/Maroon/userChrome.css
+++ b/themes/Latte/Maroon/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Latte Maroon userChrome.css*/
 
 @media (prefers-color-scheme: light) {
-
   :root {
     --zen-colors-primary: #ccd0da !important;
     --zen-primary-color: #e64553 !important;
@@ -60,9 +59,22 @@
     background: #dce0e8 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #ccd0da !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #dce0e8;
       }
     }
diff --git a/themes/Latte/Mauve/userChrome.css b/themes/Latte/Mauve/userChrome.css
index f4120fc..70ddc3a 100644
--- a/themes/Latte/Mauve/userChrome.css
+++ b/themes/Latte/Mauve/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Latte Mauve userChrome.css*/
 
 @media (prefers-color-scheme: light) {
-
   :root {
     --zen-colors-primary: #ccd0da !important;
     --zen-primary-color: #8839ef !important;
@@ -60,9 +59,22 @@
     background: #dce0e8 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #ccd0da !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #dce0e8;
       }
     }
diff --git a/themes/Latte/Peach/userChrome.css b/themes/Latte/Peach/userChrome.css
index f8f7b01..db4265d 100644
--- a/themes/Latte/Peach/userChrome.css
+++ b/themes/Latte/Peach/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Latte Peach userChrome.css*/
 
 @media (prefers-color-scheme: light) {
-
   :root {
     --zen-colors-primary: #ccd0da !important;
     --zen-primary-color: #fe640b !important;
@@ -60,9 +59,22 @@
     background: #dce0e8 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #ccd0da !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #dce0e8;
       }
     }
diff --git a/themes/Latte/Pink/userChrome.css b/themes/Latte/Pink/userChrome.css
index 43128f6..6bd34b2 100644
--- a/themes/Latte/Pink/userChrome.css
+++ b/themes/Latte/Pink/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Latte Pink userChrome.css*/
 
 @media (prefers-color-scheme: light) {
-
   :root {
     --zen-colors-primary: #ccd0da !important;
     --zen-primary-color: #ea76cb !important;
@@ -60,9 +59,22 @@
     background: #dce0e8 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #ccd0da !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #dce0e8;
       }
     }
diff --git a/themes/Latte/Red/userChrome.css b/themes/Latte/Red/userChrome.css
index de8358b..a2d7352 100644
--- a/themes/Latte/Red/userChrome.css
+++ b/themes/Latte/Red/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Latte Red userChrome.css*/
 
 @media (prefers-color-scheme: light) {
-
   :root {
     --zen-colors-primary: #ccd0da !important;
     --zen-primary-color: #d20f39 !important;
@@ -60,9 +59,22 @@
     background: #dce0e8 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #ccd0da !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #dce0e8;
       }
     }
diff --git a/themes/Latte/Rosewater/userChrome.css b/themes/Latte/Rosewater/userChrome.css
index 128e444..9858f43 100644
--- a/themes/Latte/Rosewater/userChrome.css
+++ b/themes/Latte/Rosewater/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Latte Rosewater userChrome.css*/
 
 @media (prefers-color-scheme: light) {
-
   :root {
     --zen-colors-primary: #ccd0da !important;
     --zen-primary-color: #dc8a78 !important;
@@ -60,9 +59,22 @@
     background: #dce0e8 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #ccd0da !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #dce0e8;
       }
     }
diff --git a/themes/Latte/Sapphire/userChrome.css b/themes/Latte/Sapphire/userChrome.css
index fcf11c4..9b51361 100644
--- a/themes/Latte/Sapphire/userChrome.css
+++ b/themes/Latte/Sapphire/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Latte Sapphire userChrome.css*/
 
 @media (prefers-color-scheme: light) {
-
   :root {
     --zen-colors-primary: #ccd0da !important;
     --zen-primary-color: #209fb5 !important;
@@ -60,9 +59,22 @@
     background: #dce0e8 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #ccd0da !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #dce0e8;
       }
     }
diff --git a/themes/Latte/Sky/userChrome.css b/themes/Latte/Sky/userChrome.css
index 9fa141d..5d70826 100644
--- a/themes/Latte/Sky/userChrome.css
+++ b/themes/Latte/Sky/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Latte Sky userChrome.css*/
 
 @media (prefers-color-scheme: light) {
-
   :root {
     --zen-colors-primary: #ccd0da !important;
     --zen-primary-color: #04a5e5 !important;
@@ -60,9 +59,22 @@
     background: #dce0e8 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #ccd0da !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #dce0e8;
       }
     }
diff --git a/themes/Latte/Teal/userChrome.css b/themes/Latte/Teal/userChrome.css
index 6b97945..7d03877 100644
--- a/themes/Latte/Teal/userChrome.css
+++ b/themes/Latte/Teal/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Latte Teal userChrome.css*/
 
 @media (prefers-color-scheme: light) {
-
   :root {
     --zen-colors-primary: #ccd0da !important;
     --zen-primary-color: #179299 !important;
@@ -60,9 +59,22 @@
     background: #dce0e8 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #ccd0da !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #dce0e8;
       }
     }
diff --git a/themes/Latte/Yellow/userChrome.css b/themes/Latte/Yellow/userChrome.css
index 10424f9..bc02afb 100644
--- a/themes/Latte/Yellow/userChrome.css
+++ b/themes/Latte/Yellow/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Latte Yellow userChrome.css*/
 
 @media (prefers-color-scheme: light) {
-
   :root {
     --zen-colors-primary: #ccd0da !important;
     --zen-primary-color: #df8e1d !important;
@@ -60,9 +59,22 @@
     background: #dce0e8 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #ccd0da !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #dce0e8;
       }
     }
diff --git a/themes/Macchiato/Blue/userChrome.css b/themes/Macchiato/Blue/userChrome.css
index 854612d..5f7075c 100644
--- a/themes/Macchiato/Blue/userChrome.css
+++ b/themes/Macchiato/Blue/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Macchiato Blue userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #363a4f !important;
     --zen-primary-color: #8aadf4 !important;
@@ -60,9 +59,22 @@
     background: #181926 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #363a4f !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #181926;
       }
     }
diff --git a/themes/Macchiato/Flamingo/userChrome.css b/themes/Macchiato/Flamingo/userChrome.css
index 51b6025..0cc375c 100644
--- a/themes/Macchiato/Flamingo/userChrome.css
+++ b/themes/Macchiato/Flamingo/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Macchiato Flamingo userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #363a4f !important;
     --zen-primary-color: #f0c6c6 !important;
@@ -60,9 +59,22 @@
     background: #181926 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #363a4f !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #181926;
       }
     }
diff --git a/themes/Macchiato/Green/userChrome.css b/themes/Macchiato/Green/userChrome.css
index c870312..d975c1b 100644
--- a/themes/Macchiato/Green/userChrome.css
+++ b/themes/Macchiato/Green/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Macchiato Green userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #363a4f !important;
     --zen-primary-color: #a6da95 !important;
@@ -60,9 +59,22 @@
     background: #181926 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #363a4f !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #181926;
       }
     }
diff --git a/themes/Macchiato/Lavender/userChrome.css b/themes/Macchiato/Lavender/userChrome.css
index 22137bb..31a5bd3 100644
--- a/themes/Macchiato/Lavender/userChrome.css
+++ b/themes/Macchiato/Lavender/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Macchiato Lavender userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #363a4f !important;
     --zen-primary-color: #b7bdf8 !important;
@@ -60,9 +59,22 @@
     background: #181926 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #363a4f !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #181926;
       }
     }
diff --git a/themes/Macchiato/Maroon/userChrome.css b/themes/Macchiato/Maroon/userChrome.css
index e1b6e4e..5dc4940 100644
--- a/themes/Macchiato/Maroon/userChrome.css
+++ b/themes/Macchiato/Maroon/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Macchiato Maroon userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #363a4f !important;
     --zen-primary-color: #ee99a0 !important;
@@ -60,9 +59,22 @@
     background: #181926 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #363a4f !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #181926;
       }
     }
diff --git a/themes/Macchiato/Mauve/userChrome.css b/themes/Macchiato/Mauve/userChrome.css
index 7420424..70958a1 100644
--- a/themes/Macchiato/Mauve/userChrome.css
+++ b/themes/Macchiato/Mauve/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Macchiato Mauve userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #363a4f !important;
     --zen-primary-color: #c6a0f6 !important;
@@ -60,9 +59,22 @@
     background: #181926 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #363a4f !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #181926;
       }
     }
diff --git a/themes/Macchiato/Peach/userChrome.css b/themes/Macchiato/Peach/userChrome.css
index 91e78b2..a3ae3c8 100644
--- a/themes/Macchiato/Peach/userChrome.css
+++ b/themes/Macchiato/Peach/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Macchiato Peach userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #363a4f !important;
     --zen-primary-color: #f5a97f !important;
@@ -60,9 +59,22 @@
     background: #181926 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #363a4f !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #181926;
       }
     }
diff --git a/themes/Macchiato/Pink/userChrome.css b/themes/Macchiato/Pink/userChrome.css
index 6449a97..b1f070d 100644
--- a/themes/Macchiato/Pink/userChrome.css
+++ b/themes/Macchiato/Pink/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Macchiato Pink userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #363a4f !important;
     --zen-primary-color: #f5bde6 !important;
@@ -60,9 +59,22 @@
     background: #181926 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #363a4f !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #181926;
       }
     }
diff --git a/themes/Macchiato/Red/userChrome.css b/themes/Macchiato/Red/userChrome.css
index eb8c896..154fa2f 100644
--- a/themes/Macchiato/Red/userChrome.css
+++ b/themes/Macchiato/Red/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Macchiato Red userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #363a4f !important;
     --zen-primary-color: #ed8796 !important;
@@ -60,9 +59,22 @@
     background: #181926 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #363a4f !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #181926;
       }
     }
diff --git a/themes/Macchiato/Rosewater/userChrome.css b/themes/Macchiato/Rosewater/userChrome.css
index 6126534..1086248 100644
--- a/themes/Macchiato/Rosewater/userChrome.css
+++ b/themes/Macchiato/Rosewater/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Macchiato Rosewater userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #363a4f !important;
     --zen-primary-color: #f4dbd6 !important;
@@ -60,9 +59,22 @@
     background: #181926 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #363a4f !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #181926;
       }
     }
diff --git a/themes/Macchiato/Sapphire/userChrome.css b/themes/Macchiato/Sapphire/userChrome.css
index efcd862..4a66023 100644
--- a/themes/Macchiato/Sapphire/userChrome.css
+++ b/themes/Macchiato/Sapphire/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Macchiato Sapphire userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #363a4f !important;
     --zen-primary-color: #7dc4e4 !important;
@@ -60,9 +59,22 @@
     background: #181926 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #363a4f !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #181926;
       }
     }
diff --git a/themes/Macchiato/Sky/userChrome.css b/themes/Macchiato/Sky/userChrome.css
index b0ff575..45f66f3 100644
--- a/themes/Macchiato/Sky/userChrome.css
+++ b/themes/Macchiato/Sky/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Macchiato Sky userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #363a4f !important;
     --zen-primary-color: #91d7e3 !important;
@@ -60,9 +59,22 @@
     background: #181926 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #363a4f !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #181926;
       }
     }
diff --git a/themes/Macchiato/Teal/userChrome.css b/themes/Macchiato/Teal/userChrome.css
index 7705bde..7e18dc5 100644
--- a/themes/Macchiato/Teal/userChrome.css
+++ b/themes/Macchiato/Teal/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Macchiato Teal userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #363a4f !important;
     --zen-primary-color: #8bd5ca !important;
@@ -60,9 +59,22 @@
     background: #181926 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #363a4f !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #181926;
       }
     }
diff --git a/themes/Macchiato/Yellow/userChrome.css b/themes/Macchiato/Yellow/userChrome.css
index 77197a7..9b9fa03 100644
--- a/themes/Macchiato/Yellow/userChrome.css
+++ b/themes/Macchiato/Yellow/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Macchiato Yellow userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #363a4f !important;
     --zen-primary-color: #eed49f !important;
@@ -60,9 +59,22 @@
     background: #181926 !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #363a4f !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #181926;
       }
     }
diff --git a/themes/Mocha/Blue/userChrome.css b/themes/Mocha/Blue/userChrome.css
index c387c36..90caae0 100644
--- a/themes/Mocha/Blue/userChrome.css
+++ b/themes/Mocha/Blue/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Mocha Blue userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #313244 !important;
     --zen-primary-color: #89b4fa !important;
@@ -60,9 +59,22 @@
     background: #11111b !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #313244 !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #11111b;
       }
     }
diff --git a/themes/Mocha/Flamingo/userChrome.css b/themes/Mocha/Flamingo/userChrome.css
index f4cae92..84b0cdf 100644
--- a/themes/Mocha/Flamingo/userChrome.css
+++ b/themes/Mocha/Flamingo/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Mocha Flamingo userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #313244 !important;
     --zen-primary-color: #f2cdcd !important;
@@ -60,9 +59,22 @@
     background: #11111b !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #313244 !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #11111b;
       }
     }
diff --git a/themes/Mocha/Green/userChrome.css b/themes/Mocha/Green/userChrome.css
index 1b57c03..ec2e4ad 100644
--- a/themes/Mocha/Green/userChrome.css
+++ b/themes/Mocha/Green/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Mocha Green userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #313244 !important;
     --zen-primary-color: #a6e3a1 !important;
@@ -60,9 +59,22 @@
     background: #11111b !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #313244 !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #11111b;
       }
     }
diff --git a/themes/Mocha/Lavender/userChrome.css b/themes/Mocha/Lavender/userChrome.css
index 1018e50..6a2138a 100644
--- a/themes/Mocha/Lavender/userChrome.css
+++ b/themes/Mocha/Lavender/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Mocha Lavender userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #313244 !important;
     --zen-primary-color: #b4befe !important;
@@ -60,9 +59,22 @@
     background: #11111b !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #313244 !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #11111b;
       }
     }
diff --git a/themes/Mocha/Maroon/userChrome.css b/themes/Mocha/Maroon/userChrome.css
index 5a4b0ca..6d0db96 100644
--- a/themes/Mocha/Maroon/userChrome.css
+++ b/themes/Mocha/Maroon/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Mocha Maroon userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #313244 !important;
     --zen-primary-color: #eba0ac !important;
@@ -60,9 +59,22 @@
     background: #11111b !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #313244 !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #11111b;
       }
     }
diff --git a/themes/Mocha/Mauve/userChrome.css b/themes/Mocha/Mauve/userChrome.css
index 33972de..b38dd77 100644
--- a/themes/Mocha/Mauve/userChrome.css
+++ b/themes/Mocha/Mauve/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Mocha Mauve userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #313244 !important;
     --zen-primary-color: #cba6f7 !important;
@@ -60,9 +59,22 @@
     background: #11111b !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #313244 !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #11111b;
       }
     }
diff --git a/themes/Mocha/Peach/userChrome.css b/themes/Mocha/Peach/userChrome.css
index ec687f3..ca78eba 100644
--- a/themes/Mocha/Peach/userChrome.css
+++ b/themes/Mocha/Peach/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Mocha Peach userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #313244 !important;
     --zen-primary-color: #fab387 !important;
@@ -60,9 +59,22 @@
     background: #11111b !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #313244 !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #11111b;
       }
     }
diff --git a/themes/Mocha/Pink/userChrome.css b/themes/Mocha/Pink/userChrome.css
index 40e3e95..5907dba 100644
--- a/themes/Mocha/Pink/userChrome.css
+++ b/themes/Mocha/Pink/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Mocha Pink userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #313244 !important;
     --zen-primary-color: #f5c2e7 !important;
@@ -60,9 +59,22 @@
     background: #11111b !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #313244 !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #11111b;
       }
     }
diff --git a/themes/Mocha/Red/userChrome.css b/themes/Mocha/Red/userChrome.css
index c6954d0..4e2a563 100644
--- a/themes/Mocha/Red/userChrome.css
+++ b/themes/Mocha/Red/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Mocha Red userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #313244 !important;
     --zen-primary-color: #f38ba8 !important;
@@ -60,9 +59,22 @@
     background: #11111b !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #313244 !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #11111b;
       }
     }
diff --git a/themes/Mocha/Rosewater/userChrome.css b/themes/Mocha/Rosewater/userChrome.css
index 1901d96..e8fd01d 100644
--- a/themes/Mocha/Rosewater/userChrome.css
+++ b/themes/Mocha/Rosewater/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Mocha Rosewater userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #313244 !important;
     --zen-primary-color: #f5e0dc !important;
@@ -60,9 +59,22 @@
     background: #11111b !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #313244 !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #11111b;
       }
     }
diff --git a/themes/Mocha/Sapphire/userChrome.css b/themes/Mocha/Sapphire/userChrome.css
index ef942e8..f44fdd9 100644
--- a/themes/Mocha/Sapphire/userChrome.css
+++ b/themes/Mocha/Sapphire/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Mocha Sapphire userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #313244 !important;
     --zen-primary-color: #74c7ec !important;
@@ -60,9 +59,22 @@
     background: #11111b !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #313244 !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #11111b;
       }
     }
diff --git a/themes/Mocha/Sky/userChrome.css b/themes/Mocha/Sky/userChrome.css
index e075b87..a8e3b8b 100644
--- a/themes/Mocha/Sky/userChrome.css
+++ b/themes/Mocha/Sky/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Mocha Sky userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #313244 !important;
     --zen-primary-color: #89dceb !important;
@@ -60,9 +59,22 @@
     background: #11111b !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #313244 !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #11111b;
       }
     }
diff --git a/themes/Mocha/Teal/userChrome.css b/themes/Mocha/Teal/userChrome.css
index db4c090..8e6a6a6 100644
--- a/themes/Mocha/Teal/userChrome.css
+++ b/themes/Mocha/Teal/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Mocha Teal userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #313244 !important;
     --zen-primary-color: #94e2d5 !important;
@@ -60,9 +59,22 @@
     background: #11111b !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #313244 !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #11111b;
       }
     }
diff --git a/themes/Mocha/Yellow/userChrome.css b/themes/Mocha/Yellow/userChrome.css
index 8222a18..556c0a0 100644
--- a/themes/Mocha/Yellow/userChrome.css
+++ b/themes/Mocha/Yellow/userChrome.css
@@ -1,7 +1,6 @@
 /* Catppuccin Mocha Yellow userChrome.css*/
 
 @media (prefers-color-scheme: dark) {
-
   :root {
     --zen-colors-primary: #313244 !important;
     --zen-primary-color: #f9e2af !important;
@@ -60,9 +59,22 @@
     background: #11111b !important;
   }
 
+  #zen-media-controls-toolbar {
+    & #zen-media-progress-bar {
+      &::-moz-range-track {
+        background: #313244 !important;
+      }
+    }
+  }
+
   toolbar .toolbarbutton-1 {
     &:not([disabled]) {
-      &:is([open], [checked]) > :is(.toolbarbutton-icon, .toolbarbutton-text, .toolbarbutton-badge-stack){
+      &:is([open], [checked])
+        > :is(
+          .toolbarbutton-icon,
+          .toolbarbutton-text,
+          .toolbarbutton-badge-stack
+        ) {
         fill: #11111b;
       }
     }