diff --git a/frontend/resources/styles/common/base.scss b/frontend/resources/styles/common/base.scss
index cc37c3a0f..fcd376d95 100644
--- a/frontend/resources/styles/common/base.scss
+++ b/frontend/resources/styles/common/base.scss
@@ -209,7 +209,7 @@ h4 {
 }
 
 hr {
-  border-top: solid 1px $color-gray-light;
+  border-top: solid 1px $soft-ui-border;
   border-right: 0;
   border-left: 0;
   border-bottom: 0;
diff --git a/frontend/resources/styles/common/dependencies/uxbox-dark.scss b/frontend/resources/styles/common/dependencies/uxbox-dark.scss
index 1f996bb4f..40098c06a 100644
--- a/frontend/resources/styles/common/dependencies/uxbox-dark.scss
+++ b/frontend/resources/styles/common/dependencies/uxbox-dark.scss
@@ -18,7 +18,7 @@ $intense-main-ui-color: darken($main-ui-color, 25%);
 // Background colors
 $primary-ui-bg: #2C2C2C;
 $secondary-ui-bg: #3d3f40;
-$dark-ui-bg: #232323;
+$dark-ui-bg: #181818;
 
 // Border color
 $intense-ui-border: #a9adaf;
@@ -38,3 +38,6 @@ $soft-ui-text: #4e4f50;
 // Canvas colors
 $canvas-bg: #3d3f40;
 $scrollbar-bg: #878c8e;
+
+// Input colors
+$input-bg: $color-dark-bg;
diff --git a/frontend/resources/styles/common/dependencies/uxbox-light.scss b/frontend/resources/styles/common/dependencies/uxbox-light.scss
index fc45a02ab..a6044f482 100644
--- a/frontend/resources/styles/common/dependencies/uxbox-light.scss
+++ b/frontend/resources/styles/common/dependencies/uxbox-light.scss
@@ -41,3 +41,6 @@ $soft-ui-text: mix($ui-flavour, $color-white, $mix-percentage-light);
 // Canvas colors
 $canvas-bg: mix($ui-flavour, $color-white, $mix-percentage-lighter);
 $scrollbar-bg: mix($ui-flavour, $color-white, $mix-percentage-light);
+
+// Input colors
+$input-bg: $color-light-bg;
diff --git a/frontend/resources/styles/common/framework.scss b/frontend/resources/styles/common/framework.scss
index 0667545ad..2b18eaa27 100644
--- a/frontend/resources/styles/common/framework.scss
+++ b/frontend/resources/styles/common/framework.scss
@@ -366,9 +366,9 @@ ul.slider-dots {
 
 input,
 select {
-  background-color: $color-white;
+  background-color: $input-bg;
   box-sizing: border-box;
-  color: $color-gray;
+  color: $intense-ui-text;
   font-family: "sourcesanspro", sans-serif;
   font-size: $fs16;
   margin-bottom: $medium;
@@ -402,7 +402,8 @@ input[type="checkbox"]:focus {
 
 .input-text {
   border: none;
-  border-bottom: 1px solid $color-gray-lighter;
+  border-bottom: 1px solid $soft-ui-border;
+  background-color: $input-bg;
   box-shadow: none;
   outline: none;
   padding: $small $big $small $small;
@@ -413,7 +414,7 @@ input[type="checkbox"]:focus {
   }
 
   &:focus {
-    border-color: $color-gray;
+    border-color: $intense-ui-border;
     box-shadow: none;
 
     @include placeholder {
@@ -489,7 +490,7 @@ input.element-name {
       height: 20px;
       margin-right: 10px;
       background-color: $color-white;
-      border: 1px solid $color-gray-lighter;
+      border: 1px solid $soft-ui-border;
       box-shadow: inset 0 0 0 0 $main-ui-color ;
       box-sizing: border-box;
     }
@@ -904,7 +905,7 @@ input[type=range]:focus::-ms-fill-upper {
 
       &::after {
         align-items: center;
-        background-color: rgba(255,255,255,.7);
+        background-color: $input-bg;
         box-sizing: border-box;
         border-radius: 0;
         color: $intense-ui-text;
diff --git a/frontend/resources/styles/main/partials/activity-bar.scss b/frontend/resources/styles/main/partials/activity-bar.scss
index 81a15bfc9..6a45fe529 100644
--- a/frontend/resources/styles/main/partials/activity-bar.scss
+++ b/frontend/resources/styles/main/partials/activity-bar.scss
@@ -6,7 +6,7 @@
 // Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 .activity-bar {
-  background-color: $color-white;
+  background-color: $primary-ui-bg;
   bottom: 0;
   height: 100%;
   position: fixed;
diff --git a/frontend/resources/styles/main/partials/color-palette.scss b/frontend/resources/styles/main/partials/color-palette.scss
index 329f7ee07..02526610f 100644
--- a/frontend/resources/styles/main/partials/color-palette.scss
+++ b/frontend/resources/styles/main/partials/color-palette.scss
@@ -8,8 +8,8 @@
 .color-palette {
   @include animation(0,.5s,fadeInUp);
   align-items: center;
-  background-color: $color-white;
-  border-top: 1px solid $color-gray-lighter;
+  background-color: $primary-ui-bg;
+  border-top: 1px solid $soft-ui-border;
   bottom: 0;
   display: flex;
   left: 0;
diff --git a/frontend/resources/styles/main/partials/colorpicker.scss b/frontend/resources/styles/main/partials/colorpicker.scss
index 9323e65b2..6ce8e3f65 100644
--- a/frontend/resources/styles/main/partials/colorpicker.scss
+++ b/frontend/resources/styles/main/partials/colorpicker.scss
@@ -174,7 +174,7 @@
 }
 
 .colorpicker-tooltip {
-  background: $color-white;
+  background: $primary-ui-bg;
   border-radius: $br-small;
   display: flex;
   flex-direction: column;
diff --git a/frontend/resources/styles/main/partials/dashboard-bar.scss b/frontend/resources/styles/main/partials/dashboard-bar.scss
index e2531c81e..755eefa1e 100644
--- a/frontend/resources/styles/main/partials/dashboard-bar.scss
+++ b/frontend/resources/styles/main/partials/dashboard-bar.scss
@@ -32,7 +32,7 @@
 
     .input-select {
       background-color: transparent;
-      border-color: $color-gray;
+      border-color: $soft-ui-border;
       font-size: $fs14;
       margin-bottom: 0;
       margin-left: $medium;
@@ -47,7 +47,7 @@
     margin-left: $small;
 
     .input-text {
-      background: rgba(255,255,255,.4);
+      background: $input-bg;
       border: 0;
       color: $intense-ui-text;
       padding: 4px 8px;
@@ -57,7 +57,7 @@
 
     .clear-search {
       align-items: center;
-      background: rgba(255,255,255,.4);
+      background: $input-bg;
       cursor: pointer;
       display: flex;
       height: 28px;
diff --git a/frontend/resources/styles/main/partials/dashboard-grid.scss b/frontend/resources/styles/main/partials/dashboard-grid.scss
index f134ce8cd..8b85ee952 100644
--- a/frontend/resources/styles/main/partials/dashboard-grid.scss
+++ b/frontend/resources/styles/main/partials/dashboard-grid.scss
@@ -25,13 +25,13 @@
       width: 100%;
       .edit {
           padding: 5px 10px;
-          background: $color-white;
+          background: $primary-ui-bg;
           border: none;
           height: 100%;
       }
       .close {
           padding: 5px 10px;
-          background: $color-white;
+          background: $primary-ui-bg;
           cursor: pointer;
           svg {
             transform: rotate(45deg);
@@ -169,8 +169,8 @@
 
       // PROJECTS, ELEMENTS & ICONS GRID
       &.project-th {
-        background-color: $color-white;
-        border-bottom: 2px solid lighten($color-gray-light, 12%);
+        background-color: $primary-ui-bg;
+        border-bottom: 2px solid lighten($soft-ui-border, 12%);
 
         &:hover {
           border-color: $main-ui-color;
@@ -252,7 +252,7 @@
 
       // IMAGES SECTION
       &.images-th {
-        background-color: $color-white;
+        background-color: $primary-ui-bg;
         border-bottom: 2px solid lighten($color-gray-light, 12%);
 
         &:hover {
@@ -332,7 +332,7 @@
 .multiselect-bar {
   @include animation(0,.5s,fadeInUp);
   align-items: center;
-  background-color: $color-white;
+  background-color: $primary-ui-bg;
   display: flex;
   left: 0;
   justify-content: center;
@@ -387,7 +387,7 @@
   position: relative;
 
   .move-list {
-    background-color: $color-white;
+    background-color: $dark-ui-bg;
     border-radius: $br-small;
     bottom: 30px;
     display: flex;
diff --git a/frontend/resources/styles/main/partials/library-bar.scss b/frontend/resources/styles/main/partials/library-bar.scss
index 0e8c26238..875b04831 100644
--- a/frontend/resources/styles/main/partials/library-bar.scss
+++ b/frontend/resources/styles/main/partials/library-bar.scss
@@ -6,7 +6,7 @@
 // Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 .library-bar {
-  background-color: $color-white;
+  background-color: $primary-ui-bg;
   bottom: 0;
   height: 100%;
   left: 0;
@@ -21,14 +21,14 @@
 
     .library-tabs {
       align-items: center;
-      background-color: $color-gray-lighter;
+      background-color: $secondary-ui-bg;
       display: flex;
       justify-content: space-around;
       margin: 0;
       padding-top: 12px;
 
       li {
-        background-color: darken($color-gray-lighter, 10%);
+        background-color: darken($secondary-ui-bg, 10%);
         border-top-left-radius: 3px;
         border-top-right-radius: 3px;
         color: $color-gray;
@@ -44,7 +44,7 @@
         }
 
         &.current {
-          background-color: $color-white;
+          background-color: $primary-ui-bg;
           color: $main-ui-color;
         }
 
@@ -60,7 +60,7 @@
       padding-bottom: 20px;
 
       li {
-        border-bottom: 1px solid $color-gray-lighter;
+        border-bottom: 1px solid $secondary-ui-bg;
         cursor: pointer;
         display: flex;
         flex-direction: column;
@@ -83,7 +83,7 @@
         }
 
         .close {
-            background: $color-white;
+            background: $primary-ui-bg;
             cursor: pointer;
             padding: 5px 10px;
 
diff --git a/frontend/resources/styles/main/partials/lightbox.scss b/frontend/resources/styles/main/partials/lightbox.scss
index e3ca437cd..d3d99512d 100644
--- a/frontend/resources/styles/main/partials/lightbox.scss
+++ b/frontend/resources/styles/main/partials/lightbox.scss
@@ -23,7 +23,7 @@
 
   .lightbox-body {
     align-items: center;
-    background-color: $color-white;
+    background-color: $secondary-ui-bg;
     border-radius: $br-medium;
     display: flex;
     flex-direction: column;
diff --git a/frontend/resources/styles/main/partials/main-bar.scss b/frontend/resources/styles/main/partials/main-bar.scss
index fbd892a82..387f7af7e 100644
--- a/frontend/resources/styles/main/partials/main-bar.scss
+++ b/frontend/resources/styles/main/partials/main-bar.scss
@@ -76,7 +76,7 @@
   }
 
   .dropdown {
-    background-color: $color-white;
+    background-color: $secondary-ui-bg;
     border-radius: $br-small;
     border: 1px solid $soft-ui-border;
     min-width: 150px;
diff --git a/frontend/resources/styles/main/partials/sidebar-icons.scss b/frontend/resources/styles/main/partials/sidebar-icons.scss
index aad75c758..8d8fdd26f 100644
--- a/frontend/resources/styles/main/partials/sidebar-icons.scss
+++ b/frontend/resources/styles/main/partials/sidebar-icons.scss
@@ -36,7 +36,7 @@
   }
 
   &:hover {
-    background-color: $color-white;
+    background-color: $dark-ui-bg;
     border-color: $soft-ui-border;
   }
 
diff --git a/frontend/resources/styles/main/partials/sidebar-tools.scss b/frontend/resources/styles/main/partials/sidebar-tools.scss
index a1b03b5a9..ce266e1fa 100644
--- a/frontend/resources/styles/main/partials/sidebar-tools.scss
+++ b/frontend/resources/styles/main/partials/sidebar-tools.scss
@@ -28,7 +28,7 @@
   }
 
   &:hover {
-    background-color: $color-white;
+    background-color: $primary-ui-bg;
   }
 
   &.selected {
diff --git a/frontend/resources/styles/main/partials/workspace-bar.scss b/frontend/resources/styles/main/partials/workspace-bar.scss
index d1ba9cd24..f2e4e137c 100644
--- a/frontend/resources/styles/main/partials/workspace-bar.scss
+++ b/frontend/resources/styles/main/partials/workspace-bar.scss
@@ -190,9 +190,9 @@
           .remove-zoom {
             align-items: center;
             border-radius: 50%;
-            border: 1px solid $medium-ui-border;
+            border: 1px solid $intense-ui-border;
             cursor: pointer;
-            color: $medium-ui-border;
+            color: $intense-ui-border;
             display: none;
             flex-shrink: 0;
             font-size: $fs20;