From 86079a936ef2f32b7013f6953afea958a3028fdd Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Sun, 27 Dec 2020 23:05:52 -0800
Subject: [PATCH] Initial theme SCSS

---
 src-ui/src/styles.scss     |   1 +
 src-ui/src/theme_dark.scss | 232 +++++++++++++++++++++++++++++++++++++
 2 files changed, 233 insertions(+)
 create mode 100644 src-ui/src/theme_dark.scss

diff --git a/src-ui/src/styles.scss b/src-ui/src/styles.scss
index 7e9a9377a..8cf4a93f6 100644
--- a/src-ui/src/styles.scss
+++ b/src-ui/src/styles.scss
@@ -1,4 +1,5 @@
 @import "theme";
+@import "theme_dark";
 @import "node_modules/bootstrap/scss/bootstrap";
 @import "~@ng-select/ng-select/themes/default.theme.css";
 
diff --git a/src-ui/src/theme_dark.scss b/src-ui/src/theme_dark.scss
new file mode 100644
index 000000000..ea7987828
--- /dev/null
+++ b/src-ui/src/theme_dark.scss
@@ -0,0 +1,232 @@
+$bg-dark-mode: #161618;
+$bg-light-dark-mode: #1c1c1f;
+$text-color-dark-mode: #abb2bf;
+$text-color-dark-mode-accent: lighten($text-color-dark-mode, 10%);
+$border-color-dark-mode: #47494f;
+
+* {
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+@mixin dark-mode {
+  background-color: $bg-dark-mode !important;
+  color: $text-color-dark-mode;
+
+  .navbar-brand {
+    color: $text-color-dark-mode;
+  }
+
+  .bg-light {
+    background-color: $bg-light-dark-mode !important;
+
+    a,
+    div {
+      color: $text-color-dark-mode !important;
+    }
+  }
+
+  .border,
+  .border-bottom,
+  .border-left,
+  .border-right {
+    border-color: $border-color-dark-mode !important;
+  }
+
+  .nav-link.active {
+    background-color: $bg-dark-mode;
+    color: $text-color-dark-mode;
+    border-color: $border-color-dark-mode $border-color-dark-mode $bg-dark-mode;
+  }
+
+  .nav-link:hover {
+    border-color: $border-color-dark-mode $border-color-dark-mode $bg-dark-mode;
+  }
+
+  .nav-tabs {
+    border-color: $border-color-dark-mode;
+  }
+
+  .dropdown-menu {
+    background-color: $bg-dark-mode;
+
+    .dropdown-divider {
+      border-color: $border-color-dark-mode;
+    }
+
+    .dropdown-item {
+      color: $text-color-dark-mode;
+
+      &:hover {
+        background-color: $bg-light-dark-mode;
+        color: $text-color-dark-mode;
+      }
+    }
+
+    .dropdown-item.disabled {
+      color: darken($text-color-dark-mode, 20%);
+    }
+  }
+
+  .card {
+    background-color: $bg-light-dark-mode;
+
+    .card-text {
+      color: $text-color-dark-mode;
+    }
+  }
+
+  app-tag .badge {
+    opacity: 0.8;
+    color: $bg-dark-mode !important;
+  }
+
+  .badge-light {
+    background-color: darken($bg-dark-mode, 20%);
+    color: $text-color-dark-mode-accent;
+  }
+
+  .doc-img {
+    background-color: lighten($bg-light-dark-mode, 30%);
+    mix-blend-mode: soft-light;
+  }
+
+  .doc-img-background {
+    background-color: lighten($bg-light-dark-mode, 30%);
+  }
+
+  .doc-img-background-selected {
+    background-color: lighten($bg-light-dark-mode, 35%);
+  }
+
+  .toast {
+    background-color: opacify($bg-light-dark-mode, .85);
+  }
+
+  .toast-header {
+    background-color: opacify($bg-dark-mode, .85);
+  }
+
+  a:hover {
+    color: lighten($primary, 10%);
+  }
+
+  table {
+    background-color: $bg-dark-mode;
+    color: $text-color-dark-mode;
+    border-color: $border-color-dark-mode;
+  }
+
+  .table td,
+  .table th {
+    border-color: $border-color-dark-mode;
+  }
+
+  .table-row-selected {
+    background-color: $bg-light-dark-mode;
+  }
+
+  .close {
+    text-shadow: 0 1px 0 #666;
+  }
+
+  .btn-outline-primary:hover {
+    background-color: darken($primary, 10%);
+    color: $text-color-dark-mode-accent;
+  }
+
+  .btn-outline-secondary {
+    border-color: $border-color-dark-mode;
+    color: $border-color-dark-mode;
+
+    &:hover {
+      background-color: $bg-dark-mode;
+    }
+  }
+
+  .btn-link:hover,
+  .btn-outline-primary:not(:disabled):not(.disabled).active,
+  .btn-outline-primary:not(:disabled):not(.disabled):active,
+  .show > .btn-outline-primary.dropdown-toggle {
+    color: $text-color-dark-mode-accent;
+  }
+
+  .form-control,
+  input,
+  select,
+  textarea {
+    background-color: $bg-dark-mode;
+    color: $text-color-dark-mode;
+    border-color: $border-color-dark-mode;
+
+    &::placeholder {
+      color: $text-color-dark-mode;
+    }
+
+    &:focus {
+      background-color: $bg-light-dark-mode !important;
+      color: darken($text-color-dark-mode, 10%) !important;
+    }
+  }
+
+  .ng-select-container,
+  .ng-select.ng-select-opened > .ng-select-container,
+  .ng-dropdown-panel,
+  .ng-dropdown-panel .ng-dropdown-panel-items .ng-option {
+    background-color: $bg-dark-mode;
+    color: $text-color-dark-mode;
+    border-color: $border-color-dark-mode;
+
+    input:focus {
+      background-color: $bg-dark-mode !important;
+    }
+  }
+
+  .ng-dropdown-panel .ng-dropdown-panel-items .ng-option:hover {
+    background-color: $bg-light-dark-mode;
+  }
+
+  .custom-control-label:before {
+    background-color: $bg-dark-mode;
+    color: $text-color-dark-mode;
+  }
+
+  .custom-control-input:checked ~ .custom-control-label::before {
+    color: $text-color-dark-mode-accent;
+  }
+
+  .input-group-text {
+    color: $text-color-dark-mode;
+    background-color: $bg-light-dark-mode;
+    border-color: $border-color-dark-mode;
+  }
+
+  .list-group-item {
+    color: $text-color-dark-mode;
+    background-color: $bg-light-dark-mode;
+    border-color: $border-color-dark-mode;
+  }
+
+  .page-item.disabled .page-link {
+    background-color: $bg-dark-mode;
+    border-color: $border-color-dark-mode;
+  }
+
+  .list-group-item,
+  .page-link {
+    background-color: $bg-light-dark-mode;
+    border-color: $border-color-dark-mode;
+  }
+
+  .page-item.active .page-link {
+    border-color: $border-color-dark-mode;
+    color: $text-color-dark-mode-accent;
+  }
+}
+
+body.dark-mode {
+  @include dark-mode;
+}
+@media (prefers-color-scheme: dark) {
+  body.dark-mode-preferred {
+    @include dark-mode;
+  }
+}