Finished dark mode! This means re-doing all sass variables in the

variables.scss file and defining css variables in :root and alterting
them based on prefered color scheme. This gives us a mechanism to set
custom color schemes for the entire site from one place and changing
between them just by setting a class to the body element. This is done
by overwriting the css variables and then our scss variables use these
changes and apply them downward. This seems like a really nice setup for
the switching between- and adding color schemes.
Also did a lot of cleanup of unused, duplicate or errors styling
throughout the application.

src/scss/elements.scss

@@ -2,21 +2,18 @@
 @import "./src/scss/media-queries";
 
 .filter {
-  // margin: 10px 10px 20px;
   margin: 1rem;
   padding: 0;
   overflow: auto;
   list-style: none;
   border: 1px solid;
   border-radius: 2px;
-  // overflow: hidden;
   display: flex;
   transition: color .2s ease;
-  // justify-content: space-evenly;
 
   &-item {
     padding: 6px 15px;
-    background-color: $c-white;
+    background-color: $background-color-secondary;
     transition: color 0.2s ease;
     font-size: 13px;
     font-weight: 200;
@@ -24,16 +21,17 @@
     text-align: center;
     width: 100%;
     white-space:nowrap;
-    // overflow: hidden;
+
     &:nth-child(n+2) {
       border-left: solid 1px;
     }
     &.active, &:hover {
       border-color: transparent;
-      background-color: #091c24;
-      color: $c-green;
+      background-color: $teal;
+      color: $green;
       cursor: pointer;
     }
+
     @include tablet-min {
       font-size: 16px;
     }