diff --git a/frontend/src/css/_buttons.css b/frontend/src/css/_buttons.css
index 6a8b6cb3..cbfc92ae 100644
--- a/frontend/src/css/_buttons.css
+++ b/frontend/src/css/_buttons.css
@@ -6,8 +6,8 @@
   cursor: pointer;
   background: var(--blue);
   color: white;
-  border: 1px solid rgba(0, 0, 0, 0.05);
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
+  border: 1px solid var(--divider);
+  box-shadow: 0 0 5px var(--divider);
   transition: 0.1s ease all;
 }
 
@@ -38,7 +38,7 @@
 }
 
 .button--flat:hover {
-  background: var(--moon-grey);
+  background: var(--surfaceSecondary);
 }
 
 .button--flat.button--red {
diff --git a/frontend/src/css/_inputs.css b/frontend/src/css/_inputs.css
index 75587686..a0063f83 100644
--- a/frontend/src/css/_inputs.css
+++ b/frontend/src/css/_inputs.css
@@ -1,6 +1,6 @@
 .input {
   background: var(--surfacePrimary);
-  color: var(--textPrimary);
+  color: var(--textSecondary);
   border: 1px solid var(--borderPrimary);
   border-radius: 0.1em;
   padding: 0.5em 1em;
diff --git a/frontend/src/css/_share.css b/frontend/src/css/_share.css
index e5e92b99..d4772dac 100644
--- a/frontend/src/css/_share.css
+++ b/frontend/src/css/_share.css
@@ -41,7 +41,7 @@
 
 .share__box__element {
   padding: 1em;
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  border-top: 1px solid var(--borderPrimary);
   word-break: break-all;
 }
 
@@ -64,7 +64,7 @@
   border-left: 0;
   border-right: 0;
   border-bottom: 0;
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  border-top: 1px solid var(--borderPrimary);
 }
 
 .share__box__items #listing.list .item .name {
diff --git a/frontend/src/css/_shell.css b/frontend/src/css/_shell.css
index 77786795..a2ff3b8b 100644
--- a/frontend/src/css/_shell.css
+++ b/frontend/src/css/_shell.css
@@ -12,7 +12,7 @@
   overflow: auto;
   font-size: 1rem;
   cursor: text;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 0 5px var(--borderPrimary);
   transition: 0.2s ease transform;
 }
 
@@ -20,7 +20,7 @@
   display: flex;
   padding: 0.5em;
   align-items: flex-start;
-  border-top: 1px solid rgba(0, 0, 0, 0.05);
+  border-top: 1px solid var(--divider);
 }
 
 .shell--hidden {
diff --git a/frontend/src/css/_variables.css b/frontend/src/css/_variables.css
index b307015a..228e0810 100644
--- a/frontend/src/css/_variables.css
+++ b/frontend/src/css/_variables.css
@@ -12,15 +12,16 @@
   --icon-blue: #1d99f3;
   --icon-violet: #9b59b6;
 
-  --input-red: #fcd0cd;
-  --input-green: #c9f2da;
+  --input-red: rgb(252, 208, 205);
+  --input-green: rgb(201, 242, 218);
 
   --background: rgb(250, 250, 250);
-  --surfacePrimary: #fff;
-  --surfaceSecondary: #f5f5f5;
+  --surfacePrimary: rgb(255, 255, 255);
+  --surfaceSecondary: rgb(230, 230, 230);
   --divider: rgba(0, 0, 0, 0.05);
   --iconPrimary: var(--icon-blue);
-  --iconSecondary: #fff;
+  --iconSecondary: rgb(255, 255, 255);
+  --iconTertiary: rgb(204, 204, 204);
   --action: rgb(84, 110, 122);
   --textPrimary: rgb(111, 111, 111);
   --textSecondary: rgb(51, 51, 51);
@@ -30,18 +31,19 @@
 }
 
 :root.dark {
-  --input-red: #73302d;
-  --input-green: #147a41;
+  --input-red: rgb(115, 48, 45);
+  --input-green: rgb(20, 122, 65);
 
-  --background: #141d24;
-  --surfacePrimary: #20292f;
-  --surfaceSecondary: #3a4147;
+  --background: rgb(20, 29, 36);
+  --surfacePrimary: rgb(32, 41, 47);
+  --surfaceSecondary: rgb(58, 65, 71);
   --textPrimary: rgba(255, 255, 255, 0.6);
   --textSecondary: rgba(255, 255, 255, 0.87);
   --divider: rgba(255, 255, 255, 0.12);
-  --iconPrimary: #fff;
-  --iconSecondary: #fff;
-  --action: #fff;
+  --iconPrimary: rgb(255, 255, 255);
+  --iconSecondary: rgb(255, 255, 255);
+  --iconTertiary: rgb(255, 255, 255);
+  --action: rgb(255, 255, 255);
   --hover: rgba(255, 255, 255, 0.1);
   --borderPrimary: rgba(255, 255, 255, 0.05);
   --borderSecondary: rgba(255, 255, 255, 0.15);
diff --git a/frontend/src/css/base.css b/frontend/src/css/base.css
index 318590de..90b6fbec 100644
--- a/frontend/src/css/base.css
+++ b/frontend/src/css/base.css
@@ -1,8 +1,8 @@
 body {
   font-family: "Roboto", sans-serif;
   padding-top: 4em;
-  background-color: #fafafa;
-  color: #333333;
+  background: var(--background);
+  color: var(--textSecondary);
 }
 
 * {
@@ -79,7 +79,7 @@ html[dir="rtl"] nav .action {
 }
 
 nav > div {
-  border-top: 1px solid rgba(0, 0, 0, 0.05);
+  border-top: 1px solid var(--divider);
 }
 
 nav .action > * {
@@ -94,7 +94,7 @@ main {
 
 .breadcrumbs {
   height: 3em;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  border-bottom: 1px solid var(--divider);
 }
 
 .breadcrumbs span,
@@ -115,7 +115,7 @@ html[dir="rtl"] .breadcrumbs a {
 }
 
 .breadcrumbs a:hover {
-  background-color: rgba(0, 0, 0, 0.05);
+  background-color: var(--divider);
 }
 
 .breadcrumbs span a {
diff --git a/frontend/src/css/dark.css b/frontend/src/css/dark.css
index 9e7b6643..e1d12d78 100644
--- a/frontend/src/css/dark.css
+++ b/frontend/src/css/dark.css
@@ -1,24 +1,3 @@
-body {
-  background: var(--background);
-  color: var(--textSecondary);
-}
-
-#loading {
-  background: var(--background);
-}
-#loading .spinner div,
-main .spinner div {
-  background: var(--iconPrimary);
-}
-
-#login {
-  background: var(--surfacePrimary);
-}
-
-header {
-  background: var(--surfacePrimary);
-}
-
 #search #input {
   background: var(--surfaceSecondary);
   border-color: var(--surfacePrimary);
@@ -56,10 +35,6 @@ header {
   border-color: var(--surfacePrimary);
 }
 
-nav > div {
-  border-color: var(--divider);
-}
-
 .breadcrumbs {
   border-color: var(--divider);
   color: var(--textPrimary) !important;
@@ -93,28 +68,7 @@ nav > div {
   background: var(--background);
 }
 
-.message {
-  color: var(--textPrimary);
-}
-
-.card {
-  background: var(--surfacePrimary);
-  color: var(--textSecondary);
-}
-.button--flat:hover {
-  background: var(--surfaceSecondary);
-}
-
-.dashboard #nav ul li {
-  color: var(--action);
-}
-.dashboard #nav ul li:hover {
-  background: var(--surfaceSecondary);
-}
-
-.card h3,
-.dashboard #nav,
-.dashboard p label {
+.card h3 {
   color: var(--textPrimary);
 }
 .card#share input,
@@ -124,7 +78,6 @@ nav > div {
   border: 1px solid var(--borderPrimary);
 }
 
-.dashboard #nav .wrapper,
 .collapsible {
   border-color: var(--divider);
 }
@@ -132,10 +85,6 @@ nav > div {
   color: var(--textPrimary);
 }
 
-table th {
-  color: var(--textSecondary);
-}
-
 .file-list li:hover {
   background: var(--surfaceSecondary);
 }
diff --git a/frontend/src/css/dashboard.css b/frontend/src/css/dashboard.css
index 846d9dff..959d58be 100644
--- a/frontend/src/css/dashboard.css
+++ b/frontend/src/css/dashboard.css
@@ -37,12 +37,12 @@ a {
   display: block;
   font-size: 0.8em;
   font-weight: 500;
-  color: rgba(0, 0, 0, 0.57);
+  color: var(--textPrimary);
 }
 
 li code,
 p code {
-  background: rgba(0, 0, 0, 0.05);
+  background: var(--divider);
   padding: 0.1em;
   border-radius: 0.2em;
 }
@@ -61,7 +61,7 @@ p code {
 .dashboard #nav .wrapper {
   display: flex;
   flex-grow: 1;
-  border-bottom: 2px solid rgba(0, 0, 0, 0.05);
+  border-bottom: 2px solid var(--divider);
 }
 
 html[dir="rtl"] .dashboard #nav .wrapper {
@@ -71,7 +71,7 @@ html[dir="rtl"] .dashboard #nav .wrapper {
 .dashboard #nav ul {
   list-style: none;
   display: flex;
-  color: rgb(84, 110, 122);
+  color: var(--action);
   font-weight: 500;
   padding: 0;
   margin: 0 0 -2px 0;
@@ -89,7 +89,7 @@ html[dir="rtl"] .dashboard #nav .wrapper {
 }
 
 .dashboard #nav ul li:hover {
-  background: var(--moon-grey);
+  background: var(--surfaceSecondary);
 }
 
 .dashboard #nav ul li.active {
@@ -119,7 +119,7 @@ table {
 }
 
 table tr {
-  border-bottom: 1px solid #ccc;
+  border-bottom: 1px solid var(--iconTertiary);
 }
 
 table tr:last-child {
@@ -128,7 +128,7 @@ table tr:last-child {
 
 table th {
   font-weight: 500;
-  color: #757575;
+  color: var(--textSecondary);
   text-align: left;
 }
 
@@ -159,7 +159,8 @@ table tr > *:last-child {
 .card {
   position: relative;
   margin: 0 0 1rem 0;
-  background-color: #fff;
+  background: var(--surfacePrimary);
+  color: var(--textSecondary);
   border-radius: 2px;
   box-shadow:
     0 2px 2px 0 rgba(0, 0, 0, 0.14),
@@ -396,11 +397,11 @@ html[dir="rtl"] .card .card-title > *:first-child {
 }
 
 .collapsible {
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  border-top: 1px solid var(--borderPrimary);
 }
 
 .collapsible:last-of-type {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  border-bottom: 1px solid var(--borderPrimary);
 }
 
 .collapsible > input {
@@ -465,7 +466,7 @@ html[dir="rtl"] .card .card-title > *:first-child {
   flex: 1;
   padding: 2em;
   border-radius: 0.2em;
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  border: 1px solid var(--borderPrimary);
   text-align: center;
 }
 
diff --git a/frontend/src/css/header.css b/frontend/src/css/header.css
index 69d81637..314f19bf 100644
--- a/frontend/src/css/header.css
+++ b/frontend/src/css/header.css
@@ -1,8 +1,8 @@
 header {
   z-index: 1000;
-  background-color: #fff;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.075);
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  background: var(--surfacePrimary);
+  border-bottom: 1px solid var(--divider);
+  box-shadow: 0 0 5px var(--borderPrimary);
   position: fixed;
   top: 0;
   left: 0;
@@ -94,7 +94,7 @@ header .menu-button {
 
 #search.active #input {
   border-bottom: 1px solid rgba(0, 0, 0, 0.075);
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 0 5px var(--borderPrimary);
   background-color: #fff;
   height: 4em;
 }
@@ -189,7 +189,7 @@ html[dir="rtl"] #search #result ul > * {
 }
 
 #search.active #result i {
-  color: #ccc;
+  color: var(--iconTertiary);
 }
 
 #search.active #result > p > i {
@@ -228,7 +228,7 @@ html[dir="rtl"] #search #result ul > * {
 
 #search .boxes {
   border: 1px solid rgba(0, 0, 0, 0.075);
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 0 5px var(--borderPrimary);
   background: #fff;
   margin: 1em 0;
 }
diff --git a/frontend/src/css/listing.css b/frontend/src/css/listing.css
index b1c65f16..94a55aba 100644
--- a/frontend/src/css/listing.css
+++ b/frontend/src/css/listing.css
@@ -77,7 +77,7 @@ html[dir="rtl"] #listing {
   margin: 1em auto;
   display: block !important;
   width: 95%;
-  color: rgba(0, 0, 0, 0.3);
+  color: var(--textPrimary);
   font-weight: 500;
 }
 
@@ -165,7 +165,7 @@ html[dir="rtl"] #listing {
 #listing.list .item {
   width: 100%;
   margin: 0;
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  border: 1px solid var(--borderPrimary);
   padding: 1em;
   border-top: 0;
 }
@@ -208,7 +208,7 @@ html[dir="rtl"] #listing {
 
 #listing .item.header {
   display: none !important;
-  background-color: #ccc;
+  background-color: var(--iconTertiary);
 }
 
 #listing.list .header i {
@@ -223,7 +223,7 @@ html[dir="rtl"] #listing {
   z-index: 999;
   padding: 0.85em;
   border: 0;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  border-bottom: 1px solid var(--borderPrimary);
 }
 
 #listing.list .item.header > div:first-child {
diff --git a/frontend/src/css/login.css b/frontend/src/css/login.css
index 02569e65..14bfd1a5 100644
--- a/frontend/src/css/login.css
+++ b/frontend/src/css/login.css
@@ -1,5 +1,5 @@
 #login {
-  background: #fff;
+  background: var(--surfacePrimary);
   position: fixed;
   top: 0;
   left: 0;
diff --git a/frontend/src/css/mobile.css b/frontend/src/css/mobile.css
index 77dd7ece..8dcb5804 100644
--- a/frontend/src/css/mobile.css
+++ b/frontend/src/css/mobile.css
@@ -30,7 +30,7 @@
   header .overlay {
     width: 100%;
     height: 100%;
-    background-color: rgba(0, 0, 0, 0.1);
+    background-color: var(--borderPrimary);
   }
   #dropdown {
     position: fixed;
@@ -38,7 +38,7 @@
     right: 1em;
     display: block;
     background-color: #fff;
-    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0 5px var(--borderPrimary);
     transform: scale(0);
     transition: 0.1s ease-in-out transform;
     transform-origin: top right;
@@ -104,7 +104,7 @@
     background: #fff;
     height: 100%;
     width: 16em;
-    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 0 5px var(--borderPrimary);
     transition: 0.1s ease left;
     left: -17em;
   }
diff --git a/frontend/src/css/styles.css b/frontend/src/css/styles.css
index 31bc41b1..7a369302 100644
--- a/frontend/src/css/styles.css
+++ b/frontend/src/css/styles.css
@@ -20,6 +20,13 @@
   color: var(--blue);
 }
 
+#loading {
+  background: var(--background);
+}
+#loading .spinner > div {
+  background: var(--iconPrimary);
+}
+
 main .spinner {
   display: block;
   text-align: center;
@@ -32,7 +39,7 @@ main .spinner > div {
   height: 0.8em;
   margin: 0 0.1em;
   font-size: 1em;
-  background-color: rgba(0, 0, 0, 0.3);
+  background: var(--iconPrimary);
   border-radius: 100%;
   display: inline-block;
   animation: sk-bouncedelay 1.4s infinite ease-in-out both;
@@ -94,7 +101,7 @@ main .spinner .bounce2 {
 }
 
 .action:hover {
-  background-color: rgba(0, 0, 0, 0.1);
+  background-color: var(--borderPrimary);
 }
 
 .action ul {
@@ -287,7 +294,7 @@ main .spinner .bounce2 {
 #previewer .spinner > div {
   width: 18px;
   height: 18px;
-  background-color: white;
+  background: var(--iconPrimary);
 }
 
 /* EDITOR */
@@ -338,8 +345,8 @@ html[dir="rtl"] .breadcrumbs .chevron {
 }
 
 .noty_buttons button {
-  background: rgba(0, 0, 0, 0.05);
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  background: var(--divider);
+  border: 1px solid var(--borderPrimary);
   box-shadow: 0 0 0 0;
   font-size: 1rem;
 }