Add dark theme

src/static/css/theme/dark.css

@@ -1,123 +1,306 @@
-:root{
+:root {
-    --blue: #3f9eff;
+  --green: hsl(120deg, 30%, 50%) !important;
-    --dark1: #1C1C1E;
+  --blue: hsl(235deg, 60%, 60%) !important;
-    --dark2: #232323;
+  --red: hsl(0deg, 60%, 60%) !important;
-    --dark3: #3f3f3f;
+  --magenta: hsl(315deg, 60%, 60%) !important;
 }
 
-a{
+body {
-    color: var(--blue);
+  background: #222222;
+  color: hsl(0deg, 0%, 80%);
 }
 
-body{
+.btn-primary {
-    background-color: var(--dark1);
+  color: hsl(0deg, 0%, 90%) !important;
-    color: #ffffff;
+  border-color: hsl(235deg, 60%, 60%) !important;
+  background: hsl(235deg, 60%, 60%) !important;
+}
+.btn-primary:hover {
+  background-color: hsl(235deg, 60%, 50%) !important;
+  border-color: hsl(235deg, 60%, 50%) !important;
 }
 
-hr{
+.btn-outline-primary {
-    border-top: 1px solid rgb(255 255 255 / 10%);
+  color: hsl(235deg, 60%, 60%) !important;
+  border-color: hsl(235deg, 60%, 60%) !important;
+  background: transparent !important;
 }
-
+.btn-outline-primary:hover, .btn-outline-primary.active {
-/* Color */
+  color: hsl(0deg, 0%, 90%) !important;
-
-.bg-dark{
-    background-color: #232323!important;
 }
-
+.btn-outline-primary.active {
-.text-primary{
+  background-color: hsl(235deg, 60%, 60%) !important;
-    color: var(--blue) !important;
+  border-color: hsl(235deg, 60%, 60%) !important;
 }
-
-/* Form Related */
-
-.form-control{
-    color: #ffffff;
-    background-color: #232323;
-    border: 1px solid #686868;
-}
-
-.form-control:focus {
-    color: #ffffff;
-    background-color: #232323;
-    border-color: #686868;
-    outline: 0;
-    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.50);
-}
-
-.form-control:disabled, .form-control[readonly]{
-    background-color: #525252;
-    opacity: 1;
-    color: #a5a5a5;
-}
-
-.custom-control-label::before{
-    background-color: transparent;
-}
-
-/* Side Bar */
-
-.sidebar{
-    background-color: #232323 !important;
-}
-
-.sidebar .nav-link, .bottomNavContainer .nav-link{
-    color: #dddddd;
-}
-
-.sidebar .nav-link.active, .bottomNavContainer .nav-link.active{
-    color: var(--blue) !important;
-}
-
-.nav-link:hover{
-    background-color: #3f3f3f;
-}
-
-.card{
-    background-color: #232323;
-}
-
-
-/* Button Related */
-
-.btn-outline-primary{
-    color: var(--blue);
-    border-color: var(--blue);
-}
-
 .btn-outline-primary:hover {
-    color: #fff;
+  background-color: hsl(235deg, 60%, 50%) !important;
-    background-color: var(--blue);
+  border-color: hsl(235deg, 60%, 50%) !important;
-    border-color: var(--blue);
 }
 
-.btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, .show>.btn-outline-primary.dropdown-toggle{
+.btn-success {
-    background-color: var(--blue);
+  color: hsl(0deg, 0%, 90%) !important;
-    border-color: var(--blue);
+  border-color: hsl(120deg, 30%, 50%) !important;
+  background: hsl(120deg, 30%, 50%) !important;
+}
+.btn-success:hover {
+  background-color: hsl(120deg, 30%, 40%) !important;
+  border-color: hsl(120deg, 30%, 40%) !important;
 }
 
-
+.btn-outline-success {
-/* Configuration Card (index.html) */
+  color: hsl(120deg, 30%, 50%) !important;
-.conf_card:hover{
+  border-color: hsl(120deg, 30%, 50%) !important;
-    border-color: var(--blue);
+  background: transparent !important;
+}
+.btn-outline-success:hover, .btn-outline-success.active {
+  color: hsl(0deg, 0%, 90%) !important;
+}
+.btn-outline-success.active {
+  background-color: hsl(120deg, 30%, 50%) !important;
+  border-color: hsl(120deg, 30%, 50%) !important;
+}
+.btn-outline-success:hover {
+  background-color: hsl(120deg, 30%, 40%) !important;
+  border-color: hsl(120deg, 30%, 40%) !important;
 }
 
-/* Modal */
+.btn-danger {
-.modal-content{
+  color: hsl(0deg, 0%, 90%) !important;
-    background-color: var(--dark1);
+  border-color: hsl(0deg, 60%, 60%) !important;
+  background: hsl(0deg, 60%, 60%) !important;
+}
+.btn-danger:hover {
+  background-color: hsl(0deg, 60%, 50%) !important;
+  border-color: hsl(0deg, 60%, 50%) !important;
 }
 
-.modal-header, .modal-footer{
+.btn-outline-danger {
-    border-color:rgb(255 255 255 / 10%);;
+  color: hsl(0deg, 60%, 60%) !important;
+  border-color: hsl(0deg, 60%, 60%) !important;
+  background: transparent !important;
+}
+.btn-outline-danger:hover, .btn-outline-danger.active {
+  color: hsl(0deg, 0%, 90%) !important;
+}
+.btn-outline-danger.active {
+  background-color: hsl(0deg, 60%, 60%) !important;
+  border-color: hsl(0deg, 60%, 60%) !important;
+}
+.btn-outline-danger:hover {
+  background-color: hsl(0deg, 60%, 50%) !important;
+  border-color: hsl(0deg, 60%, 50%) !important;
 }
 
-/* List Group Item */
+.btn-secondary {
-.list-group-item{
+  color: hsl(0deg, 0%, 90%) !important;
-    background-color: var(--dark2);
+  border-color: #424242 !important;
-    color: white;
+  background: #424242 !important;
+}
+.btn-secondary:hover {
+  background-color: #383838 !important;
+  border-color: #383838 !important;
 }
 
-.list-group-item:hover{
+.btn-outline-secondary {
-    color: white;
+  color: #424242 !important;
-    background-color: var(--dark3);
+  border-color: #424242 !important;
-    border-color: var(--dark3);
+  background: transparent !important;
 }
+.btn-outline-secondary:hover, .btn-outline-secondary.active {
+  color: hsl(0deg, 0%, 90%) !important;
+}
+.btn-outline-secondary.active {
+  background-color: #424242 !important;
+  border-color: #424242 !important;
+}
+.btn-outline-secondary:hover {
+  background-color: #383838 !important;
+  border-color: #383838 !important;
+}
+
+.btn-control.btn-lock-peer.lock {
+  color: hsl(0deg, 60%, 60%) !important;
+}
+.btn-control.btn-lock-peer.lock:hover {
+  color: hsl(0deg, 60%, 50%) !important;
+}
+.btn-control:hover {
+  background-color: transparent !important;
+}
+.btn-control:hover.btn-outline-primary {
+  color: hsl(235deg, 60%, 50%) !important;
+}
+.btn-control:hover.btn-outline-success {
+  color: hsl(120deg, 30%, 40%) !important;
+}
+.btn-control:hover.btn-outline-danger {
+  color: hsl(0deg, 60%, 50%) !important;
+}
+.btn-control:hover.btn-outline-secondary {
+  color: #383838 !important;
+}
+
+.form-control {
+  background: #272727 !important;
+  border-color: transparent !important;
+  color: hsl(0deg, 0%, 80%) !important;
+}
+
+.card .form-control {
+  background: #2c2c2c !important;
+}
+
+.sidebar .nav-link,
+.bottomNavContainer .nav-link {
+  color: hsl(0deg, 0%, 80%);
+}
+.sidebar .nav-link:hover,
+.bottomNavContainer .nav-link:hover {
+  background: #222222;
+}
+
+nav#sidebarMenu.col-md-3.col-lg-2.d-md-block.bg-light.sidebar.collapse,
+.navbar-brand,
+.bg-dark {
+  background-color: #1e1e1e !important;
+  background: #1e1e1e !important;
+}
+
+.card {
+  background: #272727;
+}
+
+.text-muted {
+  color: hsl(0deg, 0%, 50%) !important;
+}
+
+.text-danger {
+  color: hsl(0deg, 60%, 60%) !important;
+}
+
+.text-success {
+  color: hsl(120deg, 30%, 50%) !important;
+}
+
+.text-primary {
+  color: hsl(235deg, 60%, 60%) !important;
+}
+
+.text-info {
+  color: hsl(190deg, 60%, 60%) !important;
+}
+
+a.text-success:focus,
+a.text-success:hover {
+  color: hsl(120deg, 30%, 40%) !important;
+}
+
+a.text-danger:focus,
+a.text-danger:hover {
+  color: hsl(0deg, 60%, 50%) !important;
+}
+
+a.text-info:focus,
+a.text-info:hover {
+  color: hsl(190deg, 60%, 50%) !important;
+}
+
+.dot-running {
+  background-color: hsl(120deg, 30%, 50%) !important;
+}
+
+.card-running {
+  border-color: hsl(120deg, 30%, 50%);
+}
+
+.toggle--switch:checked + .toggleLabel::before {
+  background-color: hsl(235deg, 60%, 60%) !important;
+}
+
+.toggle--switch:checked + .toggleLabel {
+  background-color: #2e336b !important;
+  border-color: hsl(235deg, 60%, 60%) !important;
+}
+
+.sidebar .nav-link.active,
+.bottomNavContainer .nav-link.active {
+  color: hsl(235deg, 60%, 60%) !important;
+}
+
+hr {
+  border-color: #2e2e2e;
+}
+
+.modal-content {
+  background-color: #222222;
+}
+
+.modal-header,
+.modal-footer {
+  background-color: #1e1e1e;
+  border-color: #2e2e2e;
+}
+
+code {
+  color: hsl(315deg, 60%, 60%);
+}
+
+.close {
+  color: hsl(0deg, 0%, 80%);
+  text-shadow: none;
+}
+.close:hover {
+  color: hsl(0deg, 0%, 70%);
+}
+
+.chartContainer.fullScreen {
+  background-color: #222222 !important;
+}
+
+.popover {
+  background-color: #333333 !important;
+  border: none !important;
+}
+
+.popover-body {
+  color: hsl(0deg, 0%, 80%) !important;
+}
+
+div.toast {
+  background-color: #424242 !important;
+}
+div.toast div.toast-header {
+  background-color: #333333 !important;
+  color: hsl(0deg, 0%, 80%) !important;
+  border-bottom-color: #424242 !important;
+}
+div.toast div.toast-body {
+  background-color: #383838 !important;
+  color: hsl(0deg, 0%, 80%) !important;
+}
+div.toast div.toast-progressbar {
+  background-color: hsl(235deg, 60%, 60%) !important;
+}
+
+.bs-popover-auto[x-placement^=right] > .arrow::after,
+.bs-popover-right > .arrow::after {
+  border-right-color: #333333 !important;
+}
+
+.btn-manage-group .setting_btn_menu {
+  background-color: #2c2c2c !important;
+}
+
+.setting_btn_menu a:hover {
+  background-color: #333333 !important;
+}
+
+.table {
+  color: hsl(0deg, 0%, 80%) !important;
+}
+.table th,
+.table td {
+  border-color: #333333 !important;
+}
+
+/*# sourceMappingURL=dark.css.map */

src/static/css/theme/dark.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["dark.scss"],"names":[],"mappings":"AA8BA;EACE;EACA;EACA;EACA;;;AAGF;EACE,YArCS;EAsCT,OAdS;;;AAiBX;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAKF;EACE;;AACA;EACE;;AAIJ;EACE;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAKN;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;EAEE,OA1LS;;AA4LT;AAAA;EACE,YArNO;;;AAyNX;AAAA;AAAA;EAGE;EACA;;;AAGF;EACE,YA/NS;;;AAkOX;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;;;AAGF;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE,cAlQU;;;AAqQZ;EACE;;;AAEF;EACE;EACA;;;AAGF;AAAA;EAEE;;;AAGF;EACE,cAzRS;;;AA4RX;EACE,kBAjSS;;;AAoSX;AAAA;EAEE,kBAvSS;EAwST,cAnSS;;;AAsSX;EACE,OAtRY;;;AAyRd;EACE,OAvRS;EAwRT;;AAEA;EACE,OA1RO;;;AA8RX;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;;AAIJ;AAAA;EAEE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;AAEA;AAAA;EAEE","file":"dark.css"}

src/static/css/theme/dark.scss

@@ -0,0 +1,365 @@
+$grey-100: #1e1e1e;
+$grey-200: #222222;
+$grey-300: #242424;
+$grey-400: #272727;
+$grey-500: #2c2c2c;
+$grey-600: #2e2e2e;
+$grey-700: #333333;
+$grey-800: #383838;
+$grey-900: #424242;
+
+$green-400: hsl(120deg, 30%, 40%);
+$green-500: hsl(120deg, 30%, 50%);
+
+$red-400: hsl(0deg, 60%, 50%);
+$red-500: hsl(0deg, 60%, 60%);
+
+$blue-400: hsl(235deg, 60%, 50%);
+$blue-500: hsl(235deg, 60%, 60%);
+
+$cyan-400: hsl(190deg, 60%, 50%);
+$cyan-500: hsl(190deg, 60%, 60%);
+
+$magenta-500: hsl(315deg, 60%, 60%);
+
+$text-100: hsl(0deg, 0%, 90%);
+$text-200: hsl(0deg, 0%, 80%);
+$text-300: hsl(0deg, 0%, 70%);
+$text-400: hsl(0deg, 0%, 60%);
+$text-500: hsl(0deg, 0%, 50%);
+
+:root {
+  --green: #{$green-500} !important;
+  --blue: #{$blue-500} !important;
+  --red: #{$red-500} !important;
+  --magenta: #{$magenta-500} !important;
+}
+
+body {
+  background: $grey-200;
+  color: $text-200;
+}
+
+.btn-primary {
+  color: $text-100 !important;
+  border-color: $blue-500 !important;
+  background: $blue-500 !important;
+
+  &:hover {
+    background-color: $blue-400 !important;
+    border-color: $blue-400 !important;
+  }
+}
+
+.btn-outline-primary {
+  color: $blue-500 !important;
+  border-color: $blue-500 !important;
+  background: transparent !important;
+
+  &:hover,
+  &.active {
+    color: $text-100 !important;
+  }
+
+  &.active {
+    background-color: $blue-500 !important;
+    border-color: $blue-500 !important;
+  }
+
+  &:hover {
+    background-color: $blue-400 !important;
+    border-color: $blue-400 !important;
+  }
+}
+
+.btn-success {
+  color: $text-100 !important;
+  border-color: $green-500 !important;
+  background: $green-500 !important;
+
+  &:hover {
+    background-color: $green-400 !important;
+    border-color: $green-400 !important;
+  }
+}
+
+.btn-outline-success {
+  color: $green-500 !important;
+  border-color: $green-500 !important;
+  background: transparent !important;
+
+  &:hover,
+  &.active {
+    color: $text-100 !important;
+  }
+
+  &.active {
+    background-color: $green-500 !important;
+    border-color: $green-500 !important;
+  }
+
+  &:hover {
+    background-color: $green-400 !important;
+    border-color: $green-400 !important;
+  }
+}
+
+.btn-danger {
+  color: $text-100 !important;
+  border-color: $red-500 !important;
+  background: $red-500 !important;
+
+  &:hover {
+    background-color: $red-400 !important;
+    border-color: $red-400 !important;
+  }
+}
+
+.btn-outline-danger {
+  color: $red-500 !important;
+  border-color: $red-500 !important;
+  background: transparent !important;
+
+  &:hover,
+  &.active {
+    color: $text-100 !important;
+  }
+
+  &.active {
+    background-color: $red-500 !important;
+    border-color: $red-500 !important;
+  }
+
+  &:hover {
+    background-color: $red-400 !important;
+    border-color: $red-400 !important;
+  }
+}
+
+.btn-secondary {
+  color: $text-100 !important;
+  border-color: $grey-900 !important;
+  background: $grey-900 !important;
+
+  &:hover {
+    background-color: $grey-800 !important;
+    border-color: $grey-800 !important;
+  }
+}
+
+.btn-outline-secondary {
+  color: $grey-900 !important;
+  border-color: $grey-900 !important;
+  background: transparent !important;
+
+  &:hover,
+  &.active {
+    color: $text-100 !important;
+  }
+
+  &.active {
+    background-color: $grey-900 !important;
+    border-color: $grey-900 !important;
+  }
+
+  &:hover {
+    background-color: $grey-800 !important;
+    border-color: $grey-800 !important;
+  }
+}
+
+.btn-control {
+  &.btn-lock-peer.lock {
+    color: $red-500 !important;
+    &:hover {
+      color: $red-400 !important;
+    }
+  }
+
+  &:hover {
+    background-color: transparent !important;
+
+    &.btn-outline-primary {
+      color: $blue-400 !important;
+    }
+
+    &.btn-outline-success {
+      color: $green-400 !important;
+    }
+
+    &.btn-outline-danger {
+      color: $red-400 !important;
+    }
+
+    &.btn-outline-secondary {
+      color: $grey-800 !important;
+    }
+  }
+}
+
+.form-control {
+  background: $grey-400 !important;
+  border-color: transparent !important;
+  color: $text-200 !important;
+}
+
+.card .form-control {
+  background: $grey-500 !important;
+}
+
+.sidebar .nav-link,
+.bottomNavContainer .nav-link {
+  color: $text-200;
+
+  &:hover {
+    background: $grey-200;
+  }
+}
+
+nav#sidebarMenu.col-md-3.col-lg-2.d-md-block.bg-light.sidebar.collapse,
+.navbar-brand,
+.bg-dark {
+  background-color: $grey-100 !important;
+  background: $grey-100 !important;
+}
+
+.card {
+  background: $grey-400;
+}
+
+.text-muted {
+  color: $text-500 !important;
+}
+
+.text-danger {
+  color: $red-500 !important;
+}
+
+.text-success {
+  color: $green-500 !important;
+}
+
+.text-primary {
+  color: $blue-500 !important;
+}
+
+.text-info {
+  color: $cyan-500 !important;
+}
+
+a.text-success:focus,
+a.text-success:hover {
+  color: $green-400 !important;
+}
+
+a.text-danger:focus,
+a.text-danger:hover {
+  color: $red-400 !important;
+}
+
+a.text-info:focus,
+a.text-info:hover {
+  color: $cyan-400 !important;
+}
+
+.dot-running {
+  background-color: $green-500 !important;
+}
+
+.card-running {
+  border-color: $green-500;
+}
+
+.toggle--switch:checked + .toggleLabel::before {
+  background-color: $blue-500 !important;
+}
+.toggle--switch:checked + .toggleLabel {
+  background-color: mix($blue-500, #000f) !important;
+  border-color: $blue-500 !important;
+}
+
+.sidebar .nav-link.active,
+.bottomNavContainer .nav-link.active {
+  color: $blue-500 !important;
+}
+
+hr {
+  border-color: $grey-600;
+}
+
+.modal-content {
+  background-color: $grey-200;
+}
+
+.modal-header,
+.modal-footer {
+  background-color: $grey-100;
+  border-color: $grey-600;
+}
+
+code {
+  color: $magenta-500;
+}
+
+.close {
+  color: $text-200;
+  text-shadow: none;
+
+  &:hover {
+    color: $text-300;
+  }
+}
+
+.chartContainer.fullScreen {
+  background-color: $grey-200 !important;
+}
+
+.popover {
+  background-color: $grey-700 !important;
+  border: none !important;
+}
+
+.popover-body {
+  color: $text-200 !important;
+}
+
+div.toast {
+  background-color: $grey-900 !important;
+
+  div.toast-header {
+    background-color: $grey-700 !important;
+    color: $text-200 !important;
+    border-bottom-color: $grey-900 !important;
+  }
+
+  div.toast-body {
+    background-color: $grey-800 !important;
+    color: $text-200 !important;
+  }
+
+  div.toast-progressbar {
+    background-color: $blue-500 !important;
+  }
+}
+
+.bs-popover-auto[x-placement^="right"] > .arrow::after,
+.bs-popover-right > .arrow::after {
+  border-right-color: $grey-700 !important;
+}
+
+.btn-manage-group .setting_btn_menu {
+  background-color: $grey-500 !important;
+}
+
+.setting_btn_menu a:hover {
+  background-color: $grey-700 !important;
+}
+
+.table {
+  color: $text-200 !important;
+
+  th,
+  td {
+    border-color: $grey-700 !important;
+  }
+}

src/templates/header.html

@@ -15,7 +15,7 @@
 	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
 	<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='css/dashboard.css') }}">
     <!-- THEME APPLY HERE -->
-    <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='css/theme/dark.css') }}">
+    <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='css/theme/dark.min.css') }}">
     <!-- THEME APPLY HERE -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js" integrity="sha512-QSkVNOCYLtj73J4hbmVoOV6KVZuMluZlioC+trLpewV8qMjsWqlIQvkn1KGX2StWvPMdWGBqim1xlC8krl1EKQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>