diff --git a/projects/common/components/control-bar/control-bar.component.css b/projects/common/components/control-bar/control-bar.component.css
index 12f4a793943e81e2ad5ee9d90b637cf9983c37ec..6f622f688eef48f4aac436c25bd3505e0ef1a37b 100644
--- a/projects/common/components/control-bar/control-bar.component.css
+++ b/projects/common/components/control-bar/control-bar.component.css
@@ -55,14 +55,3 @@
 .hint-border{
   border: 2px #f44336 solid;
 }
-
-/* TODO use material theme color */
-::ng-deep app-control-bar .mat-accent .mat-slider-thumb {
-  background-color: #006064;
-}
-::ng-deep app-control-bar .mat-accent .mat-slider-thumb-label {
-  background-color: #006064;
-}
-::ng-deep app-control-bar .mat-accent .mat-slider-track-fill {
-  background-color: #006064;
-}
diff --git a/projects/editor/src/assets/customTheme.scss b/projects/editor/src/assets/customTheme.scss
index 91109da32b46ea596dcd0b1b3ac70ac89777dc68..2d358324aabd2ce30cfe9c6c5be09f3a6580a368 100644
--- a/projects/editor/src/assets/customTheme.scss
+++ b/projects/editor/src/assets/customTheme.scss
@@ -10,4 +10,5 @@
 
   @include mat.checkbox-color($aspect-theme);
   @include mat.radio-color($aspect-theme);
+  @include mat.slider-color($aspect-theme);
 }
diff --git a/projects/player/src/assets/customTheme.scss b/projects/player/src/assets/customTheme.scss
index adba6eccc95dbc44402fd4a54dd8f28ceaf228fe..3535fcda86f9ef4e1ac82001eae665bd91a8cac5 100644
--- a/projects/player/src/assets/customTheme.scss
+++ b/projects/player/src/assets/customTheme.scss
@@ -9,3 +9,4 @@ $aspect-theme: mat.define-light-theme((
 
 @include mat.checkbox-color($aspect-theme);
 @include mat.radio-color($aspect-theme);
+@include mat.slider-color($aspect-theme);