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/App.vue

@@ -72,7 +72,7 @@ export default {
 .content {
     @include tablet-min{
     width: calc(100% - 95px);
-    padding-top: $header-size;
+    margin-top: $header-size;
     margin-left: 95px;
     position: relative;
   }
@@ -80,24 +80,30 @@ export default {
 </style>
 
 <style lang="scss">
-@import "./src/scss/main";
+// @import "./src/scss/main";
 @import "./src/scss/variables";
 @import "./src/scss/media-queries";
+
 *{
   box-sizing: border-box;
 }
-html, body{
+html {
   height: 100%;
 }
 body{
+  margin: 0;
+  padding: 0;
   font-family: 'Roboto', sans-serif;
   line-height: 1.6;
-  background: $c-light;
+  background: $background-color;
-  color: $c-dark;
+  color: $text-color;
   &.hidden{
     overflow: hidden;
   }
 }
+a:any-link {
+  color: inherit;
+}
 input, textarea, button{
   font-family: 'Roboto', sans-serif;
 }
@@ -116,7 +122,6 @@ img{
 }
 .header{
   position: fixed;
-  background: $c-white;
   z-index: 15;
   display: flex;
   flex-direction: column;
@@ -128,61 +133,6 @@ img{
     border-bottom: 0;
     top: 0;
   }
-  &__search{
-    display: flex;
-    position: relative;
-    z-index: 5;
-    width: 100%;
-    position: fixed;
-    top: 0;
-    right: 55px;
-    @include tablet-min{
-      position: relative;
-      height: 75px;
-      right: 0;
-    }
-    &-input{
-      display: block;
-      width: 100%;
-      padding: 15px 20px 15px 45px;
-      outline: none;
-      border: 0;
-      background-color: transparent;
-      color: $c-dark;
-      font-weight: 300;
-      font-size: 16px;
-      @include tablet-min{
-        padding: 15px 30px 15px 60px;
-      }
-      @include tablet-landscape-min{
-        padding: 15px 30px 15px 80px;
-      }
-      @include desktop-min{
-        padding: 15px 30px 15px 90px;
-      }
-    }
-    &-arrow {
-      height: 19px;
-      width: 30px;
-      display: flex;
-      align-self: center;
-      margin-right: 30px;
-
-      -moz-transition: all 0.5s ease;
-      -webkit-transition: all 0.5s ease;
-      transition: all 0.5s ease;
-
-      &.down {
-        -ms-transform: rotate(180deg);
-        -moz-transform: rotate(180deg);
-        -webkit-transform: rotate(180deg);
-        transform: rotate(180deg);
-      }
-    }
-    &-input:focus + &-icon{
-      fill: $c-dark;
-    }
-  }
 }
 
 // router view transition

src/components/404.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="not-found">
     <div class="not-found__content">
-      <h2 class="not-found__title">Page Not Found</h2>
+      <h1 class="not-found__title">Page Not Found</h1>
     </div>
   </section>
 </template>
@@ -15,58 +15,36 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 @import "./src/scss/variables";
 @import "./src/scss/media-queries";
-.not-found{
+.not-found {
   width: 100%;
-  height: calc(100vh - 100px);
+  height: calc(100vh - var(--header-size));
   background: url('~assets/pulp-fiction.jpg') no-repeat 50% 50%;
   background-size: cover;
   display: flex;
-  align-items: center;
   justify-content: center;
-  @include tablet-min{
-    height: calc(100vh - 75px);
-  }
-  &:before{
-    content: "";
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba($c-light, 0.7);
-  }
-  &-shortList{
-    width: 100%;
-  }
-  &__content{
-    width: 100%;
-    padding: 0 20px;
-    text-align: center;
-    @include tablet-min{
-      padding: 20px 0 0 0;
-    }
-    &-shortList {
-      width: 100%;
 
+  &:before {
+    background: $background-40;
+    height: 100%;
+    width: 100%;
+    content: "";
+    position: absolute;
   }
+  &__content {
+    padding-top: 30%;
   }
     &__title{
-      font-size: 24px;
+      font-size: 2rem;
       font-weight: 500;
-      color: $c-dark;
+      color: $text-color;
       position: relative;
       margin: 0;
       @include tablet-min{
-        font-size: 28px;
+        font-size: 2.3rem;
       }
     }
-    &__button{
-      position: relative;
-      margin-top: 20px;
-    }
 }
 </style>

src/components/LandingBanner.vue

@@ -43,7 +43,7 @@ header {
   background-repeat: no-repeat;
   background-position: 50% 50%;
   position: relative;
-  background-color: $c-dark;
+
   @include tablet-min {
     height: 284px;
   }
@@ -54,7 +54,7 @@ header {
     left: 0;
     width: 100%;
     height: 100%;
-    background: rgba($c-light, 0.7);
+    background: $background-70;
   }
   
   .container {
@@ -67,7 +67,7 @@ header {
     font-size: 22px;
     text-transform: uppercase;
     letter-spacing: 0.5px;
-    color: $c-dark;
+    color: $text-color;
     margin: 0;
     @include tablet-min{
       font-size: 28px;
@@ -78,35 +78,11 @@ header {
     display: block;
     font-size: 14px;
     font-weight: 300;
-    color: $c-dark;
+    color: $text-color-70;
     margin: 5px 0;
     @include tablet-min{
       font-size: 16px;
     }
   }
-
-  .link {
-    text-decoration: none;
-    color: $c-dark;
-    font-size: 13px;
-    font-weight: 300;
-    opacity: 0.7;
-    transition: opacity 0.5s ease;
-    &:hover {
-      opacity: 1;
-    }
-    span {
-      display: inline-block;
-      vertical-align: middle;
-    }
-    &-icon {
-      display: inline-block;
-      vertical-align: middle;
-      margin-right: 2px;
-      width: 16px;
-      height: 15px;
-      fill: $c-dark;
-    }
-  }
 }
 </style>

src/components/Movie.vue

@@ -231,6 +231,9 @@ export default {
       @include tablet-min{
         flex-direction: row;
       }
+
+      background-color: $background-color;
+      color: $text-color;
     }
   }
   &__header {
@@ -243,7 +246,7 @@ export default {
     background-size: cover;
     background-repeat: no-repeat;
     background-position: 50% 50%;
-    background-color: $c-dark;
+    background-color: $background-color;
     @include tablet-min {
       height: 350px;
     }
@@ -256,7 +259,7 @@ export default {
       z-index: 0;
       width: 100%;
       height: 100%;
-      background: rgba($c-dark, 0.85);
+      background: $background-dark-85;
     }
     &.compact {
       height: 100px;
@@ -266,7 +269,7 @@ export default {
   &__poster {
     display: none;
     @include tablet-min {
-      background: $c-white;
+      background: $background-color;
       height: 0;
       display: block;
       position: absolute;
@@ -293,7 +296,7 @@ export default {
   &__title {
     position: relative;
     padding: 20px;
-    color: $c-green;
+    color: $green;
     text-align: center;
     width: 100%;
     @include tablet-min {
@@ -310,16 +313,8 @@ export default {
         font-size: 30px;
       }
     }
-    span {
-      display: block;
-      font-size: 14px;
-      font-weight: 300;
-      color: rgba($c-white, 0.7);
-      margin-top: 10px;
-    }
   }
   &__main {
-    background: $c-light;
     min-height: calc(100vh - 250px);
     @include tablet-min {
       min-height: 0;
@@ -329,64 +324,16 @@ export default {
   }
     &__actions {
       text-align: center;
-      // min-height: 394px;
       width: 100%;
       order: 2;
       padding: 20px;
-      border-top: 1px solid rgba($c-dark, 0.05);
+      border-top: 1px solid $text-color-5;
       @include tablet-min {
         order: 1;
         width: 45%;
         padding: 185px 0 40px 40px;
         border-top: 0;
       }
-      &-link {
-        display: flex;
-        align-items: center;
-        text-decoration: none;
-        text-transform: uppercase;
-        color: rgba($c-dark, 0.5);
-        transition: color 0.5s ease;
-        font-size: 11px;
-        padding: 5px 0;
-        border-bottom: 1px solid rgba($c-dark, 0.05);
-        &:hover {
-          color: rgba($c-dark, 0.75);
-        }
-        &.active {
-          color: $c-dark;
-        }
-        &.pending {
-          color: #f8bd2d;
-        }
-      }
-      &-icon {
-        width: 18px;
-        height: 18px;
-        margin: 0 10px 0 0;
-        fill: rgba($c-dark, 0.5);
-        transition: fill 0.5s ease, transform 0.5s ease;
-        &.waiting {
-          transform: scale(0.8, 0.8);
-        }
-        &.pending {
-          fill: #f8bd2d;
-        }
-      }
-      &-link:hover &-icon {
-        fill: rgba($c-dark, 0.75);
-        cursor: pointer;
-      }
-      &-link.active &-icon {
-        fill: $c-green;
-      }
-      &-text {
-        display: block;
-        padding-top: 2px;
-        cursor: pointer;
-        margin:4.4px;
-        margin-left: -3px;
-      }
     }
     &__info {
       width: 100%;
@@ -399,7 +346,7 @@ export default {
         margin-left: 45%;
       }
     }
-    &__actions + &__info {
+    &__info {
       margin-left: 0;
     }
     &__description {
@@ -429,7 +376,7 @@ export default {
         font-weight: 400;
         text-transform: uppercase;
         font-size: 14px;
-        color: $c-green;
+        color: $green;
         @include tablet-min {
           font-size: 16px;
         }
@@ -456,7 +403,7 @@ export default {
           text-transform: uppercase;
           text-align: center;
           font-size: 14px;
-          color: $c-green;
+          color: $green;
           padding-bottom: 20px;
           @include tablet-min {
             font-size: 16px;

src/components/MoviePopup.vue

@@ -36,7 +36,7 @@ export default {
   z-index: 20;
   width: 100%;
   height: 100vh;
-  background: rgba($c-dark, 0.93);
+  background: rgba($dark, 0.93);
   -webkit-overflow-scrolling: touch;
   overflow: auto;
   &__box{
@@ -44,7 +44,7 @@ export default {
     max-width: 768px;
     position: relative;
     z-index: 5;
-    background: $c-dark;
+    background: $background-color-secondary;
     padding-bottom: 50px;
     @include tablet-min{
       padding-bottom: 0;
@@ -71,7 +71,7 @@ export default {
       left: 10px;
       width: 20px;
       height: 2px;
-      background: $c-white;
+      background: $white;
     }
     &:before{
       transform: rotate(45deg);
@@ -80,7 +80,7 @@ export default {
       transform: rotate(-45deg);
     }
     &:hover{
-      background: $c-green;
+      background: $green;
     }
   }
 }

src/components/MoviesList.vue

@@ -226,70 +226,47 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-@import "./src/scss/variables";
+@import './src/scss/media-queries';
-@import "./src/scss/media-queries";
+@import './src/scss/variables';
-@import "./src/scss/elements";
 
-  .movies-list {
+.movies-list {
-    list-style: none;
+  & ul:last-of-type {
-    display: flex;
+    padding-bottom: 1.5rem;
-    flex-wrap: wrap;
-    padding: 15px;
-
-    .results {
-      list-style: none;
-      margin: 0;
-      padding: 0;
-      display: flex;
-      flex-wrap: wrap;
   }
 
-    .list-header {
+  &:first-of-type header {
+    padding-top: 1.75rem;
+  }
+
+  header {
     width: 100%;
     display: flex;
-      flex-flow: row wrap;
-      align-items: center;
     justify-content: space-between;
-      padding: 20px 10px;
+    padding: 12px;
 
-      @include tablet-min{
+    &.sticky {
-        padding: 23px 15px;
+      background-color: $background-color-secondary;
-      }
+
-      @include tablet-landscape-min{
+      position: sticky;
-        padding: 16px 25px;
+      position: -webkit-sticky;
-      }
+      top: $header-size;
-      @include desktop-min{
+      z-index: 4;
-        padding: 8px 30px;
     }
 
-      .header__title {
+    h2 {
+      font-size: 18px;
+      font-weight: 300;
+      text-transform: capitalize;
       line-height: 18px;
       margin: 0;
-        font-size: 18px;
+      color: $text-color;
-        color: #081c24;
-        font-weight: 300;
-        // flex-basis: 50%;
-        text-transform: capitalize;
-
-        @include tablet-min{
-          font-size: 18px;
-          line-height: 18px;
-        }
     }
 
-      .header__result-count {
+    .view-more {
-        font-size: 12px;
-        font-weight: 300;
-        letter-spacing: .5px;
-        color: rgba(8,28,36,.5);
-        text-align: right;
-      }
-
-      .header__view-more {
       font-size: 13px;
       font-weight: 300;
       letter-spacing: .5px;
-        color: rgba($c-dark, 0.5);
+      color: $text-color-70;
       text-decoration: none;
       transition: color .5s ease;
       cursor: pointer;
@@ -298,22 +275,103 @@ export default {
         content: " →";
       }
       &:hover{
-          color: $c-dark;
+        color: $text-color;
-        }
       }
     }
 
-    .end-section {
+    .result-count {
+      font-size: 13px;
+      font-weight: 300;
+      letter-spacing: .5px;
+      color: $text-color;
+      text-decoration: none;
+    }
+  }
+
+  .results {
     display: flex;
-      justify-content: center;
+    flex-wrap: wrap;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+
+    &.shortList > li {
+      display: none;
+
+      &:nth-child(-n+4) {
+        display: block;
+      }
+    }
+
+    .fullwidth-button {
       width: 100%;
       margin: 1rem 0;
+      display: flex;
+      justify-content: center;
     }
   }
 
 
-  @import "./src/scss/media-queries";
+  @include tablet-min {
-  .form__group-input {
+    header {
+      padding-left: 1.25rem;
+    }
+    .results.shortList > li:nth-child(-n+6) {
+      display: block;
+    }
+  }
+  @include tablet-landscape-min {
+    header {
+      padding-left: 1.5rem;
+    }
+    .results.shortList > li:nth-child(-n+8) {
+      display: block;
+    }
+  }
+  @include desktop-min {
+    .results.shortList > li:nth-child(-n+12) {
+      display: block;
+    }
+  }
+
+  @include desktop-lg-min {
+    header {
+      padding-left: 1.75rem;
+    }
+    .results.shortList > li:nth-child(-n+16) {
+      display: block;
+    }
+  }
+}
+// .shutter {
+//   $height: 36px;
+//   height: $height;
+//   width: 100%;
+//   background-color: $background-color-secondary;
+//   position: absolute;
+//   margin-bottom: -$height;
+
+//   position: -webkit-sticky; /* Safari */
+//   position: sticky;
+//   top: $header-size;
+//   z-index: 4;
+
+//   @include tablet-min{
+//     background-color: blue;
+//     height: 23px 15px;
+//   }
+//   @include tablet-landscape-min{
+//     background-color: orange;
+//     height: 30px;
+//   }
+//   @include desktop-min{
+//     background-color: navajowhite;
+//     height: 34px;
+//   }
+// }
+
+
+.form__group-input {
   padding: 10px 5px 10px 15px;
   margin-left: 0;
   height: 38px;
@@ -323,6 +381,6 @@ export default {
     width: 200px;
     font-size: 17px;
   }
-  }
+}
 
 </style>

src/components/MoviesListItem.vue

@@ -49,50 +49,28 @@ export default {
 .movies-item {
   padding: 10px;
   width: 50%;
+  background-color: $background-color;
 
   @include tablet-min{
     padding: 15px;
   }
   @include tablet-landscape-min{
-    padding: 20px;
+    padding: 15px;
     width: 25%;
   }
   @include desktop-min{
-    padding: 30px;
+    padding: 15px;
     width: 20%;
   }
 
   @include desktop-lg-min{
     padding: 20px;
-    width: 16.5%;
+    width: 12.5%;
-  }
-
-  &.shortList {
-    display: none;
-
-    &:nth-child(-n+6) { // show first 6
-      display: block;
-    }
-
-    @include tablet-landscape-min{
-      &:nth-child(-n+8) { // show first 8
-        display: block;
-      }
-    }
-    @include desktop-min{
-      &:nth-child(-n+10) { // show first 10
-        display: block;
-      }
-    }
-
-    @include desktop-lg-min{
-      display: block; // show all
-    }
   }
 
   &__link{
     text-decoration: none;
-    color: rgba($c-dark, 0.5);
+    color: $text-color-70;
     font-weight: 300;
   }
   &__content{
@@ -101,7 +79,6 @@ export default {
   &__poster{
     transition: transform 0.5s ease, box-shadow 0.3s ease;
     transform: translateZ(0);
-    background: $c-white;
   }
   &__img{
     width: 100%;
@@ -115,13 +92,14 @@ export default {
   }
   &__link:not(.no-image):hover &__poster{
     transform: scale(1.03);
-    box-shadow: 0 0 10px rgba($c-dark, 0.1);
+    box-shadow: 0 0 10px rgba($dark, 0.1);
   }
   &__title{
     margin: 0;
     font-size: 11px;
     letter-spacing: 0.5px;
     transition: color 0.5s ease;
+    cursor: pointer;
     @include mobile-ls-min{
       font-size: 12px;
     }
@@ -130,7 +108,7 @@ export default {
     }
   }
   &__link:hover &__title{
-    color: $c-dark;
+    color: $text-color;
   }
 }
 </style>

src/components/Navigation.vue

@@ -75,10 +75,16 @@ export default {
 <style lang="scss" scoped>
 @import "./src/scss/variables";
 @import "./src/scss/media-queries";
+
+.icon {
+  width: 30px;
+}
+
+
 .spacer {
   @include mobile-only {
     width: 100%;
-    height: $header-size-mobile;
+    height: $header-size;
   }
 }
 .nav {
@@ -87,41 +93,40 @@ export default {
   left: 0;
   width: 100%;
   height: 50px;
-  background: $c-white;
   z-index: 10;
   display: block;
-
+  color: $text-color;
+  background-color: $background-color-secondary;
 
   @include tablet-min{
     width: 95px;
     height: 100vh;
   }
-  &__logo{
+  &__logo {
     width: 55px;
-    height: $header-size-mobile;
+    height: $header-size;
     display: flex;
     align-items: center;
     justify-content: center;
-    background: $c-dark;
+    background: $background-nav-logo;
     @include tablet-min{
       width: 95px;
-      height: $header-size;
     }
     &-image{
       width: 35px;
       height: 31px;
-      fill: $c-green;
+      fill: $green;
       transition: transform 0.5s ease;
       @include tablet-min{
         width: 45px;
         height: 40px;
       }
     }
-    &:hover &-image{
+    &:hover &-image {
       transform: scale(1.04);
     }
   }
-  &__hamburger{
+  &__hamburger {
     display: block;
     position: fixed;
     width: 55px;
@@ -129,23 +134,22 @@ export default {
     top: 0;
     right: 0;
     cursor: pointer;
-    background: $c-white;
     z-index: 10;
-    border-left: 1px solid $c-light;
+    border-left: 1px solid $background-color;
     @include tablet-min{
       display: none;
     }
-    .bar{
+    .bar {
       position: absolute;
       width: 23px;
       height: 1px;
-      background: rgba($c-dark, 0.5);
+      background-color: $text-color-70;
       transition: all 300ms ease;
-      &:nth-child(1){
+      &:nth-child(1) {
         left: 16px;
         top: 17px;
       }
-      &:nth-child(2){
+      &:nth-child(2) {
         left: 16px;
         top: 25px;
         &:after {
@@ -155,16 +159,15 @@ export default {
           top: 0px;
           width: 23px;
           height: 1px;
-          background: transparent;
           transition: all 300ms ease;
         }
       }
-      &:nth-child(3){
+      &:nth-child(3) {
         right: 15px;
         top: 33px;
       }
     }
-    &--active{
+    &--active {
       .bar{
         &:nth-child(1),
         &:nth-child(3){
@@ -175,12 +178,13 @@ export default {
         }
         &:nth-child(2):after {
           transform: rotate(-90deg);
-          background: rgba($c-dark, 0.5);
+          // background: rgba($c-dark, 0.5);
+          background-color: $text-color-70;
         }
       }
     }
   }
-  &__list{
+  &__list {
     list-style: none;
     padding: 0;
     margin: 0;
@@ -189,13 +193,14 @@ export default {
     position: fixed;
     left: 0;
     top: 50px;
-    background: rgba($c-white, 0.98);
+    border-top: 1px solid $background-color;
-    border-top: 1px solid $c-light;
+    @include mobile-only {
-    @include mobile-only{
+      display: flex;
+      flex-wrap: wrap;
       font-size: 0;
       opacity: 0;
       visibility: hidden;
-      height: calc(100vh - 50px);
+      background-color: $background-95;
       transition: all 0.5s ease;
       text-align: left;
       &--active{
@@ -203,9 +208,8 @@ export default {
         visibility: visible;
       }
     }
-    @include tablet-min{
+    @include tablet-min {
       display: flex;
-      background: transparent;
       position: relative;
       display: block;
       width: 100%;
@@ -213,31 +217,43 @@ export default {
       top: 0;
     }
   }
-  &__item{
+  &__item {
-    @include mobile-only{
+    background-color: $background-color-secondary;
-      display: inline-block;
+    color: $text-color-70;
+
+    @include mobile-only {
+      flex: 0 0 50%;
       text-align: center;
-      width: 50%;
+      border-bottom: 1px solid $background-color;
-      border-bottom: 1px solid $c-light;
       &:nth-child(odd){
-        border-right: 1px solid $c-light;
+        border-right: 1px solid $background-color;
+
+        &:last-child {
+          // flex: 0 0 100%;
         }
       }
-    @include tablet-min{
+    }
+    @include tablet-min {
       width: 100%;
-      border-bottom: 1px solid $c-light;
+      border-bottom: 1px solid $text-color-5;
-      &--profile{
+
+      &--profile {
         position: fixed;
         right: 0;
         top: 0;
         width: $header-size;
         height: $header-size;
         border-bottom: 0;
-        border-left: 1px solid $c-light;
+        border-left: 1px solid $background-color;
       }
     }
+    &:hover, .is-active {
+      color: $text-color;
+      background-color: $background-color;
     }
-  &__link{
+  }
+  &__link {
+    background-color: inherit; // a elements have a transparent background
     width: 100%;
     display: flex;
     flex-wrap: wrap;
@@ -248,7 +264,6 @@ export default {
     text-decoration: none;
     text-transform: uppercase;
     letter-spacing: 0.5px;
-    color: rgba($c-dark, 0.7);
     transition: color 0.5s ease, background 0.5s ease;
     position: relative;
     cursor: pointer;
@@ -258,49 +273,38 @@ export default {
       align-items: center;
     }
 
-    @include mobile-only{
+    @include mobile-only {
       font-size: 10px;
       padding: 20px 0;
     }
-    @include tablet-min{
+    @include tablet-min {
       width: 95px;
       height: 95px;
       font-size: 9px;
-      &--profile{
+      &--profile {
         width: 75px;
         height: 75px;
-        background: $c-white;
       }
     }
-    &-icon{
+    &-icon {
       width: 20px;
       height: 20px;
-      fill: rgba($c-dark, 0.7);
+      fill: $text-color-70;
       transition: fill 0.5s ease;
-      @include tablet-min{
+      @include tablet-min {
         width: 20px;
         height: 20px;
         margin-bottom: 5px;
       }
 
     }
-    &-title{
+    &-title {
       margin-top: 5px;
       display: block;
       width: 100%;
     }
-    &:hover{
+    &:hover &-icon, &.is-active &-icon {
-      color: $c-dark;
+      fill: $text-color;
-    }
-    &:hover &-icon{
-      fill: $c-dark;
-    }
-    &.is-active{
-      color: $c-dark;
-      background: $c-light;
-    }
-    &.is-active &-icon{
-      fill: $c-dark;
     }
   }
 }

src/components/Profile.vue

@@ -93,6 +93,10 @@ export default {
 @import "./src/scss/variables";
 @import "./src/scss/media-queries";
 
+.button--group {
+  display: flex;
+}
+
 // DUPLICATE CODE
 .profile{
   &__header{
@@ -100,7 +104,17 @@ export default {
     align-items: center;
     justify-content: space-between;
     padding: 20px;
-    border-bottom: 1px solid rgba($c-dark, 0.05);
+    border-bottom: 1px solid $text-color-5;
+
+    @include mobile-only {
+      flex-direction: column;
+      align-items: flex-start;
+
+      .button--group {
+        padding-top: 2rem;
+      }
+    }
+
     @include tablet-min{
       padding: 29px 30px;
     }
@@ -115,7 +129,7 @@ export default {
     margin: 0;
     font-size: 16px;
     line-height: 16px;
-    color: $c-dark;
+    color: $text-color;
     font-weight: 300;
     @include tablet-min{
       font-size: 18px;

src/components/Register.vue

@@ -137,66 +137,33 @@ export default {
   created(){
     document.title = 'Profile' + storage.pageTitlePostfix;
     storage.backTitle = document.title;
-  },
-  mounted(){
-    // this.$refs.email.focus();
   }
 }
 </script>
 
 <style lang="scss" scoped>
 @import "./src/scss/variables";
-@import "./src/scss/media-queries";
-@import "./src/scss/message";
 
-// DUPLICATE CODE
+section {
-.settings {
+  padding: 1.3rem;
-  padding: 35px;
 
-  &__header {
+  @include tablet-min {
+    padding: 4rem;
+  }
+
+  h1 {
     margin: 0;
     line-height: 16px;
-    color: $c-dark;
+    color: $text-color;
     font-weight: 300;
     margin-bottom: 20px;
     text-transform: uppercase;
   }
-}
-.profile__content {
-  padding: 35px;
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-}
 
-
+  .link {
-.center {
+    display: block;
-  justify-content: center;
+    width: max-content;
-}
-
-.form {
-  // TODO, fix this. if single child it adds weird margin
-  > div:last-child {
     margin-top: 1rem;
   }
-
-  &__group{
-     justify-content: unset;
-     &__input-icon {
-        margin-top: 8px;
-        height: 22px;
-        width: 22px;
-     }
-     &-input {
-        padding: 10px 5px 10px 45px;
-        height: 40px;
-        font-size: 17px;
-        width: 75%;
-        // @include desktop-min {
-        //    width: 400px;
-        // }
-     }
-  }
 }
-
 </style>

src/components/SearchInput.vue

@@ -15,7 +15,7 @@
         @keydown.up="navigateUp"
         @keydown.down="navigateDown" />
 
-      <svg class="search--icon"><use xlink:href="#iconSearch"></use></svg>
+      <svg class="search--icon" fill="currentColor"><use xlink:href="#iconSearch"></use></svg>
     </div> 
 
     <transition name="fade">
@@ -179,7 +179,7 @@ export default {
   z-index: 5;
   min-height: $header-size;
   right: 0px;
-  background-color: white;
+  background-color: $background-color-secondary;
 
   @include mobile-only {
     position: fixed;
@@ -212,44 +212,42 @@ export default {
       white-space: nowrap;
       text-overflow: ellipsis;
       overflow: hidden;
+      color: $text-color-50;
 
       &.active, &:hover, &:active {
-        color: $c-dark;
+        color: $text-color;
-        border-bottom: 2px solid black;
+        border-bottom: 2px solid $text-color;
       }
     }
   }
 }
 
 .search {
-  height: $header-size-mobile;
+  height: $header-size;
   display: flex;
   position: fixed;
   flex-wrap: wrap;
   z-index: 5;
+  background-color: $background-color-secondary;
 
   // TODO check if this is for mobile
   width: calc(100% - 110px);
-  // width: 100%;
   top: 0;
   right: 55px;
 
   @include tablet-min{
     position: relative;
-    height: $header-size;
     width: 100%;
     right: 0px;
   }
 
   input {
-    // height: 75px;
     display: block;
     width: 100%;
     padding: 13px 20px 13px 45px;
     outline: none;
     border: 0;
     background-color: transparent;
-    color: $c-dark;
     font-weight: 300;
     font-size: 19px;
 
@@ -261,7 +259,7 @@ export default {
   &--icon{
     width: 20px;
     height: 20px;
-    fill: rgba($c-dark, 0.5);
+    fill: $text-color-50;
     transition: fill 0.5s ease;
     pointer-events: none;
     position: absolute;

src/components/Settings.vue

@@ -128,7 +128,7 @@ a {
    &__header {
       margin: 0;
       line-height: 16px;
-      color: $c-dark;
+      color: $text-color;
       font-weight: 300;
       margin-bottom: 20px;
       text-transform: uppercase;

src/components/Signin.vue

@@ -110,49 +110,27 @@ export default {
 
 <style lang="scss" scoped>
 @import "./src/scss/variables";
-@import "./src/scss/message";
 
-// DUPLICATE CODE
+section {
-.settings {
+  padding: 1.3rem;
-  padding: 35px;
 
-  &__header {
+  @include tablet-min {
+    padding: 4rem;
+  }
+
+  h1 {
     margin: 0;
     line-height: 16px;
-    color: $c-dark;
+    color: $text-color;
     font-weight: 300;
     margin-bottom: 20px;
     text-transform: uppercase;
   }
-}
-.profile__content {
-  padding: 35px;
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-}
 
-.form {
+  .link {
-  > div:last-child {
+    display: block;
+    width: max-content;
     margin-top: 1rem;
   }
-
-  &__group{
-     justify-content: unset;
-     &__input-icon {
-        margin-top: 8px;
-        height: 22px;
-        width: 22px;
-     }
-     &-input {
-        padding: 10px 5px 10px 45px;
-        height: 40px;
-        font-size: 17px;
-        width: 100%;
-        // @include desktop-min {
-        //    width: 400px;
-        // }
-     }
-  }
 }
 </style>

src/components/TorrentList.vue

@@ -58,7 +58,7 @@
         <div style="
           display: flex;
           justify-content: center;
-          margin: 1rem;
+          padding: 1rem;
         ">
           <seasonedButton @click="resetTorrentsAndToggleEditSearchQuery">Edit search query</seasonedButton>
         </div>
@@ -276,15 +276,15 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 @import "./src/scss/variables";
 .expanded {
   display: flex;
   margin: 0 1rem;
   max-width: 100%;
-  border-left: 1px solid rgba($c-dark, 0.5);
+  border-left: 1px solid $text-color;
-  border-right: 1px solid rgba($c-dark, 0.5);
+  border-right: 1px solid $text-color;
-  border-bottom: 1px solid rgba($c-dark, 0.5);
+  border-bottom: 1px solid $text-color;
 
   td {
     // border-left: 1px solid $c-dark;
@@ -299,6 +299,10 @@ export default {
 @import "./src/scss/media-queries";
 @import "./src/scss/elements";
 
+.container {
+  background-color: $background-color;
+}
+
 .torrentHeader {
   display: flex;
   align-items: center;
@@ -310,8 +314,9 @@ export default {
     font-weight: 400;
     text-transform: uppercase;
     font-size: 14px;
-    color: $c-green;
+    color: $green;
     text-align: center;
+    margin: 0;
 
     @include tablet-min {
       font-size: 16px
@@ -329,7 +334,7 @@ export default {
     height: 22px;
 
     &:hover {
-      fill: $c-green;
+      fill: $green;
       cursor: pointer;
     }
   }
@@ -345,9 +350,9 @@ table {
   display: flex;
   padding: 0;
   margin: 0 1rem;
-  border-left: 1px solid rgba($c-dark, 0.8);
+  border-left: 1px solid $text-color;
-  border-right: 1px solid rgba($c-dark, 0.8);
+  border-right: 1px solid $text-color;
-  border-bottom: 1px solid rgba($c-dark, 0.8);
+  border-bottom: 1px solid $text-color;
 
   th, td {
     display: flex;
@@ -359,6 +364,7 @@ table {
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
+    min-width: 75px;
   }
 
   th:first-child, td:first-child {
@@ -392,7 +398,7 @@ table {
 
 .table__content {
   td:not(:last-child) {
-    border-right: 1px solid rgba($c-dark, 0.8);
+    border-right: 1px solid $text-color;
   }
 }
 
@@ -404,12 +410,12 @@ table {
 }
 
 .table__header {
-  background-color: white;
+  color: $text-color;
-  color: $c-dark;
   text-transform: uppercase;
   cursor: pointer;
+  background-color: $background-color-secondary;
 
-  border-top: 1px solid rgba($c-dark, 0.8);
+  border-top: 1px solid $text-color;
   border-top-left-radius: 3px;
   border-top-right-radius: 3px;
 
@@ -435,7 +441,7 @@ table {
   }
 
   th:not(:last-child) {
-    border-right: 1px solid rgba($c-dark, 0.8);
+    border-right: 1px solid $text-color;
   }
 
 }
@@ -456,37 +462,43 @@ table {
 .download {
 
   &__icon {
-    fill: rgba($c-dark, 0.6);
+    fill: $text-color-70;
     height: 1.2rem;
 
     &:hover {
-      fill: $c-dark;
+      fill: $text-color;
       cursor: pointer;
     }
   }
 
   &.active &__icon {
-    fill: $c-green;
+    fill: $green;
   }
 }
 
-.torrentloader{
+.torrentloader {
+  width: 100%;
+  padding: 2rem 0;
+
+  i {
     animation: load 1s linear infinite;
-  border: 2px solid $c-dark;
+    border: 2px solid $text-color;
     border-radius: 50%;
     display: block;
     height: 30px;
     left: 50%;
-  margin: 2rem auto;
+    margin: 0 auto;
     width: 30px;
+
     &:after {
-    border: 5px solid $c-green;
+      border: 5px solid $green;
       border-radius: 50%;
       content: '';
       left: 10px;
       position: absolute;
       top: 16px;
     }
+  }
 }
 @keyframes load {
   100% { transform: rotate(360deg); }

src/components/ui/Loader.vue

@@ -17,23 +17,20 @@
   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;
       animation: load 1s linear infinite;
       height: 35px;
       width: 35px;
-&:after {
+      &:after {
-      border: 7px solid rgba($c-green, 0.9);
+        border: 7px solid rgba($green, 0.9);
         border-radius: 50%;
         content: '';
         left: 8px;

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;
+  color: $text-color;
-  background: transparent;
+  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;
+    background: $text-color;
-    color: $c-white;
+    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;
+    background-color: $background-color-secondary;
-    color: $c-dark;
+    color: $text-color;
     font-weight: 100;
     font-size: 1.2rem;
-    border: 1px solid rgba($c-dark, 0.5);
+    border: 1px solid $text-color-50;
-    margin-left: -2.2rem;
+    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 {
+    &.active > svg {
-      color: $c-green;
+      fill: $green;
-
-      > svg {
-        fill: $c-green;
-      }
     }
   }
 }

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;
+      background-color: $teal;
-      color: $c-green;
+      color: $green;
       cursor: pointer;
     }
+
     @include tablet-min {
       font-size: 16px;
     }

src/scss/variables.scss

@@ -1,12 +1,127 @@
 // Colors
-$c-green: #01d277;
+// @import "./media-queries";
-$c-dark: #081c24;
+@import "./src/scss/media-queries";
-$c-white: #ffffff;
-$c-light: #f8f8f8;
-$c-green-light: #dff0d9;
-$c-green-dark: #3e7549;
-$c-red-light: #f2dede;
-$c-red-dark: #b75b91;
 
-$header-size: 75px;
+:root {
-$header-size-mobile: 50px;
+  color-scheme: light;
+  --text-color: #081c24;
+  --text-color-70: rgba(8, 28, 36, 0.7);
+  --text-color-50: rgba(8, 28, 36, 0.5);
+  --text-color-5: rgba(8, 28, 36, 0.05);
+  --text-color-secondary: orange;
+  --background-color: #f8f8f8;
+  --background-color-secondary: #ffffff;
+  --background-95: rgba(255, 255, 255, 0.95);
+  --background-70: rgba(255, 255, 255, 0.7);
+  --background-40: rgba(255, 255, 255, 0.4);
+  --background-nav-logo: #081c24;
+  
+  --color-green: #01d277;
+  --color-teal: #091c24;
+  --color-black: #081c24;
+  --white: #fff;
+  --white-70: rgba(255,255,255,0.7);
+
+  --color-warning: #fff5cd;
+  --color-warning-text: #081c24;
+  --color-warning-light: rgb(255, 203, 5);
+  --color-success: rgba(0, 100, 66, 0.8);
+  --color-success-text: #fff;
+  --color-success-highlight: rgb(0, 100, 66);
+  --color-error: rgba(220, 48, 35, 0.8);
+  --color-error-highlight: #DC3023;
+  --color-error-text: #fff;
+
+  --header-size: 75px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    color-scheme: light dark;
+    --text-color: #fff;
+    --text-color-70: rgba(255, 255, 255, 0.7);
+    --text-color-50: rgba(255, 255, 255, 0.5);
+    --text-color-5: rgba(255, 255, 255, 0.05);
+    --text-color-secondary: orange;
+    --background-color: #1e1f22;
+    --background-color-secondary: #111111;
+    --background-95: rgba(30, 31, 34, 0.95);
+    --background-70: rgba(30, 31, 34, 0.8);
+    --background-40: rgba(30, 31, 34, 0.4);
+    --color-teal: #091c24;
+  }
+}
+
+@include mobile-only {
+  :root {
+    --header-size: 50px;
+  }
+}
+
+$header-size: var(--header-size);
+
+$dark: rgb(30, 31, 34);
+$green: var(--color-green);
+$teal: #091c24;
+$black: #081c24;
+$black-80: rgba(0,0,0,0.8);
+$white: #fff;
+$white-80: rgba(255,255,255,0.8);
+
+$text-color: var(--text-color) !default;
+$text-color-70: var(--text-color-70) !default;
+$text-color-50: var(--text-color-50) !default;
+$text-color-5: var(--text-color-5) !default;
+$text-color-secondary: var(--text-color-secondary) !default;
+$background-color: var(--background-color) !default;
+$background-color-secondary: var(--background-color-secondary) !default;
+$background-95: var(--background-95) !default;
+$background-70: var(--background-70) !default;
+$background-40: var(--background-40) !default;
+$background-dark-85: rgba($dark, 0.85) !default;
+$background-nav-logo: var(--background-nav-logo) !default;
+$color-warning: var(--color-warning) !default;
+$color-warning-text: var(--color-warning-text) !default;
+$color-warning-light: var(--color-warning-light) !default;
+$color-success: var(--color-success) !default;
+$color-success-highlight: var(--color-success-highlight) !default;
+$color-error: var(--color-error) !default;
+$color-error-highlight: var(--color-error-highlight) !default;
+$color-error-text: var(--color-error-text) !default;
+$color-error-light: var(--color-error) !default;
+
+.halloween {
+  --text-color: #6a318c;
+  --text-color-secondary: #fb5a33;
+  --background-color: #80c350;
+  --background-color-secondary: #ff9234;
+}
+
+.dark {
+  --text-color: #fff;
+  --text-color-70: rgba(255, 255, 255, 0.7);
+  --text-color-50: rgba(255, 255, 255, 0.5);
+  --text-color-5: rgba(255, 255, 255, 0.05);
+  --text-color-secondary: orange;
+  --background-color: #1e1f22;
+  --background-color-secondary: #111111;
+  --background-95: rgba(30, 31, 34, 0.95);
+  --background-70: rgba(30, 31, 34, 0.7);
+  --color-teal: #091c24;
+}
+
+.light {
+  --text-color: #081c24;
+  --text-color-70: rgba(8, 28, 36, 0.7);
+  --text-color-50: rgba(8, 28, 36, 0.5);
+  --text-color-5: rgba(8, 28, 36, 0.05);
+  --text-color-inverted: #fff;
+  --text-color-secondary: orange;
+  --background-color: #f8f8f8;
+  --background-color-secondary: #ffffff;
+  --background-95: rgba(255, 255, 255, 0.95);
+  --background-70: rgba(255, 255, 255, 0.7);
+  --background-nav-logo: #081c24;
+  --color-green: #01d277;
+  --color-teal: #091c24;
+}