Use material dark theme colors

src/app/components/shared/footer/footer.component.scss

@@ -3,7 +3,7 @@ footer {
 }
 
 #footer-toolbar {
-  background-color: var(--primary-variant);
+  background-color: var(--surface);
   height: auto;
 
   &:first-child {
@@ -18,7 +18,7 @@ footer {
 .mat-button {
   min-height: 28px;
   font-size: 12px;
-  color: var(--on-primary);
+  color: var(--on-surface);
 }
 
 mat-icon {

src/app/components/shared/header/header.component.scss

 .app-title {
   cursor: pointer;
   margin: 0 auto;
-  color: var(--on-primary);
+  color: var(--on-surface);
 }
 
 mat-toolbar {
-  background-color: var(--primary);
+  background-color: var(--surface);
   position: relative;
 }
 
 .header-icons {
-  color: var(--on-primary);
+  color: var(--on-surface);
 }
 
 .purple {

src/theme/dark-theme/darkTheme.const.ts

 export const dark = {
 
-  '--primary' : '#4db6ac',
-  '--primary-variant': '#80cbc4',
+  '--primary' : '#bb86fc',
+  '--primary-variant': '#3700b3',
 
-  '--secondary': '#3949ab',
+  '--secondary': '#03dac6',
   '--secondary-variant': '#6f74dd',
 
-  '--background': '#424242',
-  '--surface': '#212121',
+  '--background': '#121212',
+  '--surface': '#1e1e1e',
   '--dialog': '#757575',
 
   '--on-primary': '#000000',