feat: restore dark theme

Author: navix

angular.json

@@ -77,6 +77,7 @@
             ],
             "styles": [
               "projects/ui/src/themes/main.css",
+              "projects/ui/src/themes/dark.css",
               "projects/ui-docs/src/styles/main.scss",
               "projects/ui-docs/src/styles/theme.scss",
               "projects/ui-docs/src/styles/hljs-default.scss"

projects/ui-docs/src/app/layout/layout.module.ts

@@ -1,8 +1,9 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
 import { KitIconsModule, KitModalModule, KitMqModule, KitOverlayModule } from '@ngx-kit/core';
-import { UiButtonModule, UiLoadingBarModule, UiScrollModule, UiVerticalMenuModule } from 'ui';
+import { UiButtonModule, UiLoadingBarModule, UiScrollModule, UiToggleModule, UiVerticalMenuModule } from 'ui';
 import { HeaderComponent } from './header/header.component';
 import { LayoutComponent } from './layout/layout.component';
 import { NavComponent } from './nav/nav.component';
@@ -11,10 +12,12 @@ import { NavComponent } from './nav/nav.component';
   imports: [
     CommonModule,
     RouterModule,
+    FormsModule,
     UiButtonModule,
     UiVerticalMenuModule,
     UiScrollModule,
     UiLoadingBarModule,
+    UiToggleModule,
     KitIconsModule,
     KitMqModule,
     KitOverlayModule,

projects/ui-docs/src/app/layout/nav/nav.component.scss

@@ -1,5 +1,6 @@
 :host {
-  background: var(--whiteColor);
+  background: var(--navBgColor);
+  color: var(--navTextColor);
   box-shadow: 2px 2px 16px rgba(0, 0, 0, 0.04);
 }
 
@@ -20,7 +21,7 @@ ul {
     margin: var(--grid) 0 0 0;
     padding: var(--grid);
     font-size: 0.9rem;
-    color: var(--mainColorLight2);
+    color: var(--mainBdColor);
   }
   a {
     display: block;

projects/ui-docs/src/app/module-page/module-page-class-declar/module-page-class-declar.component.scss

@@ -1,4 +0,0 @@
-.name {
-  background: var(--mainColorLight4);
-  padding: calc(var(--grid) * 2);
-}

projects/ui-docs/src/styles/main.scss

@@ -2,17 +2,11 @@
 @import "loader";
 @import "mq";
 
-html {
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-}
-
 body {
   font-family: var(--sansSerif);
   font-size: 16px;
   line-height: 1.35em;
-  color: var(--mainColor);
+  color: var(--mainTextColor);
   display: flex;
   flex-direction: row;
   flex-grow: 1;
@@ -32,7 +26,7 @@ table {
 }
 
 table th {
-  color: var(--mainColorLight3);
+  color: var(--mainTextLightColor);
   padding: 8px 16px;
   text-align: left;
   white-space: nowrap;
@@ -66,12 +60,7 @@ code, pre {
   font-size: 0.85em;
 }
 
-pre {
-  background: #f8f8f8;
-}
-
 code {
-  background-color: #f4f4f4;
   margin: 0;
   padding: 0.2em 0.4em;
 }
@@ -86,9 +75,3 @@ pre {
   padding: 16px;
   overflow: auto;
 }
-
-//@include mq(var(--from): tablet) {
-//  html {
-//    height: 100%;
-//  }
-//}

projects/ui/src/lib/ui-accordion/ui-accordion-content/ui-accordion-content.component.scss

@@ -1,11 +1,11 @@
 :host {
   display: block;
   overflow: hidden;
-  color: var(--mainColorLight3);
+  color: var(--panelTextColor);
 }
 
 .content {
-  border-top: 1px solid var(--mainColorLight4);
+  border-top: 1px solid var(--panelBdColor);
   margin: 0 calc(var(--grid) * 3);
   padding: calc(var(--grid) * 1.5) 0;
 }

projects/ui/src/lib/ui-accordion/ui-accordion-panel/ui-accordion-panel.component.scss

@@ -1,8 +1,10 @@
 :host {
   display: block;
   margin: var(--grid) 0;
+  background: var(--panelBgColor);
   border-radius: var(--borderRadius);
-  border: 1px solid var(--mainColorLight4);
+  border: 1px solid var(--panelBdColor);
+  color: var(--panelTextColor);
   transition: var(--transition);
   &:hover {
     box-shadow: var(--shadow);

projects/ui/src/lib/ui-accordion/ui-accordion-title/ui-accordion-title.component.scss

@@ -1,7 +1,7 @@
 :host {
   background: transparent;
   cursor: pointer;
-  color: var(--mainColor);
+  color: var(--mainTextColor);
   display: block;
   padding: calc(var(--grid) * 1.5) calc(var(--grid) * 3);
   transition-duration: .25s;

projects/ui/src/lib/ui-breadcrumbs/ui-breadcrumbs-item/ui-breadcrumbs-item.component.scss

@@ -1,7 +1,7 @@
 :host {
   background: transparent;
   border: 0;
-  color: var(--mainColorLight3);
+  color: var(--mainTextLightColor);
   cursor: pointer;
   font-size: 1rem;
   padding: 0;
@@ -10,7 +10,7 @@
     color: var(--mainColorLight2);
   }
   &:last-child {
-    color: var(--mainColor);
+    color: var(--mainTextColor);
     cursor: inherit;
   }
 }

projects/ui/src/lib/ui-breadcrumbs/ui-breadcrumbs/ui-breadcrumbs.component.scss

@@ -1,4 +1,4 @@
 .separator {
-  color: var(--mainColor);
+  color: var(--mainTextColor);
   padding: 0 var(--grid);
 }