diff --git a/scss/import/_colors.scss b/scss/import/_colors.scss
index a63612b..4b615d6 100644
--- a/scss/import/_colors.scss
+++ b/scss/import/_colors.scss
@@ -1,9 +1,11 @@
 $green: rgb(100, 200, 130);
 $green-dark: rgb(80, 180, 110);
+$green-light: rgb(100, 220, 150);
 $red: rgb(255, 130, 130);
-$red-dark: rgb(255, 110, 110);
+$red-dark: rgb(235, 110, 110);
+$red-light: rgb(255, 150, 150);
 $white: rgb(245, 245, 255);
-$white-dark: rgb(225, 225, 235);
+$white-dark: rgb(215, 215, 225);
 $white-light: rgb(255, 255, 255);
 $white-disabled: rgb(150, 150, 160);
 
@@ -12,3 +14,4 @@ $bg40: rgb(40, 40, 60);
 $bg50: rgb(50, 50, 75);
 $bg60: rgb(60, 60, 90);
 $bg70: rgb(70, 70, 105);
+$bg80: rgb(80, 80, 120);
diff --git a/scss/import/_footer.scss b/scss/import/_footer.scss
index b78363f..e19c2fc 100644
--- a/scss/import/_footer.scss
+++ b/scss/import/_footer.scss
@@ -1,7 +1,7 @@
 footer {
-  background: rgb(30, 30, 45);
-  border-top: 1px solid rgb(40, 40, 60);
-  color: rgb(215, 215, 225);
+  background: $bg30;
+  border-top: 1px solid $bg40;
+  color: $white-dark;
   text-transform: lowercase;
   .ui.container {
     display: flex;
@@ -11,7 +11,7 @@ footer {
     .links {
       margin-left: auto;
       a {
-        color: rgb(215, 215, 225);
+        color: $white-dark;
         &:hover {
           text-decoration: underline;
         }
diff --git a/scss/import/_main.scss b/scss/import/_main.scss
index 2f4cbdc..dcf5639 100644
--- a/scss/import/_main.scss
+++ b/scss/import/_main.scss
@@ -1,22 +1,22 @@
 * {
-  scrollbar-color: rgb(255, 130, 130) rgb(60, 60, 90);
+  scrollbar-color: $red $bg60;
   scrollbar-width: thin;
   &::selection {
-    background: rgb(245, 245, 255);
+    background: $white;
   }
 }
 
 body {
-  background: rgb(40, 40, 60);
-  color: rgb(245, 245, 255);
+  background: $bg40;
+  color: $white;
   font-family: $font-family;
 }
 
 a {
-  color: rgb(255, 255, 255);
+  color: $white-light;
   transition: color 0.2s;
   &:hover {
-    color: rgb(255, 130, 130);
+    color: $red;
   }
 }
 
diff --git a/scss/import/_nav.scss b/scss/import/_nav.scss
index 8531ecb..36b353d 100644
--- a/scss/import/_nav.scss
+++ b/scss/import/_nav.scss
@@ -1,5 +1,5 @@
 .ui.main.menu {
-  background: rgb(60, 60, 90);
+  background: $bg60;
   border-bottom: 0;
   font-size: 15px;
   min-height: 64px;
@@ -8,7 +8,7 @@
     width: 1127px ;
     padding: 0;
     .item {
-      color: rgb(245, 245, 255);
+      color: $white;
       &.brand {
         margin: 0 .5rem 0 0;
         .mini.image {
@@ -34,10 +34,10 @@
         padding: 24px;
         transition: background .2s, color .2s;
         &:hover {
-          background: rgb(50, 50, 75);
+          background: $bg50;
         }
         &.active {
-          background: rgb(50, 50, 75);
+          background: $bg50;
         }
       }
     }
@@ -64,7 +64,7 @@
   .link.item:hover, 
   .active.item:hover, 
   a.item:hover {
-    color: #ffffff;
+    color: $white-light;
   }
 }
 
diff --git a/scss/import/explore.scss b/scss/import/explore.scss
index c7ff6f7..a0e0ac3 100644
--- a/scss/import/explore.scss
+++ b/scss/import/explore.scss
@@ -3,21 +3,21 @@
 
 .explore {
   .secondary.menu {
-    background-color: rgb(70, 70, 105) !important;
+    background-color: $bg70 !important;
     border-radius: 0;
     .item {
-      color: rgb(215, 215, 225);
+      color: $white-dark;
       &:hover {
-        color: rgb(255, 255, 255) !important;
+        color: $white-light !important;
       }
       &.active {
-        color: rgb(245, 245, 255) !important;
+        color: $white !important;
         &:hover {
-          color: rgb(255, 255, 255);
+          color: $white-light;
         }
       }
       .label {
-        background: rgb(60, 60, 90);
+        background: $bg60;
       }
     }
   }
@@ -30,58 +30,58 @@
     form.form {
       .input {
         input {
-          background: rgb(40, 40, 60);
-          border: 2px solid rgb(60, 60, 90);
-          color: rgb(245, 245, 255);
+          background: $bg40;
+          border: 2px solid $bg60;
+          color: $white;
           &:focus {
-            background: rgb(50, 50, 75);
-            border: 2px solid rgb(60, 60, 90);
-            color: rgb(255, 255, 255);
+            background: $bg50;
+            border: 2px solid $bg60;
+            color: $white-light;
           }
         }
         .button {
-          background: rgb(60, 60, 90);
+          background: $bg60;
           border: 0;
           &:hover {
-            background: rgb(50, 50, 75);
+            background: $bg50;
           }
         }
       }
     }
     .divider {
-      border-bottom: 1px solid rgb(60, 60, 90);
+      border-bottom: 1px solid $bg60;
     }
     .repository.list {
       .item {
         &:not(:first-child) {
-          border-top: 1px solid rgb(60, 60, 90);
+          border-top: 1px solid $bg60;
         }
         .header {
           a.name {
             i.archive.icon {
-              color: rgb(215, 215, 225) !important;
+              color: $white-dark !important;
             }
           }
           .metas {
             span {
-              color: rgb(215, 215, 225) !important;
+              color: $white-dark !important;
             }
           }
         }
         .description {
           p {
-            color: rgb(245, 245, 255);
+            color: $white;
             &.time {
-              color: rgb(215, 215, 225);
+              color: $white-dark;
             }
           }
           .tags {
             a .label {
-              background: rgb(60, 60, 90);
-              color: rgb(245, 245, 255);
+              background: $bg60;
+              color: $white;
               &:hover {
-                background: rgb(70, 70, 105);
-                color: rgb(255, 255, 255);
+                background: $bg70;
+                color: $white-light;
               }
             }
           }
@@ -98,10 +98,10 @@
     .user.list {
       .content {
         .header {
-          color: rgb(245, 245, 255);
+          color: $white;
         }
         .description {
-          color: rgb(245, 245, 255);
+          color: $white;
         }
       }
     }
diff --git a/scss/import/repository.scss b/scss/import/repository.scss
index d654b02..200a9a1 100644
--- a/scss/import/repository.scss
+++ b/scss/import/repository.scss
@@ -3,17 +3,17 @@
 
 .repository {
   .header-wrapper {
-    background-color: rgb(70, 70, 105);
+    background-color: $bg70;
     .repo-header {
       .repo-title {
         a {
-          color: rgb(245, 245, 255);
+          color: $white;
           &:hover {
-            color: rgb(255, 130, 130);
+            color: $red;
           }
         }
         .divider {
-          color: rgb(215, 215, 225);
+          color: $white-dark;
         }
         .svg.octicon-repo {
           display: none;
@@ -24,24 +24,24 @@
           display: none;
         }
         .button {
-          background: rgb(60, 60, 90);
+          background: $bg60;
           box-shadow: none;
-          color: rgb(245, 245, 255);
+          color: $white;
           transition: background .2s, color .2s;
           font-family: $font-family;
           &:hover {
-            background: rgb(50, 50, 75);
-            color: rgb(255, 255, 255);
+            background: $bg50;
+            color: $white-light;
           }
         }
         .label {
-          background: rgb(50, 50, 75);
+          background: $bg50;
           box-shadow: none;
-          color: rgb(245, 245, 255);
+          color: $white;
           transition: background .2s, color .2s;
           &:hover {
-            background: rgb(40, 40, 60);
-            color: rgb(255, 255, 255);
+            background: $bg40;
+            color: $white-light;
           }
         }
       }
@@ -52,18 +52,18 @@
           .item {
             border-bottom: 2px solid transparent;
             border-radius: $border-radius $border-radius 0 0;
-            color: rgb(215, 215, 225);
+            color: $white-dark;
             transition: background .2s, color .2s;
             font-family: $font-family;
             &:hover {
-              background: rgb(60, 60, 90) !important;
-              color: rgb(255, 255, 255);
+              background: $bg60 !important;
+              color: $white-light;
             }
             &.active {
               background: transparent;
               border: 0;
               border-bottom: 2px solid;
-              color: rgb(245, 245, 255);
+              color: $white;
             }
             svg {
               @if $nojavascript == true {
@@ -71,8 +71,8 @@
               }
             }
             span.label {
-              background: rgb(245, 245, 255);
-              color: rgb(60, 60, 90);
+              background: $white;
+              color: $bg60;
             }
           }
         }
@@ -82,21 +82,21 @@
   }
   .container {
     .repo-description {
-      color: rgb(245, 245, 255);
+      color: $white;
       a {
-        color: rgb(215, 215, 225);
+        color: $white-dark;
         &:hover {
-          color: rgb(255, 130, 130);
+          color: $red;
         }
       }
     }
     #repo-topics {
       .repo-topic.label {
-        background: rgb(60, 60, 90);
-        color: rgb(245, 245, 255);
+        background: $bg60;
+        color: $white;
         &:hover {
-          background: rgb(70, 70, 105);
-          color: rgb(255, 255, 255);
+          background: $bg70;
+          color: $white;
         }
       }
     }
@@ -115,7 +115,7 @@
         overflow: auto;
       }
       .repository-menu {
-        background: rgb(60, 60, 90) !important;
+        background: $bg60 !important;
         border-radius: $border-radius;
         padding: 0;
         .item {
@@ -126,17 +126,17 @@
           padding: 0;
           transition: background .2s;
           &:hover {
-            background: rgb(50, 50, 75);
+            background: $bg50;
           }
           &.active {
             background: initial;
-            border-bottom: 2px solid rgb(255, 255, 255);
+            border-bottom: 2px solid $white;
             &:hover {
-              background: rgb(50, 50, 75);
+              background: $bg50;
             }
           }
           a {
-            color: rgb(245, 245, 255) !important;
+            color: $white !important;
             display: block;
             padding: 8px;
             svg {
@@ -148,7 +148,7 @@
         }
       }
       .language-stats-details {
-        background: rgb(50, 50, 75);
+        background: $bg50;
         @if $nojavascript == true {
           padding: 0;
         }
@@ -160,7 +160,7 @@
             }
             &:first-of-type {
               @if $nojavascript == true {
-                border-right: 1px dashed rgb(70, 70, 105);
+                border-right: 1px dashed $bg70;
               }
             }
             .color-icon {
@@ -169,7 +169,7 @@
               }
             }
             span {
-              color: rgb(245, 245, 255);
+              color: $white;
               @if $nojavascript == true {
                 display: flex;
                 margin: 0 auto;
@@ -187,7 +187,7 @@
         }
       }
       .language-stats {
-        background: rgb(60, 60, 90);
+        background: $bg60;
         @if $nojavascript == true {
           display: none;
         }
@@ -202,122 +202,122 @@
         }
         .blue.buttons {
           .button {
-            background: rgb(60, 60, 90);
+            background: $bg60;
             box-shadow: none;
-            color: rgb(245, 245, 255);
+            color: $white;
             &:hover {
-              background: rgb(50, 50, 75);
+              background: $bg50;
             }
           }
         }
         #clone-panel {
           #repo-clone-https, 
           #repo-clone-ssh {
-            color: rgb(245, 245, 255);
+            color: $white;
             box-shadow: none !important;
             font-family: $font-family;
             &:not(.blue) {
-              background: rgb(60, 60, 90);
+              background: $bg60;
               &:hover {
-                background: rgb(50, 50, 75);
+                background: $bg50;
               }
             }
             &.blue {
-              box-shadow: inset 0 0 0 1px rgb(255, 130, 130) !important;
-              color: rgb(255, 130, 130) !important;
+              box-shadow: inset 0 0 0 1px $red !important;
+              color: $red !important;
             }
           }
           input#repo-clone-url {
-            background: rgb(40, 40, 60);
-            border: 2px solid rgb(60, 60, 90);
-            color: rgb(245, 245, 255);
+            background: $bg40;
+            border: 2px solid $bg60;
+            color: $white;
             font-family: $font-family;
             &:focus {
-              background: rgb(50, 50, 75);
-              border: 2px solid rgb(60, 60, 90);
-              color: rgb(255, 255, 255);
+              background: $bg50;
+              border: 2px solid $bg60;
+              color: $white;
             }
           }
         }
         #clipboard-btn {
-          background: rgb(60, 60, 90);
+          background: $bg60;
           @if $nojavascript == true {
             display: none;
           }
           &:hover {
-            background: rgb(50, 50, 75);
+            background: $bg50;
           }
           .svg {
             fill: rgb(245, 245, 245);
           }
         }
         div.dropdown.button {
-          background: rgb(60, 60, 90);
+          background: $bg60;
           &:hover {
-            background: rgb(50, 50, 75);
+            background: $bg50;
             .menu {
-              background: rgb(60, 60, 90);
-              border: 1px solid rgb(50, 50, 75);
+              background: $bg60;
+              border: 1px solid $bg50;
               box-shadow: none;
               @if $nojavascript == true {
                 display: block !important;
               }
               .item {
-                color: rgb(245, 245, 255) !important;
+                color: $white !important;
                 &:hover {
-                  background: rgb(50, 50, 75);
+                  background: $bg50;
                 }
               }
             }
           }
           .download.icon {
-            color: rgb(245, 245, 255);
+            color: $white;
           }
         }
       }
     }
     .header { 
-      background: rgb(60, 60, 90);
+      background: $bg60;
       border: 0;
-      color: rgb(245, 245, 255);
+      color: $white;
     }
     .table {
-      background: rgb(30, 30, 45);
+      background: $bg30;
       border: 0;
       border-radius: 5px;
-      color: rgb(245, 245, 255);
+      color: $white;
       thead {
         tr {
           &:hover {
             background: transparent !important;
           }
           th {
-            background: rgb(50, 50, 75);
-            color: rgb(245, 245, 255);
+            background: $bg50;
+            color: $white;
             .time-since {
-              color: rgb(245, 245, 255);
+              color: $white;
             }
           }
         }
       }
       > thead > tr > th {
-        background: rgb(50, 50, 75);
+        background: $bg50;
       }
       tbody {
         tr {
-          background: rgb(30, 30, 45);
+          background: $bg30;
           border: 0;
           &:hover {
-            background-color: rgb(40, 40, 60) !important;
+            background-color: $bg40 !important;
           }
           .svg {
             &.octicon-file-directory, 
             &.octicon-file-submodule {
-              fill: rgb(255, 130, 130);
+              fill: $red;
               @if $nojavascript == true {
-                background: rgb(255, 130, 130);
+                background: $red;
                 border-radius: 0 1px 2px 2px;
-                box-shadow: -4px -7px 0px -4px rgb(255, 130, 130);
+                box-shadow: -4px -7px 0px -4px $red;
                 height: 10px;
                 margin-left: 5px !important;
                 margin-top: 4px;
@@ -325,9 +325,9 @@
               }
             }
             &.octicon-file {
-              fill: rgb(215, 215, 225);
+              fill: $white-dark;
               @if $nojavascript == true {
-                border: 1px solid rgb(215, 215, 225);
+                border: 1px solid $white-dark;
                 border-radius: 0 5px 0 0;
                 height: 13px;
                 margin-left: 7px !important;
@@ -337,20 +337,20 @@
             }
           }
           .jumpable-path {
-            color: rgb(215, 215, 225) !important;
+            color: $white-dark !important;
           }
         }
       }
       .commit-list {
         th {
           .sha.label {
-            background: rgb(70, 70, 105);
+            background: $bg70;
             border: 0 !important;
-            color: rgb(245, 245, 255);
+            color: $white;
             transition: background .2s, color .2s;
             &:hover {
-              background: rgb(60, 60, 90);
-              color: rgb(255, 255, 255);
+              background: $bg60;
+              color: $white;
             }
           }
           .commit-summary {
@@ -364,17 +364,17 @@
       }
     }
     .non-diff-file-content {
-      color: rgb(245, 245, 255);
+      color: $white;
       .header {
-        background: rgb(50, 50, 75);
+        background: $bg50;
         border: 0;
-        color: rgb(245, 245, 255);
+        color: $white;
         font-family: $font-family;
       }
       .table {
-        background: rgb(30, 30, 45);
+        background: $bg30;
         border: 0;
-        color: rgb(245, 245, 255);
+        color: $white;
       }
     }
   }
@@ -390,13 +390,13 @@
           background: transparent;
           border: 0;
           .item {
-            background: rgb(60, 60, 90);
-            color: rgb(245, 245, 255);
+            background: $bg60;
+            color: $white;
             &:first-child {
               border-radius: $border-radius 0 0 $border-radius;
             }
             &:hover {
-              background: rgb(50, 50, 75);
+              background: $bg50;
             }
             &:last-child {
               border-radius: 0 $border-radius $border-radius 0;
@@ -406,30 +406,30 @@
         form.form {
           .input {
             input {
-              background: rgb(40, 40, 60);
-              border: 2px solid rgb(60, 60, 90);
-              color: rgb(245, 245, 255);
+              background: $bg40;
+              border: 2px solid $bg60;
+              color: $white;
               &:focus {
-                background: rgb(50, 50, 75);
-                border: 2px solid rgb(60, 60, 90);
-                color: rgb(255, 255, 255);
+                background: $bg50;
+                border: 2px solid $bg60;
+                color: $white;
               }
             }
             .button {
-              background: rgb(60, 60, 90);
+              background: $bg60;
               border: 0;
               &:hover {
-                background: rgb(50, 50, 75);
+                background: $bg50;
               }
             }
           }
         }
         .green.button {
-          background: rgb(100, 200, 130);
+          background: $green;
           box-shadow: none;
-          color: rgb(255, 255, 255);
+          color: $white;
           &:hover {
-            background: rgb(80, 180, 110);
+            background: $green-dark;
           }
           &[href*="issues/new"] {
             @if $type == frontend {
@@ -441,24 +441,24 @@
     }
     .ui.divider {
       border: 0;
-      border-top: 1px solid rgb(60, 60, 90);
+      border-top: 1px solid $bg60;
     }
     .grid {
       .column {
         .basic.button {
           &:not(.active) {
-            background: rgb(60, 60, 90);
-            color: rgb(245, 245, 255);
+            background: $bg60;
+            color: $white;
             &:hover {
-              background: rgb(50, 50, 75);
+              background: $bg50;
             }
           }
           &.red {
-            background: rgb(255, 130, 130);
+            background: $red;
             box-shadow: none;
-            color: rgb(255, 255, 255);
+            color: $white;
             &:hover {
-              background: rgb(235, 110, 110);
+              background: $red-dark;
             }
           }
           .svg {
@@ -469,13 +469,13 @@
         }
         .filter.menu {
           .item {
-            background: rgb(60, 60, 90);
-            color: rgb(245, 245, 255);
+            background: $bg60;
+            color: $white;
             &:first-of-type {
               margin-left: auto;
             }
             &:hover {
-              background: rgb(50, 50, 75);
+              background: $bg50;
               .menu {
                 @if $nojavascript == true {
                   display: block;
@@ -504,14 +504,14 @@
               }
             }
             .menu {
-              background: rgb(60, 60, 90);
-              border: 1px solid rgb(50, 50, 75);
+              background: $bg60;
+              border: 1px solid $bg50;
               box-shadow: none;
               margin-top: 0;
               .item {
-                color: rgb(245, 245, 255) !important;
+                color: $white !important;
                 &:hover {
-                  background: rgb(50, 50, 75);
+                  background: $bg50;
                 }
               }
             }
@@ -521,26 +521,26 @@
     }
     .issue.list {
       .item {
-        border-bottom: 1px dashed rgb(70, 70, 105);
+        border-bottom: 1px dashed $bg70;
         .label {
-          background: rgb(245, 245, 255);
-          color: rgb(60, 60, 90);
+          background: $white;
+          color: $bg60;
         }
         .title {
           border-bottom: 1px solid transparent;
-          color: rgb(245, 245, 255);
+          color: $white;
           transition: border .2s, color .2s;
           &:hover {
-            border-bottom: 1px solid rgb(255, 130, 130);
-            color: rgb(255, 130, 130);
+            border-bottom: 1px solid $red;
+            color: $red;
           }
         }
         .desc {
-          color: rgb(215, 215, 225);
+          color: $white-dark;
           a.milestone {
-            color: rgb(255, 255, 255) !important;
+            color: $white !important;
             &:hover {
-              color: rgb(255, 130, 130) !important;
+              color: $red !important;
             }
           }
         }
@@ -560,18 +560,18 @@
             .grid {
               h1 {
                 .index {
-                  color: rgb(215, 215, 225);
+                  color: $white-dark;
                 }
                 #issue-title {
-                  color: rgb(255, 255, 255);
+                  color: $white;
                 }
                 #edit-title-input {
                   @if $nojavascript == true {
                     display: none;
                   }
                   input {
-                    background: rgb(50, 50, 75);
-                    color: rgb(255, 255, 255);
+                    background: $bg50;
+                    color: $white;
                   }
                 }
               }
@@ -579,14 +579,14 @@
                 .edit-zone {
                   .in-edit.button {
                     box-shadow: none !important;
-                    color: rgb(255, 255, 255) !important;
+                    color: $white !important;
                   }
                 }
               }
             }
             .label {
               &.green {
-                background: rgb(100, 200, 130);
+                background: $green;
                 .svg {
                   @if $nojavascript == true {
                     display: none;
@@ -594,7 +594,7 @@
                 }
               }
               &.red {
-                background: rgb(255, 130, 130);
+                background: $red;
                 .svg {
                   @if $nojavascript == true {
                     display: none;
@@ -606,7 +606,7 @@
           &.comment-list {
             .timeline {
               &::before {
-                background: rgb(60, 60, 90);
+                background: $bg60;
                 @if $nologin == true {
                   margin-bottom: 40px;
                 }
@@ -614,19 +614,19 @@
               .timeline-item {
                 .content {
                   .header {
-                    background: rgb(60, 60, 90);
+                    background: $bg60;
                     &::after {
-                      border-right-color: rgb(60, 60, 90);
+                      border-right-color: $bg60;
                     }
                     &::before {
                       border-right-color: transparent;
                     }
                     .text.grey {
-                      color: rgb(215, 215, 225) !important;
+                      color: $white-dark !important;
                       a {
-                        color: rgb(255, 255, 255) !important;
+                        color: $white !important;
                         &:hover {
-                          color: rgb(255, 130, 130) !important;
+                          color: $red !important;
                         }
                       }
                     }
@@ -634,29 +634,29 @@
                       .item.action {
                         a.add-reaction,
                         a.context-menu {
-                          color: rgb(255, 255, 255);
+                          color: $white;
                         }
                         .menu {
                           &::after {
-                            background: rgb(60, 60, 90);
+                            background: $bg60;
                           }
-                          background: rgb(60, 60, 90);
+                          background: $bg60;
                           .header {
-                            color: rgb(255, 255, 255);
+                            color: $white;
                           }
                           .divider {
-                            border-color: rgb(80, 80, 120);
+                            border-color: $bg80;
                           }
                           .item.reaction, 
                           .item.context {
-                            color: rgb(255, 255, 255);
+                            color: $white;
                           }
                         }
                       }
                     }
                   }
                   .attached.segment {
-                    background: rgb(50, 50, 75);
+                    background: $bg50;
                     border: 0;
                     .render-content {
                       pre {
@@ -668,18 +668,18 @@
                 }
                 &.event {
                   .badge {
-                    background: rgb(60, 60, 90);
-                    border-color: rgb(60, 60, 90);
+                    background: $bg60;
+                    border-color: $bg60;
                     .svg {
-                      fill: rgb(255, 255, 255);
+                      fill: $white;
                     }
                   }
                   .text.grey {
-                    color: rgb(215, 215, 225) !important;
+                    color: $white-dark !important;
                     a {
-                      color: rgb(255, 255, 255) !important;
+                      color: $white !important;
                       &:hover {
-                        color: rgb(255, 130, 130) !important;
+                        color: $red !important;
                       }
                     }
                   }
@@ -688,66 +688,66 @@
                   .content {
                     form.form {
                       &::after {
-                      border-right-color: rgb(50, 50, 75);
+                      border-right-color: $bg50;
                       }
                       &::before {
                         border-right-color: transparent;
                       }
                       .tabular.menu {
-                        border-color: rgb(60, 60, 90);
+                        border-color: $bg60;
                         .item {
                           border: 0;
-                          color: rgb(255, 255, 255);
+                          color: $white;
                           &.active {
-                            background: rgb(70, 70, 105);
-                            color: rgb(255, 255, 255);
+                            background: $bg70;
+                            color: $white;
                           }
                         }
                       }
                       .field { // Editor
                         .tab.active {
                           textarea.edit_area {
-                            background: rgb(40, 40, 60);
-                            color: rgb(255, 255, 255);
+                            background: $bg40;
+                            color: $white;
                           }
                           .editor-toolbar {
                             border: 0;
                             a {
                               &::after, 
                               &::before {
-                                color: rgb(255, 255, 255);
+                                color: $white;
                               }
                               &:hover {
-                                background: rgb(70, 70, 105);
+                                background: $bg70;
                                 border-color: transparent;
                               }
                             }
                             i.separator {
-                              border-color: rgb(70, 70, 105);
+                              border-color: $bg70;
                             }
                           }
                           .CodeMirror {
-                            background: rgb(40, 40, 60);
+                            background: $bg40;
                             border: 0;
-                            color: rgb(255, 255, 255);
+                            color: $white;
                           }
                           .editor-statusbar {
-                            color: rgb(215, 215, 225);
+                            color: $white-dark;
                           }
                         }
                       }
                       .field { // "Drop files or click here to upload"
                         .dropzone {
-                          background: rgb(40, 40, 60);
-                          border-color: rgb(255, 130, 130);
+                          background: $bg40;
+                          border-color: $red;
                           .dz-default, 
                           .dz-message {
                             .dz-button {
-                              color: rgb(255, 255, 255);
+                              color: $white;
                             }
                           }
                           .dz-preview {
-                            background: rgb(50, 50, 75);
+                            background: $bg50;
                             border-radius: 4px;
                             .dz-image {
                               img {
@@ -755,10 +755,10 @@
                               }
                             }
                             .dz-details {
-                              color: rgb(255, 255, 255);
+                              color: $white;
                               .dz-size {
                                 span {
-                                  background: rgb(70, 70, 105);
+                                  background: $bg70;
                                   padding: 4px 8px;
                                   border-radius: 8px;
                                 }
@@ -767,26 +767,26 @@
                                 border-radius: 4px;
                                 padding: 4px 8px;
                                 span {
-                                  background: rgb(70, 70, 105);
+                                  background: $bg70;
                                   border: 0;
                                   border-radius: 8px;
                                   padding: 4px 8px;
                                   &:hover {
-                                    background: rgb(60, 60, 90);
+                                    background: $bg60;
                                   }
                                 }
                               }
                             }
                             .dz-progress {
                               .dz-upload {
-                                background: rgb(40, 40, 60);
+                                background: $bg40;
                               }
                             }
                             .dz-success-mark {
                               svg {
                                 g {
                                   path {
-                                    fill: rgb(100, 200, 130);
+                                    fill: $green;
                                   }
                                 }
                               }
@@ -796,19 +796,19 @@
                                 g {
                                   g {
                                     path {
-                                      fill: rgb(100, 200, 130);
+                                      fill: $green;
                                     }
                                   }
                                 }
                               }
                             }
                             .dz-remove {
-                              background: rgb(60, 60, 90);
+                              background: $bg60;
                               padding: 8px 0 4px 0;
                               transition: background .2s;
                               &:hover {
-                                background: rgb(255, 130, 130);
-                                color: rgb(255, 255, 255);
+                                background: $red;
+                                color: $white;
                                 text-decoration: none;
                               }
                             }
@@ -828,7 +828,7 @@
           }
           & {
             .metas {
-              background: rgb(50, 50, 75);
+              background: $bg50;
               .disabled {
                 &.select-label,
                 &.select-milestone, 
@@ -843,10 +843,10 @@
                 div {
                   form {
                     button {
-                      background: rgb(70, 70, 105);
-                      color: rgb(255, 255, 255);
+                      background: $bg70;
+                      color: $white;
                       &:hover {
-                        background: rgb(60, 60, 90);
+                        background: $bg60;
                       }
                     }
                   }
@@ -856,10 +856,10 @@
                 div {
                   .start-add {
                     button.start {
-                      background: rgb(70, 70, 105);
-                      color: rgb(255, 255, 255);
+                      background: $bg70;
+                      color: $white;
                       &:hover {
-                        background: rgb(60, 60, 90);
+                        background: $bg60;
                       }
                     }
                   }
@@ -874,10 +874,10 @@
                 #deadlineForm {
                   form#update-issue-deadline-form {
                     input#deadlineDate {
-                      background: rgb(40, 40, 60);
-                      color: rgb(255, 255, 255);
+                      background: $bg40;
+                      color: $white;
                       &:focus {
-                        border-color: rgb(70, 70, 105);
+                        border-color: $bg70;
                       }
                     }
                   }
@@ -888,21 +888,21 @@
                   form#addDependencyForm {
                     .action.input {
                       #new-dependency-drop-list {
-                        background: rgb(40, 40, 60);
-                        color: rgb(255, 255, 255);
+                        background: $bg40;
+                        color: $white;
                         &.active {
-                          border-color: rgb(70, 70, 105);
+                          border-color: $bg70;
                         }
                         .text {
-                          color: rgb(215, 215, 225);
+                          color: $white-dark;
                         }
                         .menu {
-                          background: rgb(50, 50, 75) none repeat scroll 0% 0%;
-                          border-color: rgb(70, 70, 105);
+                          background: $bg50 none repeat scroll 0% 0%;
+                          border-color: $bg70;
                           box-shadow: none;
                           .item {
-                            border-color: rgb(70, 70, 105);
-                            color: rgb(255, 255, 255);
+                            border-color: $bg70;
+                            color: $white;
                           }
                         }
                       }
@@ -913,10 +913,10 @@
               .watching { // "Lock conversation"
                 div {
                   button.show-modal {
-                    background: rgb(70, 70, 105);
-                    color: rgb(255, 255, 255);
+                    background: $bg70;
+                    color: $white;
                     &:hover {
-                      background: rgb(60, 60, 90);
+                      background: $bg60;
                     }
                   }
                 }
@@ -938,7 +938,7 @@
       font-family: $font-family;
     }
     #release-list {
-      border-top: 1px solid rgb(60, 60, 90);
+      border-top: 1px solid $bg60;
     }
   }
 }
@@ -959,31 +959,31 @@
           }
         }
         .button {
-          background: rgb(60, 60, 90);
-          color: rgb(245, 245, 255);
+          background: $bg60;
+          color: $white;
           font-family: $font-family;
           &:hover {
-            background: rgb(50, 50, 75);
+            background: $bg50;
           }
         }
         .menu {
-          background: rgb(60, 60, 90);
-          border: 1px solid rgb(50, 50, 75);
+          background: $bg60;
+          border: 1px solid $bg50;
           box-shadow: none;
           .item {
-            color: rgb(245, 245, 255);
+            color: $white;
             &:hover {
-              background: rgb(50, 50, 75);
+              background: $bg50;
             }
           }
         }
       }
     }
     .segment {
-      background: rgb(30, 30, 45);
+      background: $bg30;
       border: 0;
       h4.header { // »There has not been any commit activity in this period.«
-        background: rgb(30, 30, 45);
+        background: $bg30;
       }
       #app {
         @if $nojavascript == true {
@@ -991,7 +991,7 @@
         }
       }
       .text {
-        background: rgb(30, 30, 45);
+        background: $bg30;
         .green.text {
           color: $green !important;
           .svg.octicon-issue-opened {
@@ -1012,7 +1012,7 @@
       display: flex;
       &::after, 
       &::before {
-        background: rgb(60, 60, 90);
+        background: $bg60;
         height: 1px;
         top: 7px;
       }
@@ -1050,10 +1050,10 @@
       }
       .item {
         .button {
-          background: rgb(60, 60, 90);
-          color: rgb(245, 245, 255);
+          background: $bg60;
+          color: $white;
           &:hover {
-            background: rgb(50, 50, 75);
+            background: $bg50;
           }
           .text {
             @if $nojavascript == true {
@@ -1067,18 +1067,18 @@
       form {
         .search.input {
           input {
-            background: rgb(40, 40, 60);
+            background: $bg40;
             border: 0;
-            color: rgb(245, 245, 255);
+            color: $white;
             &:focus {
-              background: rgb(50, 50, 75);
-              color: rgb(255, 255, 255);
+              background: $bg50;
+              color: $white;
             }
           }
         }
         .checkbox {
           label {
-            color: rgb(245, 245, 255);
+            color: $white;
           }
         }
       }
@@ -1088,13 +1088,13 @@
         .commit-list {
           tr {
             .sha.label {
-              background: rgb(70, 70, 105);
+              background: $bg70;
               border: 0 !important;
-              color: rgb(245, 245, 255);
+              color: $white;
               transition: background .2s, color .2s;
               &:hover {
-                background: rgb(60, 60, 90);
-                color: rgb(255, 255, 255);
+                background: $bg60;
+                color: $white;
               }
             }
             .message {
@@ -1119,18 +1119,18 @@
       tbody {
         tr {
           &:hover {
-            background: rgb(30, 30, 45);
+            background: $bg30;
           }
           td {
             .info {
-              color: rgb(245, 245, 255);
+              color: $white;
               .svg {
-                fill: rgb(245, 245, 255);
+                fill: $white;
               }
             }
             .dropdown.button {
               .download.icon {
-                color: rgb(245, 245, 255);
+                color: $white;
               }
             }
           }
@@ -1145,51 +1145,51 @@
 .repository.diff {
   .container {
     .top.info {
-      background: rgb(60, 60, 90) !important;
+      background: $bg60 !important;
       border: 0;
-      color: rgb(245, 245, 255);
+      color: $white;
       .button {
-        background: rgb(80, 80, 120);
+        background: $bg80;
         box-shadow: none;
-        color: rgb(245, 245, 255);
+        color: $white;
         &:hover {
-          background: rgb(70, 70, 105);
+          background: $bg70;
         }
       }
       .text.grey {
-        color: rgb(215, 215, 225) !important;
+        color: $white-dark !important;
       }
     }
     .info {
-      background: rgb(50, 50, 75);
+      background: $bg50;
       border: 0;
-      color: rgb(245, 245, 255);
+      color: $white;
       .text.grey {
         .time-since {
-          color: rgb(215, 215, 225) !important;
+          color: $white-dark !important;
         }
       }
       .sha.label {
-        background: rgb(70, 70, 105);
+        background: $bg70;
         border: 0 !important;
-        color: rgb(245, 245, 255);
+        color: $white;
         transition: background .2s, color .2s;
         &:hover {
-          background: rgb(60, 60, 90);
-          color: rgb(255, 255, 255);
+          background: $bg60;
+          color: $white;
         }
       }
     }
     div {
       .diff-detail-box {
-        background: rgb(50, 50, 75);
-        color: rgb(245, 245, 255);
+        background: $bg50;
+        color: $white;
         padding: 10px;
         .button {
-          background: rgb(70, 70, 105);
-          color: rgb(245, 245, 255);
+          background: $bg70;
+          color: $white;
           &:hover {
-            background: rgb(60, 60, 90);
+            background: $bg60;
             .menu {
               @if $nojavascript == true {
                 display: block;
@@ -1205,7 +1205,7 @@
                 right: 17px;
                 top: 10px;
                 font-size: 11px;
-                color: rgb(215, 215, 225);
+                color: $white-dark;
               }
             }
           }
@@ -1215,13 +1215,13 @@
             }
           }
           .menu {
-            background: rgb(70, 70, 105);
-            border: 1px solid rgb(60, 60, 90);
+            background: $bg70;
+            border: 1px solid $bg60;
             box-shadow: none;
             .item {
-              color: rgb(245, 245, 255);
+              color: $white;
               &:hover {
-                background: rgb(60, 60, 90);
+                background: $bg60;
               }
               &[data-target*="#diff-files"] {
                 @if $nojavascript == true {
@@ -1238,11 +1238,11 @@
         }
       }
       .diff-stats.detail-files {
-        background: rgb(30, 30, 45);
+        background: $bg30;
         border-radius: 0 0 5px 5px;
         margin: 0 0 10px 0;
         li {
-          border-bottom: 1px dashed rgb(60, 60, 90);
+          border-bottom: 1px dashed $bg60;
           &:last-of-type {
             border-bottom: 0;
             margin-bottom: 0;
@@ -1250,10 +1250,10 @@
           }
           .diff-counter {
             .add {
-              color: rgb(100, 200, 130);
+              color: $green;
             }
             .del {
-              color: rgb(255, 130, 130);
+              color: $red;
             }
           }
         }
@@ -1268,34 +1268,34 @@
           .diff-counter {
             .add {
               @if $nojavascript == true {
-                color: rgb(100, 200, 130);
+                color: $green;
                 margin-right: 10px;
               }
             }
             .bar {
-              background: rgb(255, 130, 130);
+              background: $red;
               @if $nojavascript == true {
                 display: none;
               }
               .pull-left.add {
-                background: rgb(100, 200, 130);
+                background: $green;
               }
             }
             .del {
               @if $nojavascript == true {
-                color: rgb(255, 130, 130);
+                color: $red;
               }
             }
           }
           .file {
-            color: rgb(245, 245, 255);
+            color: $white;
           }
           .button {
-            background: rgb(80, 80, 120);
+            background: $bg80;
             box-shadow: none;
-            color: rgb(245, 245, 255);
+            color: $white;
             &:hover {
-              background: rgb(70, 70, 105);
+              background: $bg70;
             }
           }
         }
@@ -1305,35 +1305,35 @@
               tbody {
                 .tag-code {
                   td {
-                    background: rgb(30, 30, 45) !important;
-                    border-color: rgb(60, 60, 90) !important;
-                    color: rgb(255, 255, 255);
+                    background: $bg30 !important;
+                    border-color: $bg60 !important;
+                    color: $white;
                   }
                 }
                 .same-code {
                   td {
-                    background: rgb(30, 30, 45) !important;
-                    border-color: rgb(60, 60, 90) !important;
-                    color: rgb(255, 255, 255);
+                    background: $bg30 !important;
+                    border-color: $bg60 !important;
+                    color: $white;
                   }
                 }
                 .del-code {
                   td {
-                    background: rgb(255, 130, 130) !important;
-                    border-color: rgb(255, 100, 100) !important;
-                    color: rgb(255, 255, 255);
+                    background: $red !important;
+                    border-color: $red-light !important;
+                    color: $white;
                     .removed-code {
-                      background: rgb(255, 110, 110);
+                      background: $red-dark;
                     }
                   }
                 }
                 .add-code {
                   td {
-                    background: rgb(100, 200, 130) !important;
-                    border-color: rgb(100, 220, 120) !important;
-                    color: rgb(255, 255, 255);
+                    background: $green !important;
+                    border-color: $green-light !important;
+                    color: $white;
                     .added-code {
-                      background: rgb(80, 180, 110);
+                      background: $green-dark;
                     }
                   }
                 }
@@ -1354,16 +1354,16 @@
       .item {
         .repo-path {
           a {
-            color: rgb(215, 215, 225);
+            color: $white-dark;
             &:hover {
-              color: rgb(255, 130, 130);
+              color: $red;
             }
           }
           .divider {
-            color: rgb(215, 215, 225);
+            color: $white-dark;
           }
           .active.section {
-            color: rgb(255, 255, 255);
+            color: $white;
           }
         }
       }
@@ -1372,7 +1372,7 @@
       .file-header {
         .file-header-left {
           .file-info {
-            color: rgb(215, 215, 225) !important;
+            color: $white-dark !important;
           }
         }
         .file-header-right {
@@ -1380,22 +1380,22 @@
             a {
               .btn-octicon {
                 .svg {
-                  fill: rgb(215, 215, 225);
+                  fill: $white-dark;
                   transition: fill .2s;
                   &:hover {
-                    fill: rgb(255, 255, 255);
+                    fill: $white;
                   }
                 }
               }
             }
             .buttons {
               .button {
-                background: rgb(70, 70, 105);
+                background: $bg70;
                 box-shadow: none;
-                color: rgb(245, 245, 255);
+                color: $white;
                 font-family: $font-family;
                 &:hover {
-                  background: rgb(60, 60, 90);
+                  background: $bg60;
                 }
               }
             }
@@ -1410,9 +1410,9 @@
                 tr {
                   td, 
                   td pre code .linenums {
-                    background: rgb(30, 30, 45) !important;
-                    border-color: rgb(60, 60, 90) !important;
-                    color: rgb(255, 255, 255);
+                    background: $bg30 !important;
+                    border-color: $bg60 !important;
+                    color: $white;
                   }
                 }
               }
@@ -1427,10 +1427,10 @@
             &:not(code) {
               h1,
               h2 {
-                border-bottom: 1px solid rgb(60, 60, 90);
+                border-bottom: 1px solid $bg60;
               }
               pre {
-                background: rgb(40, 40, 60);
+                background: $bg40;
                 border-radius: $border-radius;
               }
             }
diff --git a/scss/import/user.scss b/scss/import/user.scss
index 74b3068..d983b06 100644
--- a/scss/import/user.scss
+++ b/scss/import/user.scss
@@ -5,60 +5,60 @@
   .container {
     .grid {
       .card {
-        background: rgb(50, 50, 75);
+        background: $bg50;
         box-shadow: none;
-        color: rgb(245, 245, 255);
+        color: $white;
         position: sticky;
         top: 20px;
         .content {
           .header {
-            color: rgb(245, 245, 255);
+            color: $white;
           }
         }
         .extra.content {
           ul {
-            color: rgb(245, 245, 255);
+            color: $white;
             li:not(:last-child) {
-              border-bottom: 1px solid rgb(60, 60, 90);
+              border-bottom: 1px solid $bg60;
             }
             a {
-              color: rgb(255, 255, 255);
+              color: $white-light;
               &:hover {
-                color: rgb(255, 130, 130);
+                color: $red;
               }
             }
           }
         }
       }
       .secondary.pointing.menu {
-        background: rgb(70, 70, 105);
+        background: $bg70;
         border: 0;
         border-radius: 5px 5px 0 0;
         margin-top: -15px;
         overflow-x: auto;
         overflow-y: hidden;
         padding: 0 20px;
-        scrollbar-color: rgb(215, 215, 225) rgb(70, 70, 105);
+        scrollbar-color: $white-dark $bg70;
         top: 0;
         transform: rotateX(180deg);
         z-index: 100;
         .item {
           border-bottom: 2px solid transparent;
           border-radius: 5px 5px 0 0;
-          color: rgb(245, 245, 255);
+          color: $white;
           font-family: $font-family;
           margin-bottom: 10px;
           transform: rotateX(180deg);
           transition: background .2s, color .2s;
           &:hover {
-            background: rgb(60, 60, 90);
-            color: rgb(255, 255, 255);
+            background: $bg60;
+            color: $white-light;
           }
           &.active {
-            border-bottom: 2px solid rgb(245, 245, 255);
-            color: rgb(245, 245, 255);
+            border-bottom: 2px solid $white;
+            color: $white;
             &:hover {
-              color: rgb(255, 255, 255);
+              color: $white-light;
             }
           }
           @if $nojavascript == true {
@@ -67,8 +67,8 @@
             }
           }
           .label {
-            background: rgb(245, 245, 255);
-            color: rgb(70, 70, 105);
+            background: $white;
+            color: $bg70;
           }
           @if $singleuser == true {
             &[href*="stars"], 
@@ -87,37 +87,37 @@
       form.form {
         .input {
           input {
-            background: rgb(40, 40, 60);
-            border: 2px solid rgb(60, 60, 90);
-            color: rgb(245, 245, 255);
+            background: $bg40;
+            border: 2px solid $bg60;
+            color: $white;
             &:focus {
-              background: rgb(50, 50, 75);
-              border: 2px solid rgb(60, 60, 90);
-              color: rgb(255, 255, 255);
+              background: $bg50;
+              border: 2px solid $bg60;
+              color: $white-light;
             }
           }
           .button {
-            background: rgb(60, 60, 90);
+            background: $bg60;
             border: 0;
             &:hover {
-              background: rgb(50, 50, 75);
+              background: $bg50;
             }
           }
         }
       }
       .divider {
-        border-bottom: 1px solid rgb(60, 60, 90);
+        border-bottom: 1px solid $bg60;
       }
       .repository.list {
         .item {
           &:not(:first-child) {
-            border-top: 1px solid rgb(60, 60, 90);
+            border-top: 1px solid $bg60;
           }
           .header {
             a.name {
               font-family: $font-family;
               i.archive.icon {
-                color: rgb(215, 215, 225) !important;
+                color: $white-dark !important;
               }
             }
             .metas {
@@ -125,24 +125,24 @@
                 display: none;
               }
               span {
-                color: rgb(215, 215, 225) !important;
+                color: $white-dark !important;
               }
             }
           }
           .description {
             p {
-              color: rgb(245, 245, 255);
+              color: $white;
               &.time {
-                color: rgb(215, 215, 225);
+                color: $white-dark;
               }
             }
             .tags {
               a .label {
-                background: rgb(60, 60, 90);
-                color: rgb(245, 245, 255);
+                background: $bg60;
+                color: $white;
                 &:hover {
-                  background: rgb(70, 70, 105);
-                  color: rgb(255, 255, 255);
+                  background: $bg70;
+                  color: $white-light;
                 }
               }
             }
@@ -162,16 +162,16 @@
         .news {
           .content {
             span {
-              color: rgb(215, 215, 225) !important;
+              color: $white-dark !important;
             }
           }
           p.grey {
             span {
-              color: rgb(215, 215, 225);
+              color: $white-dark;
             }
           }
           .svg {
-            fill: rgb(215, 215, 225);
+            fill: $white-dark;
           }
         }
       }
@@ -184,31 +184,31 @@
 .user.signin {
   .container {
     .header { 
-      background: rgb(60, 60, 90);
+      background: $bg60;
       border: 0;
-      color: rgb(245, 245, 255);
+      color: $white;
     }
     .segment {
-      background: rgb(50, 50, 75);
+      background: $bg50;
       border: 0;
-      color: rgb(245, 245, 255);
+      color: $white;
       .form {
         .field {
           label {
-            color: rgb(245, 245, 255);
+            color: $white;
             &::after {
-              color: rgb(255, 130, 130);
+              color: $red;
             }
           }
           input {
-            background: rgb(40, 40, 60);
+            background: $bg40;
           }
           .green.button {
-            background: rgb(80, 80, 120);
+            background: $bg80;
             box-shadow: none;
-            color: rgb(245, 245, 255);
+            color: $white;
             &:hover {
-              background: rgb(70, 70, 105);
+              background: $bg70;
             }
           }
         }
@@ -232,12 +232,12 @@
         border: 0;
         color: $white-light;
         &.active {
-          background: rgb(50, 50, 75);
+          background: $bg50;
           color: $white-light;
         }
         .label {
           background: $white;
-          color: rgb(60, 60, 90);
+          color: $bg60;
         }
       }
     }