Add Card component and various darkmode fixes

dashboard/src/theme.scss

@@ -58,6 +58,17 @@ $state-danger-border:                       $brand-danger;
 html {
     // --accent-color: $brand-primary;
     --accent-color: #9141ac;
+    --card-background: #f0f2f5;
+    --navbar-background: #f8f8f8;
+    --body-background: white;
+}
+
+@media (prefers-color-scheme: dark) {
+    html {
+        --card-background: #181e2a;
+        --navbar-background: #11161f;
+        --body-background: #0b0e14;
+    }
 }
 
 // ----------------------------
@@ -196,7 +207,7 @@ html, body {
     height: 100%;
     width: 100%;
     padding: 0;
-    background-color: white;
+    background-color: var(--body-background);
 }
 
 .view-header-filter-bar {
@@ -341,7 +352,7 @@ html, body {
     display: block;
     width: 100%;
     flex-grow: 0;
-    background-color: #f8f8f8;
+    background-color: var(--navbar-background);
     border-color: white;
 
     @media(min-width:768px) {
@@ -1273,7 +1284,7 @@ multiselect {
 
 .card {
     position: relative;
-    background-color: #f8f8f8;
+    background-color: var(--card-background);
     // background-color: #ebebeb;
     // max-width: 720px;
     // margin: 0 auto;
@@ -2394,7 +2405,7 @@ tag-input {
 
     body, .modal-content, .setup {
         color: $textColor;
-        background-color: $backgroundLight;
+        // background-color: $backgroundLight;
     }
 
     .view-header-filter-bar {
@@ -2410,8 +2421,8 @@ tag-input {
     }
 
     .navbar-default {
-        background-color: $backgroundDark;
-        border-color: $backgroundDark;
+        // background-color: $backgroundDark;
+        border-color: var(--navbar-background);
     }
 
     .navbar-collapse.collapse.in {