diff --git a/mediarepo-ui/src/app/app.component-theme.scss b/mediarepo-ui/src/app/app.component-theme.scss
index 1e79cbd..eff2626 100644
--- a/mediarepo-ui/src/app/app.component-theme.scss
+++ b/mediarepo-ui/src/app/app.component-theme.scss
@@ -10,20 +10,6 @@
         background-color: darken(#303030, 5);
         color: white
     }
-    ::ng-deep ::-webkit-scrollbar {
-        width: 15px;
-        height: 15px;
-        background: #272727;
-    }
-
-    ::ng-deep ::-webkit-scrollbar-thumb {
-        background: mat.get-color-from-palette($primary-palette, 'darker');
-        border-radius: 1px;
-    }
-
-    ::ng-deep ::-webkit-scrollbar-thumb:hover {
-        background: mat.get-color-from-palette($primary-palette);
-    }
 
     .warn {
         background-color: mat.get-color-from-palette($warn-palette);
diff --git a/mediarepo-ui/src/styles.scss b/mediarepo-ui/src/styles.scss
index 008bc14..c8730a6 100644
--- a/mediarepo-ui/src/styles.scss
+++ b/mediarepo-ui/src/styles.scss
@@ -18,6 +18,25 @@ $theme: mat.define-dark-theme((
   )
 ));
 
+$color-config: mat.get-color-config($theme);
+$primary-palette: map.get($color-config, 'primary');
+$warn-palette: map.get($color-config, 'warn');
+
+::-webkit-scrollbar {
+    width: 15px;
+    height: 15px;
+    background: #272727;
+}
+
+::-webkit-scrollbar-thumb {
+    background: mat.get-color-from-palette($primary-palette, 'darker');
+    border-radius: 1px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: mat.get-color-from-palette($primary-palette);
+}
+
 @include mat.all-component-themes($theme);
 @include app.theme($theme);
 @include file-card.theme($theme);