Add dark mode [db]

resources/assets/sass/app-dark.scss

@@ -0,0 +1,30 @@
+// Variables
+$theme: dark;
+
+@import "bootstrap";
+
+html {
+    overflow-y: scroll;
+}
+
+@import "helpers";
+@import "fa-utils";
+@import "block-collapse";
+@import "form-help";
+
+@import "bootstrap-customizations/paginate";
+@import "bootstrap-customizations/card";
+@import "bootstrap-customizations/tooltip";
+@import "bootstrap-customizations/navbar";
+@import "bootstrap-customizations/footer";
+@import "bootstrap-customizations/link";
+@import "bootstrap-customizations/border";
+@import "bootstrap-customizations/button";
+@import "bootstrap-customizations/responsive";
+@import "bootstrap-customizations/typography";
+
+.bio-table {
+    td {
+        padding-top: dist(2);
+    }
+}

resources/assets/sass/bootstrap-customizations/_card.scss

@@ -39,3 +39,7 @@
 	min-width: 1.5rem;
 	text-align:center;
 }
+
+.card .auth-footer {
+	background-color: $body-bg;
+}

resources/assets/sass/bootstrap-customizations/_footer.scss

@@ -2,5 +2,5 @@
 .page-footer {
 	font-size: 95%;
 	background: $body-bg;
-	border-top: 2px dotted $gray-200;
+	border-top: 2px dotted $footer-separator-color;
 }

resources/assets/sass/bootstrap-customizations/_navbar.scss

@@ -1,6 +1,6 @@
 // layout tweaks
 .page-navbar {
-	background: white;
+	background: $navbar-bg;
 	border-bottom: 1px solid $primary;
 
 	box-shadow: 0 -3px 8px rgba(black, 1);

resources/assets/sass/bootstrap-customizations/_variables.scss

@@ -25,3 +25,60 @@ $tooltip-arrow-color: $tooltip-bg;
 
 $pagination-padding-y-sm: dist(1);
 $pagination-padding-x-sm: dist(3);
+
+$navbar-bg: white;
+
+$footer-separator-color: $gray-200;
+
+$theme: light !default;
+@if $theme == dark {
+    // dark mode overrides
+
+    $body-bg: $gray-900;
+    $body-color: $gray-100;
+    $text-muted: $gray-500;
+    $link-color: lighten($primary, 15%);
+    $link-hover-color: lighten($primary, 20%);
+
+    $card-bg: $gray-800;
+    $list-group-bg: $gray-800;
+    $list-group-hover-bg: $gray-700;
+    $list-group-disabled-color: $gray-400;
+    $list-group-action-color: $gray-200;
+    $list-group-action-hover-color: $gray-200;
+    $list-group-action-active-bg: $gray-600;
+    $list-group-action-active-color: $gray-100;
+
+    $tooltip-color: rgba($white, 0.9);
+
+    $navbar-bg: lighten($gray-900, 2%);
+    $footer-separator-color: $gray-800;
+
+    $close-color: $white;
+
+    $input-bg: $gray-700;
+    $input-color: $gray-200;
+    $input-disabled-bg: $gray-900;
+    $input-border-color: $gray-600;
+    $input-focus-bg: $input-bg;
+    $input-focus-color: $input-color;
+    $input-group-addon-bg: $gray-800;
+    $input-group-addon-color: $input-color;
+    $input-group-addon-border-color: $input-border-color;
+
+    $custom-select-color: $input-color;
+    $custom-select-bg: $input-bg;
+    $custom-select-disabled-bg: $input-disabled-bg;
+    $custom-select-indicator-color: $gray-300;
+    $custom-select-border-color: $input-border-color;
+    $custom-select-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"), "#", "%23");
+
+    $dropdown-bg: $gray-700;
+    $dropdown-link-color: $gray-300;
+    $dropdown-link-hover-color: lighten($gray-300, 5%);
+    $dropdown-link-hover-bg: $gray-800;
+    $dropdown-link-disabled-color: $gray-500;
+    $dropdown-header-color: $gray-400;
+
+    $border-color: $gray-600;
+}