details button

frontend/src/app/ntt-gantt/ntt-gantt.component.css

@@ -116,6 +116,32 @@ mat-button-toggle-group {
   }
 }
 
+.detailsButton {
+  display: flex;
+  align-items: center;
+
+  mat-slide-toggle.mat-primary .mat-slide-toggle-thumb {
+    background-color: #ef6c00 !important; /* Orange thumb */
+  }
+
+  mat-slide-toggle.mat-primary .mat-slide-toggle-bar {
+    background-color: rgba(239, 108, 0, 0.5) !important; /* Lighter orange bar */
+  }
+
+  mat-slide-toggle.mat-primary.mat-checked .mat-slide-toggle-thumb {
+    background-color: #ef6c00 !important; /* Orange thumb when checked */
+  }
+
+  mat-slide-toggle.mat-primary.mat-checked .mat-slide-toggle-bar {
+    background-color: #ef6c00 !important; /* Orange bar when checked */
+  }
+
+  mat-slide-toggle.mat-primary.mat-checked .mat-slide-toggle-content {
+    color: #ef6c00 !important; /* Text color */
+  }
+}
+
+
 
 .restartButton {
   background-color: white;

frontend/src/theme.scss

@@ -7,7 +7,7 @@ $my-warn: mat-palette($mat-red, 600);
 
 $my-theme: mat-light-theme($my-primary, $my-accent, $my-warn);
 
-// @include angular-material-theme($my-theme);
+@include angular-material-theme($my-theme);
 
 .dateButton.mat-button {
     background-color: blue !important; /* Use !important as a last resort */