hotfix dark

src/app/app-routing.module.ts

@@ -38,7 +38,6 @@ const routes: Routes = [
   {
     path: PathUrl.SETTINGS,
     loadChildren: () => import('./settings/settings.module').then((m) => m.SettingsModule),
-    canActivate: [AuthGuard],
   },
   { path: '**', component: NotFoundComponent },
 ];

src/app/auth/auth.component.scss

@@ -21,11 +21,9 @@
     gap: 15px;
 
     border: 1px solid $border-color;
-    background-color: $main-color;
     border-radius: 6px;
 
     h3 {
-      color: $first-color;
       margin: 0;
     }
 

src/app/board/board/board.component.scss

@@ -101,13 +101,11 @@
 
 .space {
   min-height: 100%;
-  background-color: $main-color;
   display: flex;
 
   &__main {
     width: 100%;
     min-height: 100%;
-    background-color: $main-color;
     position: relative;
 
     &.disabled {

src/app/core/components/footer/footer.component.html

@@ -1,4 +1,4 @@
-<footer class="footer">
+<footer class="footer mat-app-background">
   <a href="https://rs.school/angular/" target="_blank" class="footer__img-link">
     <img src="./assets/img/rs_school_js.svg" class="footer__img" alt="logo rs school" />
   </a>

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

@@ -6,12 +6,10 @@
   padding: 0 $main-padding;
   justify-content: space-between;
   align-items: center;
-  background-color: $main-color;
   border-top: 1px solid $border-color;
 
   &__text {
     margin: 0;
-    color: $second-color;
   }
 
   &__img-link {
@@ -36,8 +34,6 @@
     align-items: center;
     gap: 4px;
 
-    color: $second-color !important;
-
     &:hover {
       color: $link-color !important;
     }

src/app/profile/profile.component.scss

@@ -19,7 +19,6 @@
     gap: 15px;
 
     border: 1px solid $border-color;
-    background-color: $main-color;
     border-radius: 6px;
 
     .profile-title {

src/app/search/search.component.scss

@@ -18,7 +18,6 @@
     gap: 30px;
 
     border: 1px solid $border-color;
-    background-color: $main-color;
     border-radius: 6px;
   }
 

src/app/space/components/left-aside/left-aside.component.scss

@@ -5,7 +5,6 @@
   position: sticky;
   height: calc(100vh - #{$footer-height});
   overflow-y: auto;
-  background-color: $main-color;
   border-right: $header-border;
 
   &_open {

src/app/space/components/list/list.component.scss

@@ -2,7 +2,6 @@
 
 .space-list {
   min-height: 100%;
-  background-color: $main-color;
   padding: 0 $space-header-padding;
 
   &__content {

src/app/space/pages/space/space.component.scss

@@ -2,7 +2,6 @@
 
 .space {
   min-height: 100%;
-  background-color: $main-color;
   display: flex;
   &__main {
     width: 100%;

src/styles.scss

@@ -97,3 +97,91 @@ input {
 .mr-8 {
   margin-right: 8px;
 }
+
+.ant-menu {
+  background-color: $bg-light !important;
+  color: $light-color !important;
+}
+
+.darkMode {
+  .footer__link,
+  .header-nav__link,
+  .welcome__link,
+  .phase__link {
+    color: $link-color-dark !important;
+
+    &:hover {
+      color: $main-color !important;
+    }
+  }
+
+  .ant-card {
+    background: $bg-dark !important;
+    color: $main-color !important;
+  }
+
+  .ant-card-head {
+    background: $bg-dark !important;
+    color: $main-color !important;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: $main-color !important;
+  }
+
+  .ant-collapse > .ant-collapse-item > .ant-collapse-header {
+    background: $bg-dark !important;
+    color: $main-color !important;
+  }
+
+  .ant-collapse-content {
+    background: $bg-dark !important;
+    color: $main-color !important;
+  }
+
+  .search-input.error {
+    background-color: transparent !important;
+  }
+
+  .ant-tabs {
+    color: $main-color !important;
+  }
+
+  .welcome__slogan {
+    color: $main-color !important;
+  }
+
+  .welcome__text {
+    color: $main-color !important;
+
+    a {
+      color: $link-color-dark !important;
+
+      &:hover {
+        color: $main-color !important;
+      }
+    }
+  }
+
+  .welcome__title {
+    border-right: $main-color solid 2px !important;
+  }
+
+  .ant-menu {
+    background: $bg-dark !important;
+    color: $main-color !important;
+  }
+
+  .space-aside__add-button {
+    color: $link-color-dark !important;
+  }
+
+  .bar_right {
+    color: $link-color-dark !important;
+  }
+}

src/styles/_variables.scss

@@ -7,14 +7,18 @@ $second-color: #2c2c2cff;
 $fourth-color: #eeeeeeff;
 $error-color: #f95959;
 $bg-loader: #0002;
+$bg-dark: #303030;
+$bg-light: #fafafa;
 $task-color: #07a092;
+$light-color: #000000de;
 
 $border-color: #dfdfdfff;
 
 $icont-first-color: #07a092ff;
 $icont-second-color: #fff;
 
 $link-color: #3f51b5;
+$link-color-dark: #89d5ff;
 
 //
 // sizes