diff --git a/src/styles/components/attachments.scss b/src/styles/components/attachments.scss
index ba476fe47..c983ba076 100644
--- a/src/styles/components/attachments.scss
+++ b/src/styles/components/attachments.scss
@@ -14,7 +14,7 @@
       padding: .5rem;
 
       &:hover {
-        background-color: var(--grey-200);
+        background-color: $grey-200;
       }
 
       .filename {
@@ -24,7 +24,7 @@
       }
 
       .info {
-        color: var(--grey-500);
+        color: $grey-500;
         font-size: .9rem;
 
         p {
@@ -96,7 +96,7 @@
         box-shadow: $shadow-md;
         background: $primary;
         padding: 1rem;
-        color: var(--white);
+        color: $white;
         width: 100%;
         max-width: 300px;
       }
diff --git a/src/styles/components/base/card.scss b/src/styles/components/base/card.scss
index 305fd9a7f..519f0a1af 100644
--- a/src/styles/components/base/card.scss
+++ b/src/styles/components/base/card.scss
@@ -1,5 +1,5 @@
 .card {
-  background-color: var(--white);
+  background-color: $white;
   border-radius: $radius;
   margin-bottom: 1rem;
 
@@ -11,17 +11,17 @@
 
   .card-header {
     box-shadow: none;
-    border-bottom: 1px solid var(--grey-200);
+    border-bottom: 1px solid $grey-200;
     border-radius: $radius $radius 0 0;
   }
 
   .modal-card-foot {
-    background: var(--grey-50);
+    background: $grey-50;
     border-top: 0;
   }
 }
 
 .box, .card {
-  border: 1px solid var(--grey-200);
+  border: 1px solid $grey-200;
   box-shadow: $shadow-sm;
 }
diff --git a/src/styles/components/base/multiselect.scss b/src/styles/components/base/multiselect.scss
index b66f32dfa..789ae3db4 100644
--- a/src/styles/components/base/multiselect.scss
+++ b/src/styles/components/base/multiselect.scss
@@ -9,22 +9,22 @@
 	&.has-search-results .input-wrapper {
 		border-radius: $radius $radius 0 0;
 		border-color: $primary !important;
-		background: var(--white) !important;
+		background: $white !important;
 
 		&, &:focus-within {
-			border-bottom-color: var(--grey-200) !important;
+			border-bottom-color: $grey-200 !important;
 		}
 	}
 
 	.input-wrapper {
 		padding: 0;
-		background: var(--white) !important;
-		border-color: var(--grey-200) !important;
+		background: $white !important;
+		border-color: $grey-200 !important;
 		flex-wrap: wrap;
 		height: auto;
 
 		&:hover {
-			border-color: var(--grey-300) !important;
+			border-color: $grey-300 !important;
 		}
 
 		.input {
@@ -51,7 +51,7 @@
 
 		&:focus-within {
 			border-color: $primary !important;
-			background: var(--white) !important;
+			background: $white !important;
 		}
 
 		.loader {
@@ -60,7 +60,7 @@
 	}
 
 	.search-results {
-		background: var(--white);
+		background: $white;
 		border-radius: 0 0 $radius $radius;
 		border: 1px solid $primary;
 		border-top: none;
@@ -109,7 +109,7 @@
 			}
 
 			&:focus, &:hover {
-				background: var(--grey-100);
+				background: $grey-100;
 				box-shadow: none !important;
 
 				.hint-text {
@@ -118,7 +118,7 @@
 			}
 
 			&:active {
-				background: var(--grey-200);
+				background: $grey-200;
 			}
 		}
 	}
@@ -131,7 +131,7 @@
 		}
 
 		.user img {
-			border: 2px solid var(--white);
+			border: 2px solid $white;
 			margin-right: 0;
 		}
 
@@ -140,7 +140,7 @@
 			top: 4px;
 			left: 2px;
 			color: $red;
-			background: var(--white);
+			background: $white;
 			padding: 0 4px;
 			display: block;
 			border-radius: 100%;
diff --git a/src/styles/components/color-picker.scss b/src/styles/components/color-picker.scss
index 88cd0f4dd..2df889c9a 100644
--- a/src/styles/components/color-picker.scss
+++ b/src/styles/components/color-picker.scss
@@ -5,7 +5,7 @@
 
   .verte__guide {
     border-radius: 100%;
-    border: 1px solid var(--grey-300);
+    border: 1px solid $grey-300;
     box-shadow: $card-shadow;
   }
 }
\ No newline at end of file
diff --git a/src/styles/components/datepicker.scss b/src/styles/components/datepicker.scss
index 8b97676b4..c4630b2ca 100644
--- a/src/styles/components/datepicker.scss
+++ b/src/styles/components/datepicker.scss
@@ -11,7 +11,7 @@
 		position: absolute;
 		z-index: 99;
 		width: 320px;
-		background: var(--white);
+		background: $white;
 		border-radius: $radius;
 		box-shadow: $card-shadow;
 
diff --git a/src/styles/components/gantt.scss b/src/styles/components/gantt.scss
index b2b01a2e3..7c2059d32 100644
--- a/src/styles/components/gantt.scss
+++ b/src/styles/components/gantt.scss
@@ -1,5 +1,5 @@
-$gantt-border: 1px solid var(--grey-200);
-$gantt-vertical-border-color: var(--grey-100);
+$gantt-border: 1px solid $grey-200;
+$gantt-vertical-border-color: $grey-100;
 
 .gantt-chart-container {
 	padding-bottom: 1rem;
@@ -7,7 +7,7 @@ $gantt-vertical-border-color: var(--grey-100);
 
 .gantt-chart {
 	overflow-x: auto;
-	border-top: 1px solid var(--grey-200);
+	border-top: 1px solid $grey-200;
 
 	.dates {
 		display: flex;
@@ -35,7 +35,7 @@ $gantt-vertical-border-color: var(--grey-100);
 
 						&.today {
 							background: $primary;
-							color: var(--white);
+							color: $white;
 							border-radius: 5px 5px 0 0;
 							font-weight: bold;
 						}
@@ -158,8 +158,8 @@ $gantt-vertical-border-color: var(--grey-100);
 				}
 
 				&.nodate {
-					border: 2px dashed var(--grey-300);
-					background: var(--grey-100);
+					border: 2px dashed $grey-300;
+					background: $grey-100;
 				}
 
 				&:active {
diff --git a/src/styles/components/hint-modal.scss b/src/styles/components/hint-modal.scss
index 18fb54788..e82b32d28 100644
--- a/src/styles/components/hint-modal.scss
+++ b/src/styles/components/hint-modal.scss
@@ -23,8 +23,8 @@
 
 				span {
 					padding: .1rem .35rem;
-					border: 1px solid var(--grey-300);
-					background: var(--grey-100);
+					border: 1px solid $grey-300;
+					background: $grey-100;
 					border-radius: 3px;
 					font-size: .75rem;
 				}
diff --git a/src/styles/components/kanban.scss b/src/styles/components/kanban.scss
index 79e41117f..7dc23dbe4 100644
--- a/src/styles/components/kanban.scss
+++ b/src/styles/components/kanban.scss
@@ -1,7 +1,7 @@
 @use 'sass:math';
 
-$bucket-background: var(--grey-100);
-$task-background: var(--white);
+$bucket-background: $grey-100;
+$task-background: $white;
 $ease-out: all .3s cubic-bezier(0.23, 1, 0.32, 1);
 $bucket-width: 300px;
 $bucket-header-height: 60px;
@@ -34,7 +34,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 
 	.ghost {
 		background: transparent !important;
-		border: 3px dashed var(--grey-300) !important;
+		border: 3px dashed $grey-300 !important;
 		box-shadow: none !important;
 
 		* {
@@ -162,7 +162,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 				.footer .icon,
 				.due-date,
 				.priority-label {
-					background: var(--grey-100);
+					background: $grey-100;
 					border-radius: $radius;
 					padding: 0 .5rem;
 				}
@@ -172,7 +172,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 				}
 
 				.task-id {
-					color: var(--grey-500);
+					color: $grey-500;
 					font-size: .8rem;
 					margin-bottom: .25rem;
 					display: flex;
@@ -193,21 +193,21 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 				}
 
 				&.has-light-text {
-					color: var(--white);
+					color: $white;
 
 					.task-id {
-						color: var(--grey-200);
+						color: $grey-200;
 					}
 
 					.footer .icon,
 					.due-date,
 					.priority-label {
-						background: var(--grey-800);
+						background: $grey-800;
 					}
 
 					.footer {
 						.icon svg {
-							fill: var(--white);
+							fill: $white;
 						}
 					}
 				}
@@ -307,7 +307,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 			background-color: transparent;
 
 			&:hover {
-				background-color: var(--white);
+				background-color: $white;
 			}
 		}
 	}
diff --git a/src/styles/components/keyboard-shortcuts.scss b/src/styles/components/keyboard-shortcuts.scss
index 2cbeee721..58ee3e8e6 100644
--- a/src/styles/components/keyboard-shortcuts.scss
+++ b/src/styles/components/keyboard-shortcuts.scss
@@ -4,7 +4,7 @@
 	right: 1rem;
 	z-index: 4500; // The modal has a z-index of 4000
 
-	color: var(--grey-500);
+	color: $grey-500;
 	transition: color $transition;
 	
 	@media screen and (max-width: $tablet) {
diff --git a/src/styles/components/labels.scss b/src/styles/components/labels.scss
index c76190ce6..2037afb75 100644
--- a/src/styles/components/labels.scss
+++ b/src/styles/components/labels.scss
@@ -5,7 +5,7 @@
 
   .tag {
     margin: .5rem 0 .5rem .5rem;
-    background: var(--grey-200);
+    background: $grey-200;
 
     &.disabled {
       opacity: 0.7;
diff --git a/src/styles/components/legal.scss b/src/styles/components/legal.scss
index e1c47682e..2a63faa54 100644
--- a/src/styles/components/legal.scss
+++ b/src/styles/components/legal.scss
@@ -1,6 +1,6 @@
 .legal-links {
   margin-top: 1rem;
   text-align: right;
-  color: var(--grey-300);
+  color: $grey-300;
   font-size: 1rem;
 }
\ No newline at end of file
diff --git a/src/styles/components/list-backgrounds.scss b/src/styles/components/list-backgrounds.scss
index c27d6f032..1bbe04b7d 100644
--- a/src/styles/components/list-backgrounds.scss
+++ b/src/styles/components/list-backgrounds.scss
@@ -5,7 +5,7 @@
     font-size: .8rem;
 
     a {
-      color: var(--grey-800);
+      color: $grey-800;
     }
   }
 
@@ -66,7 +66,7 @@
         background: rgba(0, 0, 0, 0.5);
         font-size: .75rem;
         font-weight: bold;
-        color: var(--white);
+        color: $white;
         transition: opacity $transition;
       }
 
diff --git a/src/styles/components/list.scss b/src/styles/components/list.scss
index 888aa87fc..825a4cac2 100644
--- a/src/styles/components/list.scss
+++ b/src/styles/components/list.scss
@@ -37,7 +37,7 @@
   }
 
   .dropdown-trigger {
-    color: var(--grey-400);
+    color: $grey-400;
     margin-left: 1rem;
     height: 1rem;
     width: 1rem;
@@ -137,7 +137,7 @@ $filter-container-top-link-share-list: -47px;
 }
 
 .list-namespace-title {
-  color: var(--grey-500);
+  color: $grey-500;
 }
 
 .link-share-container .gantt-chart-container .filter-container,
@@ -167,7 +167,7 @@ $list-spacing: 1rem;
   cursor: pointer;
   width: calc((100% - #{($lists-per-row - 1) * 1rem}) / #{$lists-per-row});
   height: $list-height;
-  background: var(--white);
+  background: $white;
   margin: 0 $list-spacing $list-spacing 0;
   padding: 1rem;
   border-radius: $radius;
@@ -261,8 +261,8 @@ $list-spacing: 1rem;
     background-position: center;
 
     .title {
-      text-shadow: 0 0 10px var(--black), 1px 1px 5px var(--grey-700), -1px -1px 5px var(--grey-700);
-      color: var(--white);
+      text-shadow: 0 0 10px $black, 1px 1px 5px $grey-700, -1px -1px 5px $grey-700;
+      color: $white;
     }
   }
 
diff --git a/src/styles/components/migrator.scss b/src/styles/components/migrator.scss
index 5d6bc6e65..a05f1066b 100644
--- a/src/styles/components/migrator.scss
+++ b/src/styles/components/migrator.scss
@@ -39,7 +39,7 @@
 
     span {
       transition: all 500ms ease;
-      background: var(--grey-500);
+      background: $grey-500;
       height: 10px;
       width: 10px;
       display: inline-block;
diff --git a/src/styles/components/modal.scss b/src/styles/components/modal.scss
index 4286e1743..81e72b694 100644
--- a/src/styles/components/modal.scss
+++ b/src/styles/components/modal.scss
@@ -59,7 +59,7 @@
       position: fixed;
       top: 5px;
       right: 26px;
-      color: var(--white);
+      color: $white;
       font-size: 2rem;
     }
 
diff --git a/src/styles/components/namespaces.scss b/src/styles/components/namespaces.scss
index 89712ba2b..2e63d051e 100644
--- a/src/styles/components/namespaces.scss
+++ b/src/styles/components/namespaces.scss
@@ -30,7 +30,7 @@
 
     .is-archived {
       font-size: 0.75rem;
-      border: 1px solid var(--grey-500);
+      border: 1px solid $grey-500;
       color: $grey !important;
       padding: 2px 4px;
       border-radius: 3px;
diff --git a/src/styles/components/notifications.scss b/src/styles/components/notifications.scss
index c115634f2..8b0f1d233 100644
--- a/src/styles/components/notifications.scss
+++ b/src/styles/components/notifications.scss
@@ -10,7 +10,7 @@
 
 		background: $primary;
 		border-radius: 100%;
-		border: 2px solid var(--white);
+		border: 2px solid $white;
 	}
 
 	.notifications-list {
@@ -20,7 +20,7 @@
 		max-height: 400px;
 		overflow-y: auto;
 
-		background: var(--white);
+		background: $white;
 		width: 350px;
 		max-width: calc(100vw - 2rem);
 		padding: .75rem .25rem;
@@ -46,7 +46,7 @@
 			transition: background-color $transition;
 
 			&:hover {
-				background: var(--grey-100);
+				background: $grey-100;
 				border-radius: $radius;
 			}
 
@@ -82,7 +82,7 @@
 			}
 
 			.created {
-				color: var(--grey-400);
+				color: $grey-400;
 			}
 
 			&:last-child {
@@ -90,14 +90,14 @@
 			}
 
 			a {
-				color: var(--grey-800);
+				color: $grey-800;
 			}
 		}
 
 		.nothing {
 			text-align: center;
 			padding: 1rem 0;
-			color: var(--grey-500);
+			color: $grey-500;
 
 			.explainer {
 				font-size: .75rem;
diff --git a/src/styles/components/quick-actions.scss b/src/styles/components/quick-actions.scss
index c841862d8..71583e9af 100644
--- a/src/styles/components/quick-actions.scss
+++ b/src/styles/components/quick-actions.scss
@@ -27,11 +27,11 @@
 	.results {
 		text-align: left;
 		width: 100%;
-		color: var(--grey-800);
+		color: $grey-800;
 
 		.result {
 			&-title {
-				background: var(--grey-50);
+				background: $grey-50;
 				padding: .5rem;
 				display: block;
 				font-size: .75rem;
@@ -53,12 +53,12 @@
 					cursor: pointer;
 
 					&:focus, &:hover {
-						background: var(--grey-50);
+						background: $grey-50;
 						box-shadow: none !important;
 					}
 
 					&:active {
-						background: var(--grey-100);
+						background: $grey-100;
 					}
 				}
 			}
diff --git a/src/styles/components/switch-view.scss b/src/styles/components/switch-view.scss
index 47dd09559..5827b981a 100644
--- a/src/styles/components/switch-view.scss
+++ b/src/styles/components/switch-view.scss
@@ -1,5 +1,5 @@
 .switch-view {
-  background: var(--white);
+  background: $white;
   display: inline-flex;
   border-radius: $radius;
   font-size: .75rem;
@@ -24,7 +24,7 @@
     }
 
     &.is-active, &:hover {
-      color: var(--white);
+      color: $white;
     }
 
     &.is-active {
diff --git a/src/styles/components/task.scss b/src/styles/components/task.scss
index 9aad37370..ecc81c59b 100644
--- a/src/styles/components/task.scss
+++ b/src/styles/components/task.scss
@@ -9,10 +9,10 @@
   }
 
   .subtitle {
-    color: var(--grey-500);
+    color: $grey-500;
 
     a {
-      color: var(--grey-800);
+      color: $grey-800;
     }
   }
 
@@ -21,7 +21,7 @@
   }
 
   .icon.is-grey {
-    color: var(--grey-400);
+    color: $grey-400;
   }
 
   .heading {
@@ -40,7 +40,7 @@
     }
 
     .title.task-id {
-      color: var(--grey-400);
+      color: $grey-400;
       white-space: nowrap;
     }
 
@@ -78,7 +78,7 @@
       margin: .1rem 0;
 
       &:hover {
-        background: var(--white);
+        background: $white;
       }
     }
 
@@ -94,7 +94,7 @@
 
     .detail-title {
       display: block;
-      color: var(--grey-400);
+      color: $grey-400;
     }
 
     .none {
@@ -175,7 +175,7 @@
 
   .created {
     font-size: .75rem;
-    color: var(--grey-500);
+    color: $grey-500;
     text-align: right;
   }
 }
@@ -211,7 +211,7 @@
 
 .is-done {
   background: $green;
-  color: var(--white);
+  color: $white;
   padding: .5rem;
   font-size: 1rem;
   margin-left: .5rem;
diff --git a/src/styles/components/taskRelations.scss b/src/styles/components/taskRelations.scss
index ea3c0a93a..4da758ee3 100644
--- a/src/styles/components/taskRelations.scss
+++ b/src/styles/components/taskRelations.scss
@@ -10,7 +10,7 @@ $remove-icon-width: 24px;
   }
 
   .different-list {
-    color: var(--grey-500);
+    color: $grey-500;
     width: auto;
   }
 
diff --git a/src/styles/components/tasks.scss b/src/styles/components/tasks.scss
index 76b7718ca..ceae69cdf 100644
--- a/src/styles/components/tasks.scss
+++ b/src/styles/components/tasks.scss
@@ -6,8 +6,8 @@
 
 		.ghost {
 			border-radius: $radius;
-			background: var(--grey-100);
-			border: 2px dashed var(--grey-300);
+			background: $grey-100;
+			border: 2px dashed $grey-300;
 
 			* {
 				opacity: 0;
@@ -59,7 +59,7 @@
 		}
 
 		&:hover {
-			background-color: var(--grey-100);
+			background-color: $grey-100;
 		}
 
 		.tasktext,
@@ -77,7 +77,7 @@
 
 		.task-list {
 			width: auto;
-			color: var(--grey-400);
+			color: $grey-400;
 			font-size: .9rem;
 			white-space: nowrap;
 		}
@@ -117,7 +117,7 @@
 			transition: color ease $transition-duration;
 
 			&:hover {
-				color: var(--grey-900);
+				color: $grey-900;
 			}
 		}
 
@@ -164,11 +164,11 @@
 
 		.tasktext.done {
 			text-decoration: line-through;
-			color: var(--grey-500);
+			color: $grey-500;
 		}
 
 		span.parent-tasks {
-			color: var(--grey-500);
+			color: $grey-500;
 			width: auto;
 		}
 
@@ -191,8 +191,8 @@
 			left: calc(50% - 1rem);
 			width: 2rem;
 			height: 2rem;
-			border-left-color: var(--grey-300);
-			border-bottom-color: var(--grey-300);
+			border-left-color: $grey-300;
+			border-bottom-color: $grey-300;
 		}
 	}
 
@@ -296,10 +296,10 @@
 	width: 100%;
 	max-width: $defer-task-max-width;
 	border-radius: $radius;
-	border: 1px solid var(--grey-200);
+	border: 1px solid $grey-200;
 	padding: 1rem;
 	margin: 1rem;
-	background: var(--white);
+	background: $white;
 	color: $text;
 	cursor: default;
 	z-index: 10;
diff --git a/src/styles/components/teams.scss b/src/styles/components/teams.scss
index bae93b52c..acf5b4a74 100644
--- a/src/styles/components/teams.scss
+++ b/src/styles/components/teams.scss
@@ -15,7 +15,7 @@ ul.teams {
       transition: background-color $transition;
 
       &:hover {
-        background: var(--grey-100);
+        background: $grey-100;
       }
     }
   }
diff --git a/src/styles/theme/content.scss b/src/styles/theme/content.scss
index 6642241b2..2485fc8df 100644
--- a/src/styles/theme/content.scss
+++ b/src/styles/theme/content.scss
@@ -24,7 +24,7 @@
     }
 
     .card {
-      background: var(--white);
+      background: $white;
     }
 	  
 	&.task\.detail {
@@ -71,7 +71,7 @@
 }
 
 .table.has-actions {
-  border-top: 1px solid var(--grey-100);
+  border-top: 1px solid $grey-100;
   border-radius: 4px;
   overflow: hidden;
 
diff --git a/src/styles/theme/form.scss b/src/styles/theme/form.scss
index 320f56bd8..e33835a0f 100644
--- a/src/styles/theme/form.scss
+++ b/src/styles/theme/form.scss
@@ -26,7 +26,7 @@
   }
 
   &.is-primary.is-outlined:hover {
-    color: var(--white);
+    color: $white;
   }
 
   &.is-small {
diff --git a/src/styles/theme/link-share.scss b/src/styles/theme/link-share.scss
index baa6e8a7f..a38856f29 100644
--- a/src/styles/theme/link-share.scss
+++ b/src/styles/theme/link-share.scss
@@ -10,11 +10,11 @@
   }
 
   .card {
-    background: var(--white);
+    background: $white;
   }
 
   .title {
-    text-shadow: 0 0 1rem var(--white);
+    text-shadow: 0 0 1rem $white;
   }
 }
 
diff --git a/src/styles/theme/navigation.scss b/src/styles/theme/navigation.scss
index f3d21ea1a..9201c350c 100644
--- a/src/styles/theme/navigation.scss
+++ b/src/styles/theme/navigation.scss
@@ -232,7 +232,7 @@
 					}
 
 					&:hover {
-						background: var(--white);
+						background: $white;
 
 						.dropdown-trigger {
 							opacity: 1;
@@ -253,7 +253,7 @@
 				}
 
 				.ghost {
-					background: var(--grey-200);
+					background: $grey-200;
 
 					* {
 						opacity: 0;
@@ -331,7 +331,7 @@
 			}
 
 			.icon {
-				color: var(--grey-400) !important;
+				color: $grey-400 !important;
 			}
 		}
 
@@ -361,7 +361,7 @@
 .navbar {
 	.trigger-button {
 		cursor: pointer;
-		color: var(--grey-400);
+		color: $grey-400;
 		padding: .5rem;
 		font-size: 1.25rem;
 		position: relative;
@@ -388,7 +388,7 @@
 		}
 
 		.logout-icon {
-			color: var(--grey-900);
+			color: $grey-900;
 
 			.icon {
 				vertical-align: middle;
@@ -413,13 +413,13 @@
 	z-index: 31;
 	font-weight: bold;
 	font-size: 2rem;
-	color: var(--grey-400);
+	color: $grey-400;
 	line-height: 1;
 	transition: all $transition;
 
 	&:hover, &:focus {
 		height: 1rem;
-		color: var(--grey-600);
+		color: $grey-600;
 	}
 }
 
@@ -430,7 +430,7 @@
 	&:before, &:after {
 		display: block;
 		content: '';
-		border-top: 3px solid var(--grey-400);
+		border-top: 3px solid $grey-400;
 		border-radius: $radius;
 		transition: all $transition;
 	}
@@ -444,7 +444,7 @@
 	}
 
 	&:hover, &:focus {
-		color: var(--grey-600);
+		color: $grey-600;
 
 		&:before {
 			margin-bottom: .75rem;
@@ -509,7 +509,7 @@
 
 .menu-bottom-link {
 	width: 100%;
-	color: var(--grey-300);
+	color: $grey-300;
 	text-align: center;
 	display: block;
 	margin: 1rem 0;
diff --git a/src/styles/theme/offline.scss b/src/styles/theme/offline.scss
index 165e5d964..d7aae53db 100644
--- a/src/styles/theme/offline.scss
+++ b/src/styles/theme/offline.scss
@@ -9,14 +9,14 @@
     position: absolute;
     width: 100vw;
     bottom: 5vh;
-    color: var(--white);
+    color: $white;
     padding: 0 1rem;
 
     h1 {
       font-weight: bold;
       font-size: 1.5rem;
       text-align: center;
-      color: var(--white);
+      color: $white;
       font-weight: 700 !important;
       font-size: 1.5rem;
     }
diff --git a/src/styles/theme/theme.scss b/src/styles/theme/theme.scss
index a516dcf82..a94202c7a 100644
--- a/src/styles/theme/theme.scss
+++ b/src/styles/theme/theme.scss
@@ -52,7 +52,7 @@ h6 {
   border-radius: $radius-large;
 
 	&::-moz-progress-bar, &::-webkit-progress-value {
-	  background: var(--grey-500);
+	  background: $grey-500;
 	}
 }
 
@@ -91,7 +91,7 @@ button.table {
   }
 
   .icon:not(.has-text-success) {
-    color: var(--grey-300) !important;
+    color: $grey-300 !important;
   }
 
   &.has-text-danger .icon {
diff --git a/src/styles/theme/update-notification.scss b/src/styles/theme/update-notification.scss
index 5f7990a4d..36cda4225 100644
--- a/src/styles/theme/update-notification.scss
+++ b/src/styles/theme/update-notification.scss
@@ -6,7 +6,7 @@
   padding: 0 0 0 .5rem;
   border-radius: $radius;
   font-size: .9rem;
-  color: var(--grey-900);
+  color: $grey-900;
   justify-content: space-between;
 
   @media screen and (max-width: $desktop) {
diff --git a/src/styles/variables/colors.scss b/src/styles/variables/colors.scss
index 9f08d80d2..84db3f316 100644
--- a/src/styles/variables/colors.scss
+++ b/src/styles/variables/colors.scss
@@ -1,21 +1,3 @@
-:root {
-	/* Original colors as CSS custom properties & converted to HSL */
-  --grey-50: hsl(210, 20%, 98%);
-  --grey-100: hsl(220, 14.3%, 95.9%);
-  --grey-200: hsl(220, 13%, 91%);
-  --grey-300: hsl(216, 12.2%, 83.9%);
-  --grey-400: hsl(217.9, 10.6%, 64.9%);
-  --grey-500: hsl(220, 8.9%, 46.1%);
-  --grey-600: hsl(215, 13.8%, 34.1%);
-  --grey-700: hsl(216.9, 19.1%, 26.7%);
-  --grey-800: hsl(215, 27.9%, 16.9%);
-  --grey-900: hsl(220.9, 39.3%, 11%);
-
-  --white: hsl(0, 0%, 100%);
-  --black: hsl(0, 0%, 4%);
-
-}
-
 $grey-50: #F9FAFB;
 $grey-100: #f3f4f6;
 $grey-200: #E5E7EB;
@@ -27,13 +9,18 @@ $grey-700: #374151;
 $grey-800: #1F2937;
 $grey-900: #111827;
 
-$white: #fff;
-$black: hsl(0, 0%, 4%) !default;
-$orange: #ff851b;
-$green: #00db60;
-$red: #ff4136;
-$blue: #1973ff;
-$primary: $blue;
+@media (prefers-color-scheme: dark) {
+  $grey-900: #F9FAFB;
+  $grey-800: #f3f4f6;
+  $grey-700: #E5E7EB;
+  $grey-600: #D1D5DB;
+  $grey-500: #9CA3AF;
+  $grey-400: #6B7280;
+  $grey-300: #4B5563;
+  $grey-200: #374151;
+  $grey-100: #1F2937;
+  $grey-50: #111827;
+}
 
 // Bulma defaults
 $grey-dark: $grey-800;
@@ -43,21 +30,3 @@ $grey-light: $grey-300;
 $grey-lighter: $grey-200;
 $grey-lightest: $grey-100;
 
-@media (prefers-color-scheme: dark) {
-  :root {
-		/* Light mode colours in revers order for dark mode */
-    --grey-900: hsl(210, 20%, 98%);
-    --grey-800: hsl(220, 14.3%, 95.9%);
-    --grey-700: hsl(220, 13%, 91%);
-    --grey-600: hsl(216, 12.2%, 83.9%);
-    --grey-500: hsl(217.9, 10.6%, 64.9%);
-    --grey-400: hsl(220, 8.9%, 46.1%);
-    --grey-300: hsl(215, 13.8%, 34.1%);
-    --grey-200: hsl(216.9, 19.1%, 26.7%);
-    --grey-100: hsl(215, 27.9%, 16.9%);
-    --grey-50: hsl(220.9, 39.3%, 11%);
-
-    --white: hsl(0, 0%, 4%);
-    --black: hsl(0, 0%, 100%);
-  }
-}
diff --git a/src/styles/variables/variables.scss b/src/styles/variables/variables.scss
index 91101334b..dbc7532b0 100644
--- a/src/styles/variables/variables.scss
+++ b/src/styles/variables/variables.scss
@@ -1,5 +1,13 @@
 @import 'colors';
 
+$white: #fff;
+$black: hsl(0, 0%, 4%) !default;
+$orange: #ff851b;
+$green: #00db60;
+$red: #ff4136;
+$blue: #1973ff;
+$primary: $blue;
+
 $info-invert: #fff;
 $family-sans-serif: 'Open Sans', Helvetica, Arial, sans-serif;
 $thickness: 1px;
@@ -8,7 +16,7 @@ $navbar-item-active-color: $primary;
 $dropdown-content-shadow: none;
 $navbar-dropdown-boxed-shadow: $dropdown-content-shadow;
 $bulmaswatch-import-font: false !default;
-$light-background: var(--grey-100);
+$light-background: $grey-100;
 $transition-duration: 100ms;
 $flash-background-duration: 750ms;
 
@@ -16,7 +24,7 @@ $vikunja-font: 'Quicksand', sans-serif;
 
 $navbar-padding: 2rem;
 $vikunja-nav-background: $light-background;
-$vikunja-nav-color: var(--grey-700);
+$vikunja-nav-color: $grey-700;
 $vikunja-nav-selected-width: 0.4rem;
 $vikunja-nav-logo-full-width: 164px;
 
@@ -24,9 +32,9 @@ $transition-duration: 150ms;
 $transition: $transition-duration ease;
 
 $scrollbar-height: 8px;
-$scrollbar-track-color: var(--grey-200);
-$scrollbar-thumb-color: var(--grey-300);
-$scrollbar-hover-color: var(--grey-500);
+$scrollbar-track-color: $grey-200;
+$scrollbar-thumb-color: $grey-300;
+$scrollbar-hover-color: $grey-500;
 
 $button-height: 34px;
 
@@ -41,4 +49,4 @@ $navbar-icon-width: 40px;
 
 $editor-border-color: #ddd;
 
-$dropdown-item-hover-background-color: var(--grey-100);
+$dropdown-item-hover-background-color: $grey-100;