style: change colors for dark theme

src/styles.scss

@@ -2,7 +2,7 @@ $material-icons-font-path: '~material-icons/iconfont/';
 /* You can add global styles to this file, and also import other style files */
 @import '~@angular/material/prebuilt-themes/indigo-pink.css';
 @import '~material-icons/iconfont/material-icons.scss';
-@import "~@angular/material/theming";
+@import '~@angular/material/theming';
 @include mat-core();
 @import 'themes/';
 
@@ -17,68 +17,71 @@ html {
     background: #000000;
 }
 
+html,
+body {
+    margin: 0;
+    padding: 0;
 
-html, body {
-  margin: 0;
-  padding: 0;
-
-  height: 100%;
-  font-family: Arial, Helvetica, sans-serif;
+    height: 100%;
+    font-family: Arial, Helvetica, sans-serif;
 }
 
 /* CAN (MUST) BE REMOVED ! Sample Global style */
 .container {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
 
-
-  .title {
-    color: white;
-    margin: 0;
-    padding: 50px 20px;
-  }
-
-  a {
-    color: #fff !important;
-    text-transform: uppercase;
-    text-decoration: none;
-    background: #ed3330;
-    padding: 20px;
-    border-radius: 5px;
-    display: inline-block;
-    border: none;
-    transition: all 0.4s ease 0s;
-
-    &:hover {
-      background: #fff;
-      color: #ed3330 !important;
-      letter-spacing: 1px;
-      -webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
-      -moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
-      box-shadow: 5px 40px -10px rgba(0,0,0,0.57);
-      transition: all 0.4s ease 0s;
+    .title {
+        color: white;
+        margin: 0;
+        padding: 50px 20px;
+    }
+
+    a {
+        color: #fff !important;
+        text-transform: uppercase;
+        text-decoration: none;
+        background: #ed3330;
+        padding: 20px;
+        border-radius: 5px;
+        display: inline-block;
+        border: none;
+        transition: all 0.4s ease 0s;
+
+        &:hover {
+            background: #fff;
+            color: #ed3330 !important;
+            letter-spacing: 1px;
+            -webkit-box-shadow: 0px 5px 40px -10px rgba(0, 0, 0, 0.57);
+            -moz-box-shadow: 0px 5px 40px -10px rgba(0, 0, 0, 0.57);
+            box-shadow: 5px 40px -10px rgba(0, 0, 0, 0.57);
+            transition: all 0.4s ease 0s;
+        }
     }
-  }
 }
 
 .full-width {
-  width: 100%;
+    width: 100%;
 }
 
-.mat-toolbar-row, .mat-toolbar-single-row {
-  height: 54px;
+.mat-toolbar-row,
+.mat-toolbar-single-row {
+    height: 54px;
 }
 
-/* :not(input):not(textarea),
-:not(input):not(textarea)::after,
-:not(input):not(textarea)::before {
-    -webkit-user-select: none;
-    user-select: none;
-    cursor: default;
-} */
-input, button, textarea, :focus {
+input,
+button,
+textarea,
+:focus {
     outline: none;
-}
+}
+
+.dark-theme .mat-expansion-panel,
+.dark-theme .mat-drawer,
+.dark-theme .mat-app-background,
+.dark-theme.mat-app-background {
+    background-color: #1d1d1d;
+}