Change to dark sidebar

src/components/UI/theme.css

@@ -16,7 +16,7 @@
   --dropShadow: 0 2px 4px 0 rgba(19, 39, 48, .12);
   --topmostZindex: 99999;
   --foregroundAltColor: #fff;
-  --backgroundAltColor: #f8f9fa;
+  --backgroundAltColor: #313d3e;
   --textFieldBorderColor: #e7e7e7;
   --highlightFGColor: #fff;
   --highlightBGColor: #3ab7a5;

src/containers/Sidebar.css

@@ -5,13 +5,15 @@
 }
 
 .sidebar {
-  width: 220px;
-  background-color: #fff;
   padding: 0 16px;
+  width: 220px;
+  background-color: var(--backgroundAltColor);
+  color: var(--defaultColorLight);
 }
 
 .heading {
   margin-bottom: 8px;
+  color: var(--defaultColorLight);
 }
 
 .nav {
@@ -19,14 +21,14 @@
 }
 
 .linkWrapper {
-  color: var(--defaultColor);
+  color: #fff;
   border-radius: var(--borderRadius);
   display: flex;
   align-items: center;
   justify-content: space-between;
 
   &:hover {
-    background-color: var(--defaultColorLight);
+    background-color: var(--textColor);
   }
 }