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/components/ui/Loader.vue

@@ -17,29 +17,26 @@
   align-items: center;
 
   &--icon{
-    border: 2px solid rgba($c-dark, 0.9);
+    border: 2px solid $text-color-70;
     border-radius: 50%;
     display: block;
     height: 40px;
-    // left: 50%;
-    // margin: -1.5em;
     position: absolute;
     width: 40px;
 
     &-spinner {
-    // border: 2px solid transparent;
-    display: block;
+      display: block;
       animation: load 1s linear infinite;
-    height: 35px;
-    width: 35px;
-&:after {
-      border: 7px solid rgba($c-green, 0.9);
-      border-radius: 50%;
-      content: '';
-      left: 8px;
-      position: absolute;
-      top: 22px;
-    }
+      height: 35px;
+      width: 35px;
+      &:after {
+        border: 7px solid rgba($green, 0.9);
+        border-radius: 50%;
+        content: '';
+        left: 8px;
+        position: absolute;
+        top: 22px;
+      }
     }
   }
   @keyframes load {

src/components/ui/SeasonedButton.vue

@@ -25,18 +25,19 @@ export default {
 
 .button{
   display: inline-block;
-  border: 1px solid $c-dark;
+  border: 1px solid $text-color;
   text-transform: uppercase;
-  background: $c-dark;
   font-weight: 300;
   font-size: 11px;
   line-height: 2;
   height: 45px;
   letter-spacing: 0.5px;
   padding: 5px 20px 4px 20px;
+  margin: 0;
+  margin-right: 0.3rem;
   cursor: pointer;
-  color: $c-dark;
-  background: transparent;
+  color: $text-color;
+  background: $background-color-secondary;
   outline: none;
   transition: background 0.5s ease, color 0.5s ease;
 
@@ -46,8 +47,8 @@ export default {
   }
 
   body:not(.touch) &:hover, &:focus, &:active, &.active {
-    background: $c-dark;
-    color: $c-white;
+    background: $text-color;
+    color: $background-color;
   }
 }
 </style>

src/components/ui/SeasonedInput.vue

@@ -46,20 +46,20 @@ export default {
 
   &:hover, &:focus {
     .group__input {
-      border-color: $c-dark;
+      border-color: $text-color;
 
       &-icon {
-        fill: $c-dark;
+        fill: $text-color;
       }      
     }
   }
 
   &.completed {
     .group__input {
-      border-color: $c-dark;
+      border-color: $text-color;
 
       &-icon {
-        fill: $c-dark;
+        fill: $text-color;
       }      
     }
   }
@@ -70,12 +70,13 @@ export default {
     padding: 10px 10px 10px 45px;
     // padding: 15px 10px 15px 45px;
     outline: none;
-    background-color: $c-white;
-    color: $c-dark;
+    background-color: $background-color-secondary;
+    color: $text-color;
     font-weight: 100;
     font-size: 1.2rem;
-    border: 1px solid rgba($c-dark, 0.5);
-    margin-left: -2.2rem;
+    border: 1px solid $text-color-50;
+    margin: 0;
+    margin-left: -2.2rem !important;
     // margin-bottom: 1rem;
     z-index: 3;
     transition: border-color .5s ease;
@@ -91,14 +92,14 @@ export default {
       height: 100%;
       font-size: 0.9rem;
       cursor: pointer;
-      color: rgba($c-dark, 0.5);
+      color: $text-color-50;
     }
   }
 
   &__input-icon {
     width: 24px;
     height: 24px;
-    fill: rgba($c-dark, 0.5);
+    fill: $text-color-50;
     transition: fill 0.5s ease;
     pointer-events: none;
     margin-top: 10px;

src/components/ui/sidebarListElem.vue

@@ -63,12 +63,6 @@ export default {
     activeClassIfActive() {
       return this.active ? 'active' : ''
     }
-    // torrentResults() {
-    //   return this.text.toLowerCase().includes('torrents')
-    // },
-    // getTorrentResultCount() {
-    //   return store.getters['torrentModule/resultCount']
-    // }
   }
 }
 </script>
@@ -82,18 +76,18 @@ li {
   align-items: center;
   text-decoration: none;
   text-transform: uppercase;
-  color: rgba($c-dark, 0.5);
+  color: $text-color-50;
   transition: color 0.5s ease;
   font-size: 11px;
   padding: 10px 0;
-  border-bottom: 1px solid rgba($c-dark, 0.05);
+  border-bottom: 1px solid $text-color-5;
 
   &:hover {
-    color: rgba($c-dark, 0.80);
+    color: $text-color-70;
     cursor: pointer;
   }
   .active {
-    color: $c-dark;
+    color: $text-color;
   }
   .pending {
     color: #f8bd2d;
@@ -108,7 +102,7 @@ li {
     width: 18px;
     height: 18px;
     margin: 0 7px 0 0;
-    fill: rgba($c-dark, 0.5);
+    fill: $text-color-50;
     transition: fill 0.5s ease, transform 0.5s ease;
     &.waiting {
       transform: scale(0.8, 0.8);
@@ -117,15 +111,11 @@ li {
       fill: #f8bd2d;
     }
     &:hover &-icon {
-      fill: rgba($c-dark, 0.75);
+      fill: $text-color-70;
       cursor: pointer;
     }
-    &.active {
-      color: $c-green;
-
-      > svg {
-        fill: $c-green;
-      }
+    &.active > svg {
+      fill: $green;
     }
   }
 }