diff --git a/src/styles/components/attachments.scss b/src/styles/components/attachments.scss
index c983ba076..ba476fe47 100644
--- a/src/styles/components/attachments.scss
+++ b/src/styles/components/attachments.scss
@@ -14,7 +14,7 @@
       padding: .5rem;
 
       &:hover {
-        background-color: $grey-200;
+        background-color: var(--grey-200);
       }
 
       .filename {
@@ -24,7 +24,7 @@
       }
 
       .info {
-        color: $grey-500;
+        color: var(--grey-500);
         font-size: .9rem;
 
         p {
@@ -96,7 +96,7 @@
         box-shadow: $shadow-md;
         background: $primary;
         padding: 1rem;
-        color: $white;
+        color: var(--white);
         width: 100%;
         max-width: 300px;
       }
diff --git a/src/styles/components/base/card.scss b/src/styles/components/base/card.scss
index 519f0a1af..305fd9a7f 100644
--- a/src/styles/components/base/card.scss
+++ b/src/styles/components/base/card.scss
@@ -1,5 +1,5 @@
 .card {
-  background-color: $white;
+  background-color: var(--white);
   border-radius: $radius;
   margin-bottom: 1rem;
 
@@ -11,17 +11,17 @@
 
   .card-header {
     box-shadow: none;
-    border-bottom: 1px solid $grey-200;
+    border-bottom: 1px solid var(--grey-200);
     border-radius: $radius $radius 0 0;
   }
 
   .modal-card-foot {
-    background: $grey-50;
+    background: var(--grey-50);
     border-top: 0;
   }
 }
 
 .box, .card {
-  border: 1px solid $grey-200;
+  border: 1px solid var(--grey-200);
   box-shadow: $shadow-sm;
 }
diff --git a/src/styles/components/base/multiselect.scss b/src/styles/components/base/multiselect.scss
index 789ae3db4..b66f32dfa 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: $white !important;
+		background: var(--white) !important;
 
 		&, &:focus-within {
-			border-bottom-color: $grey-200 !important;
+			border-bottom-color: var(--grey-200) !important;
 		}
 	}
 
 	.input-wrapper {
 		padding: 0;
-		background: $white !important;
-		border-color: $grey-200 !important;
+		background: var(--white) !important;
+		border-color: var(--grey-200) !important;
 		flex-wrap: wrap;
 		height: auto;
 
 		&:hover {
-			border-color: $grey-300 !important;
+			border-color: var(--grey-300) !important;
 		}
 
 		.input {
@@ -51,7 +51,7 @@
 
 		&:focus-within {
 			border-color: $primary !important;
-			background: $white !important;
+			background: var(--white) !important;
 		}
 
 		.loader {
@@ -60,7 +60,7 @@
 	}
 
 	.search-results {
-		background: $white;
+		background: var(--white);
 		border-radius: 0 0 $radius $radius;
 		border: 1px solid $primary;
 		border-top: none;
@@ -109,7 +109,7 @@
 			}
 
 			&:focus, &:hover {
-				background: $grey-100;
+				background: var(--grey-100);
 				box-shadow: none !important;
 
 				.hint-text {
@@ -118,7 +118,7 @@
 			}
 
 			&:active {
-				background: $grey-200;
+				background: var(--grey-200);
 			}
 		}
 	}
@@ -131,7 +131,7 @@
 		}
 
 		.user img {
-			border: 2px solid $white;
+			border: 2px solid var(--white);
 			margin-right: 0;
 		}
 
@@ -140,7 +140,7 @@
 			top: 4px;
 			left: 2px;
 			color: $red;
-			background: $white;
+			background: var(--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 2df889c9a..88cd0f4dd 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 $grey-300;
+    border: 1px solid var(--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 c4630b2ca..8b97676b4 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: $white;
+		background: var(--white);
 		border-radius: $radius;
 		box-shadow: $card-shadow;
 
diff --git a/src/styles/components/gantt.scss b/src/styles/components/gantt.scss
index 7c2059d32..b2b01a2e3 100644
--- a/src/styles/components/gantt.scss
+++ b/src/styles/components/gantt.scss
@@ -1,5 +1,5 @@
-$gantt-border: 1px solid $grey-200;
-$gantt-vertical-border-color: $grey-100;
+$gantt-border: 1px solid var(--grey-200);
+$gantt-vertical-border-color: var(--grey-100);
 
 .gantt-chart-container {
 	padding-bottom: 1rem;
@@ -7,7 +7,7 @@ $gantt-vertical-border-color: $grey-100;
 
 .gantt-chart {
 	overflow-x: auto;
-	border-top: 1px solid $grey-200;
+	border-top: 1px solid var(--grey-200);
 
 	.dates {
 		display: flex;
@@ -35,7 +35,7 @@ $gantt-vertical-border-color: $grey-100;
 
 						&.today {
 							background: $primary;
-							color: $white;
+							color: var(--white);
 							border-radius: 5px 5px 0 0;
 							font-weight: bold;
 						}
@@ -158,8 +158,8 @@ $gantt-vertical-border-color: $grey-100;
 				}
 
 				&.nodate {
-					border: 2px dashed $grey-300;
-					background: $grey-100;
+					border: 2px dashed var(--grey-300);
+					background: var(--grey-100);
 				}
 
 				&:active {
diff --git a/src/styles/components/hint-modal.scss b/src/styles/components/hint-modal.scss
index e82b32d28..18fb54788 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 $grey-300;
-					background: $grey-100;
+					border: 1px solid var(--grey-300);
+					background: var(--grey-100);
 					border-radius: 3px;
 					font-size: .75rem;
 				}
diff --git a/src/styles/components/kanban.scss b/src/styles/components/kanban.scss
index 7dc23dbe4..79e41117f 100644
--- a/src/styles/components/kanban.scss
+++ b/src/styles/components/kanban.scss
@@ -1,7 +1,7 @@
 @use 'sass:math';
 
-$bucket-background: $grey-100;
-$task-background: $white;
+$bucket-background: var(--grey-100);
+$task-background: var(--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 $grey-300 !important;
+		border: 3px dashed var(--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: $grey-100;
+					background: var(--grey-100);
 					border-radius: $radius;
 					padding: 0 .5rem;
 				}
@@ -172,7 +172,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 				}
 
 				.task-id {
-					color: $grey-500;
+					color: var(--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: $white;
+					color: var(--white);
 
 					.task-id {
-						color: $grey-200;
+						color: var(--grey-200);
 					}
 
 					.footer .icon,
 					.due-date,
 					.priority-label {
-						background: $grey-800;
+						background: var(--grey-800);
 					}
 
 					.footer {
 						.icon svg {
-							fill: $white;
+							fill: var(--white);
 						}
 					}
 				}
@@ -307,7 +307,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 			background-color: transparent;
 
 			&:hover {
-				background-color: $white;
+				background-color: var(--white);
 			}
 		}
 	}
diff --git a/src/styles/components/keyboard-shortcuts.scss b/src/styles/components/keyboard-shortcuts.scss
index 58ee3e8e6..2cbeee721 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: $grey-500;
+	color: var(--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 2037afb75..c76190ce6 100644
--- a/src/styles/components/labels.scss
+++ b/src/styles/components/labels.scss
@@ -5,7 +5,7 @@
 
   .tag {
     margin: .5rem 0 .5rem .5rem;
-    background: $grey-200;
+    background: var(--grey-200);
 
     &.disabled {
       opacity: 0.7;
diff --git a/src/styles/components/legal.scss b/src/styles/components/legal.scss
index 2a63faa54..e1c47682e 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: $grey-300;
+  color: var(--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 1bbe04b7d..c27d6f032 100644
--- a/src/styles/components/list-backgrounds.scss
+++ b/src/styles/components/list-backgrounds.scss
@@ -5,7 +5,7 @@
     font-size: .8rem;
 
     a {
-      color: $grey-800;
+      color: var(--grey-800);
     }
   }
 
@@ -66,7 +66,7 @@
         background: rgba(0, 0, 0, 0.5);
         font-size: .75rem;
         font-weight: bold;
-        color: $white;
+        color: var(--white);
         transition: opacity $transition;
       }
 
diff --git a/src/styles/components/list.scss b/src/styles/components/list.scss
index 825a4cac2..888aa87fc 100644
--- a/src/styles/components/list.scss
+++ b/src/styles/components/list.scss
@@ -37,7 +37,7 @@
   }
 
   .dropdown-trigger {
-    color: $grey-400;
+    color: var(--grey-400);
     margin-left: 1rem;
     height: 1rem;
     width: 1rem;
@@ -137,7 +137,7 @@ $filter-container-top-link-share-list: -47px;
 }
 
 .list-namespace-title {
-  color: $grey-500;
+  color: var(--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: $white;
+  background: var(--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 $black, 1px 1px 5px $grey-700, -1px -1px 5px $grey-700;
-      color: $white;
+      text-shadow: 0 0 10px var(--black), 1px 1px 5px var(--grey-700), -1px -1px 5px var(--grey-700);
+      color: var(--white);
     }
   }
 
diff --git a/src/styles/components/migrator.scss b/src/styles/components/migrator.scss
index a05f1066b..5d6bc6e65 100644
--- a/src/styles/components/migrator.scss
+++ b/src/styles/components/migrator.scss
@@ -39,7 +39,7 @@
 
     span {
       transition: all 500ms ease;
-      background: $grey-500;
+      background: var(--grey-500);
       height: 10px;
       width: 10px;
       display: inline-block;
diff --git a/src/styles/components/modal.scss b/src/styles/components/modal.scss
index 81e72b694..4286e1743 100644
--- a/src/styles/components/modal.scss
+++ b/src/styles/components/modal.scss
@@ -59,7 +59,7 @@
       position: fixed;
       top: 5px;
       right: 26px;
-      color: $white;
+      color: var(--white);
       font-size: 2rem;
     }
 
diff --git a/src/styles/components/namespaces.scss b/src/styles/components/namespaces.scss
index 2e63d051e..89712ba2b 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 $grey-500;
+      border: 1px solid var(--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 8b0f1d233..c115634f2 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 $white;
+		border: 2px solid var(--white);
 	}
 
 	.notifications-list {
@@ -20,7 +20,7 @@
 		max-height: 400px;
 		overflow-y: auto;
 
-		background: $white;
+		background: var(--white);
 		width: 350px;
 		max-width: calc(100vw - 2rem);
 		padding: .75rem .25rem;
@@ -46,7 +46,7 @@
 			transition: background-color $transition;
 
 			&:hover {
-				background: $grey-100;
+				background: var(--grey-100);
 				border-radius: $radius;
 			}
 
@@ -82,7 +82,7 @@
 			}
 
 			.created {
-				color: $grey-400;
+				color: var(--grey-400);
 			}
 
 			&:last-child {
@@ -90,14 +90,14 @@
 			}
 
 			a {
-				color: $grey-800;
+				color: var(--grey-800);
 			}
 		}
 
 		.nothing {
 			text-align: center;
 			padding: 1rem 0;
-			color: $grey-500;
+			color: var(--grey-500);
 
 			.explainer {
 				font-size: .75rem;
diff --git a/src/styles/components/quick-actions.scss b/src/styles/components/quick-actions.scss
index 71583e9af..c841862d8 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: $grey-800;
+		color: var(--grey-800);
 
 		.result {
 			&-title {
-				background: $grey-50;
+				background: var(--grey-50);
 				padding: .5rem;
 				display: block;
 				font-size: .75rem;
@@ -53,12 +53,12 @@
 					cursor: pointer;
 
 					&:focus, &:hover {
-						background: $grey-50;
+						background: var(--grey-50);
 						box-shadow: none !important;
 					}
 
 					&:active {
-						background: $grey-100;
+						background: var(--grey-100);
 					}
 				}
 			}
diff --git a/src/styles/components/switch-view.scss b/src/styles/components/switch-view.scss
index 5827b981a..47dd09559 100644
--- a/src/styles/components/switch-view.scss
+++ b/src/styles/components/switch-view.scss
@@ -1,5 +1,5 @@
 .switch-view {
-  background: $white;
+  background: var(--white);
   display: inline-flex;
   border-radius: $radius;
   font-size: .75rem;
@@ -24,7 +24,7 @@
     }
 
     &.is-active, &:hover {
-      color: $white;
+      color: var(--white);
     }
 
     &.is-active {
diff --git a/src/styles/components/task.scss b/src/styles/components/task.scss
index ecc81c59b..9aad37370 100644
--- a/src/styles/components/task.scss
+++ b/src/styles/components/task.scss
@@ -9,10 +9,10 @@
   }
 
   .subtitle {
-    color: $grey-500;
+    color: var(--grey-500);
 
     a {
-      color: $grey-800;
+      color: var(--grey-800);
     }
   }
 
@@ -21,7 +21,7 @@
   }
 
   .icon.is-grey {
-    color: $grey-400;
+    color: var(--grey-400);
   }
 
   .heading {
@@ -40,7 +40,7 @@
     }
 
     .title.task-id {
-      color: $grey-400;
+      color: var(--grey-400);
       white-space: nowrap;
     }
 
@@ -78,7 +78,7 @@
       margin: .1rem 0;
 
       &:hover {
-        background: $white;
+        background: var(--white);
       }
     }
 
@@ -94,7 +94,7 @@
 
     .detail-title {
       display: block;
-      color: $grey-400;
+      color: var(--grey-400);
     }
 
     .none {
@@ -175,7 +175,7 @@
 
   .created {
     font-size: .75rem;
-    color: $grey-500;
+    color: var(--grey-500);
     text-align: right;
   }
 }
@@ -211,7 +211,7 @@
 
 .is-done {
   background: $green;
-  color: $white;
+  color: var(--white);
   padding: .5rem;
   font-size: 1rem;
   margin-left: .5rem;
diff --git a/src/styles/components/taskRelations.scss b/src/styles/components/taskRelations.scss
index 4da758ee3..ea3c0a93a 100644
--- a/src/styles/components/taskRelations.scss
+++ b/src/styles/components/taskRelations.scss
@@ -10,7 +10,7 @@ $remove-icon-width: 24px;
   }
 
   .different-list {
-    color: $grey-500;
+    color: var(--grey-500);
     width: auto;
   }
 
diff --git a/src/styles/components/tasks.scss b/src/styles/components/tasks.scss
index ceae69cdf..76b7718ca 100644
--- a/src/styles/components/tasks.scss
+++ b/src/styles/components/tasks.scss
@@ -6,8 +6,8 @@
 
 		.ghost {
 			border-radius: $radius;
-			background: $grey-100;
-			border: 2px dashed $grey-300;
+			background: var(--grey-100);
+			border: 2px dashed var(--grey-300);
 
 			* {
 				opacity: 0;
@@ -59,7 +59,7 @@
 		}
 
 		&:hover {
-			background-color: $grey-100;
+			background-color: var(--grey-100);
 		}
 
 		.tasktext,
@@ -77,7 +77,7 @@
 
 		.task-list {
 			width: auto;
-			color: $grey-400;
+			color: var(--grey-400);
 			font-size: .9rem;
 			white-space: nowrap;
 		}
@@ -117,7 +117,7 @@
 			transition: color ease $transition-duration;
 
 			&:hover {
-				color: $grey-900;
+				color: var(--grey-900);
 			}
 		}
 
@@ -164,11 +164,11 @@
 
 		.tasktext.done {
 			text-decoration: line-through;
-			color: $grey-500;
+			color: var(--grey-500);
 		}
 
 		span.parent-tasks {
-			color: $grey-500;
+			color: var(--grey-500);
 			width: auto;
 		}
 
@@ -191,8 +191,8 @@
 			left: calc(50% - 1rem);
 			width: 2rem;
 			height: 2rem;
-			border-left-color: $grey-300;
-			border-bottom-color: $grey-300;
+			border-left-color: var(--grey-300);
+			border-bottom-color: var(--grey-300);
 		}
 	}
 
@@ -296,10 +296,10 @@
 	width: 100%;
 	max-width: $defer-task-max-width;
 	border-radius: $radius;
-	border: 1px solid $grey-200;
+	border: 1px solid var(--grey-200);
 	padding: 1rem;
 	margin: 1rem;
-	background: $white;
+	background: var(--white);
 	color: $text;
 	cursor: default;
 	z-index: 10;
diff --git a/src/styles/components/teams.scss b/src/styles/components/teams.scss
index acf5b4a74..bae93b52c 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: $grey-100;
+        background: var(--grey-100);
       }
     }
   }
diff --git a/src/styles/theme/content.scss b/src/styles/theme/content.scss
index 2485fc8df..6642241b2 100644
--- a/src/styles/theme/content.scss
+++ b/src/styles/theme/content.scss
@@ -24,7 +24,7 @@
     }
 
     .card {
-      background: $white;
+      background: var(--white);
     }
 	  
 	&.task\.detail {
@@ -71,7 +71,7 @@
 }
 
 .table.has-actions {
-  border-top: 1px solid $grey-100;
+  border-top: 1px solid var(--grey-100);
   border-radius: 4px;
   overflow: hidden;
 
diff --git a/src/styles/theme/form.scss b/src/styles/theme/form.scss
index e33835a0f..320f56bd8 100644
--- a/src/styles/theme/form.scss
+++ b/src/styles/theme/form.scss
@@ -26,7 +26,7 @@
   }
 
   &.is-primary.is-outlined:hover {
-    color: $white;
+    color: var(--white);
   }
 
   &.is-small {
diff --git a/src/styles/theme/link-share.scss b/src/styles/theme/link-share.scss
index a38856f29..baa6e8a7f 100644
--- a/src/styles/theme/link-share.scss
+++ b/src/styles/theme/link-share.scss
@@ -10,11 +10,11 @@
   }
 
   .card {
-    background: $white;
+    background: var(--white);
   }
 
   .title {
-    text-shadow: 0 0 1rem $white;
+    text-shadow: 0 0 1rem var(--white);
   }
 }
 
diff --git a/src/styles/theme/navigation.scss b/src/styles/theme/navigation.scss
index 9201c350c..f3d21ea1a 100644
--- a/src/styles/theme/navigation.scss
+++ b/src/styles/theme/navigation.scss
@@ -232,7 +232,7 @@
 					}
 
 					&:hover {
-						background: $white;
+						background: var(--white);
 
 						.dropdown-trigger {
 							opacity: 1;
@@ -253,7 +253,7 @@
 				}
 
 				.ghost {
-					background: $grey-200;
+					background: var(--grey-200);
 
 					* {
 						opacity: 0;
@@ -331,7 +331,7 @@
 			}
 
 			.icon {
-				color: $grey-400 !important;
+				color: var(--grey-400) !important;
 			}
 		}
 
@@ -361,7 +361,7 @@
 .navbar {
 	.trigger-button {
 		cursor: pointer;
-		color: $grey-400;
+		color: var(--grey-400);
 		padding: .5rem;
 		font-size: 1.25rem;
 		position: relative;
@@ -388,7 +388,7 @@
 		}
 
 		.logout-icon {
-			color: $grey-900;
+			color: var(--grey-900);
 
 			.icon {
 				vertical-align: middle;
@@ -413,13 +413,13 @@
 	z-index: 31;
 	font-weight: bold;
 	font-size: 2rem;
-	color: $grey-400;
+	color: var(--grey-400);
 	line-height: 1;
 	transition: all $transition;
 
 	&:hover, &:focus {
 		height: 1rem;
-		color: $grey-600;
+		color: var(--grey-600);
 	}
 }
 
@@ -430,7 +430,7 @@
 	&:before, &:after {
 		display: block;
 		content: '';
-		border-top: 3px solid $grey-400;
+		border-top: 3px solid var(--grey-400);
 		border-radius: $radius;
 		transition: all $transition;
 	}
@@ -444,7 +444,7 @@
 	}
 
 	&:hover, &:focus {
-		color: $grey-600;
+		color: var(--grey-600);
 
 		&:before {
 			margin-bottom: .75rem;
@@ -509,7 +509,7 @@
 
 .menu-bottom-link {
 	width: 100%;
-	color: $grey-300;
+	color: var(--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 d7aae53db..165e5d964 100644
--- a/src/styles/theme/offline.scss
+++ b/src/styles/theme/offline.scss
@@ -9,14 +9,14 @@
     position: absolute;
     width: 100vw;
     bottom: 5vh;
-    color: $white;
+    color: var(--white);
     padding: 0 1rem;
 
     h1 {
       font-weight: bold;
       font-size: 1.5rem;
       text-align: center;
-      color: $white;
+      color: var(--white);
       font-weight: 700 !important;
       font-size: 1.5rem;
     }
diff --git a/src/styles/theme/theme.scss b/src/styles/theme/theme.scss
index a94202c7a..a516dcf82 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: $grey-500;
+	  background: var(--grey-500);
 	}
 }
 
@@ -91,7 +91,7 @@ button.table {
   }
 
   .icon:not(.has-text-success) {
-    color: $grey-300 !important;
+    color: var(--grey-300) !important;
   }
 
   &.has-text-danger .icon {
diff --git a/src/styles/theme/update-notification.scss b/src/styles/theme/update-notification.scss
index 36cda4225..5f7990a4d 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: $grey-900;
+  color: var(--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 84db3f316..9f08d80d2 100644
--- a/src/styles/variables/colors.scss
+++ b/src/styles/variables/colors.scss
@@ -1,3 +1,21 @@
+: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;
@@ -9,18 +27,13 @@ $grey-700: #374151;
 $grey-800: #1F2937;
 $grey-900: #111827;
 
-@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;
-}
+$white: #fff;
+$black: hsl(0, 0%, 4%) !default;
+$orange: #ff851b;
+$green: #00db60;
+$red: #ff4136;
+$blue: #1973ff;
+$primary: $blue;
 
 // Bulma defaults
 $grey-dark: $grey-800;
@@ -30,3 +43,21 @@ $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 dbc7532b0..91101334b 100644
--- a/src/styles/variables/variables.scss
+++ b/src/styles/variables/variables.scss
@@ -1,13 +1,5 @@
 @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;
@@ -16,7 +8,7 @@ $navbar-item-active-color: $primary;
 $dropdown-content-shadow: none;
 $navbar-dropdown-boxed-shadow: $dropdown-content-shadow;
 $bulmaswatch-import-font: false !default;
-$light-background: $grey-100;
+$light-background: var(--grey-100);
 $transition-duration: 100ms;
 $flash-background-duration: 750ms;
 
@@ -24,7 +16,7 @@ $vikunja-font: 'Quicksand', sans-serif;
 
 $navbar-padding: 2rem;
 $vikunja-nav-background: $light-background;
-$vikunja-nav-color: $grey-700;
+$vikunja-nav-color: var(--grey-700);
 $vikunja-nav-selected-width: 0.4rem;
 $vikunja-nav-logo-full-width: 164px;
 
@@ -32,9 +24,9 @@ $transition-duration: 150ms;
 $transition: $transition-duration ease;
 
 $scrollbar-height: 8px;
-$scrollbar-track-color: $grey-200;
-$scrollbar-thumb-color: $grey-300;
-$scrollbar-hover-color: $grey-500;
+$scrollbar-track-color: var(--grey-200);
+$scrollbar-thumb-color: var(--grey-300);
+$scrollbar-hover-color: var(--grey-500);
 
 $button-height: 34px;
 
@@ -49,4 +41,4 @@ $navbar-icon-width: 40px;
 
 $editor-border-color: #ddd;
 
-$dropdown-item-hover-background-color: $grey-100;
+$dropdown-item-hover-background-color: var(--grey-100);