diff --git a/src/App.vue b/src/App.vue
index dec28560a..5138a8b91 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -133,14 +133,14 @@ export default defineComponent({
     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/components/home/contentAuth.vue b/src/components/home/contentAuth.vue
index d68cdb43f..56252ffc6 100644
--- a/src/components/home/contentAuth.vue
+++ b/src/components/home/contentAuth.vue
@@ -166,7 +166,7 @@ export default {
 	}
 
     .card {
-      background: $white;
+      background: var(--white);
     }
   }
 }
@@ -195,7 +195,7 @@ export default {
 	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/components/home/contentLinkShare.vue b/src/components/home/contentLinkShare.vue
index 7dff2fbb9..d0d708c91 100644
--- a/src/components/home/contentLinkShare.vue
+++ b/src/components/home/contentLinkShare.vue
@@ -65,11 +65,11 @@ export default {
   }
 
   .card {
-    background: $white;
+    background: var(--white);
   }
 
   .title {
-    text-shadow: 0 0 1rem $white;
+    text-shadow: 0 0 1rem var(--white);
   }
 }
 </style>
diff --git a/src/components/home/contentNoAuth.vue b/src/components/home/contentNoAuth.vue
index b95739067..30204e5eb 100644
--- a/src/components/home/contentNoAuth.vue
+++ b/src/components/home/contentNoAuth.vue
@@ -68,7 +68,7 @@ export default {
 
 <style lang="scss" scoped>
 .no-auth-wrapper {
-  background: url('@/assets/llama.svg') no-repeat bottom left fixed $light-background;
+  background: url('@/assets/llama.svg') no-repeat bottom left fixed var(--light-background);
   min-height: 100vh;
 }
 
diff --git a/src/components/home/navigation.vue b/src/components/home/navigation.vue
index b41a7c781..c806a8465 100644
--- a/src/components/home/navigation.vue
+++ b/src/components/home/navigation.vue
@@ -278,8 +278,8 @@ export default {
 
 <style lang="scss" scoped>
 $navbar-padding: 2rem;
-$vikunja-nav-background: $light-background;
-$vikunja-nav-color: $grey-700;
+$vikunja-nav-background: var(--light-background);
+$vikunja-nav-color: var(--grey-700);
 $vikunja-nav-selected-width: 0.4rem;
 
 .namespace-container {
@@ -347,12 +347,12 @@ $vikunja-nav-selected-width: 0.4rem;
 				opacity: 0;
 
 				&:hover {
-					color: $orange;
+					color: var(--warning);
 				}
 
 				&.is-favorite {
 					opacity: 1;
-					color: $orange;
+					color: var(--warning);
 				}
 			}
 
@@ -434,7 +434,7 @@ $vikunja-nav-selected-width: 0.4rem;
 				align-items: center;
 
 				&:hover {
-					background: $white;
+					background: var(--white);
 				}
 
 				:deep(.dropdown-trigger) {
@@ -462,7 +462,7 @@ $vikunja-nav-selected-width: 0.4rem;
 			}
 
 			.ghost {
-				background: $grey-200;
+				background: var(--grey-200);
 
 				* {
 					opacity: 0;
@@ -502,16 +502,16 @@ $vikunja-nav-selected-width: 0.4rem;
 				}
 
 				&.router-link-exact-active {
-					color: $primary;
-					border-left: $vikunja-nav-selected-width solid $primary;
+					color: var(--primary);
+					border-left: $vikunja-nav-selected-width solid var(--primary);
 
 					.icon {
-						color: $primary;
+						color: var(--primary);
 					}
 				}
 
 				&:hover {
-					border-left: $vikunja-nav-selected-width solid $primary;
+					border-left: $vikunja-nav-selected-width solid var(--primary);
 				}
 			}
 		}
@@ -537,7 +537,7 @@ $vikunja-nav-selected-width: 0.4rem;
 		}
 
 		.icon {
-			color: $grey-400 !important;
+			color: var(--grey-400) !important;
 		}
 	}
 
diff --git a/src/components/home/topNavigation.vue b/src/components/home/topNavigation.vue
index 063152574..831c5d5f1 100644
--- a/src/components/home/topNavigation.vue
+++ b/src/components/home/topNavigation.vue
@@ -172,7 +172,7 @@ $vikunja-nav-logo-full-width: 164px;
 }
 
 .navbar.main-theme {
-	background: $light-background;
+	background: var(--light-background);
 	z-index: 5 !important;
 	justify-content: space-between;
 	align-items: center;
@@ -231,7 +231,7 @@ $vikunja-nav-logo-full-width: 164px;
 	:deep() {
 		.trigger-button {
 			cursor: pointer;
-			color: $grey-400;
+			color: var(--grey-400);
 			padding: .5rem;
 			font-size: 1.25rem;
 			position: relative;
@@ -290,7 +290,7 @@ $vikunja-nav-logo-full-width: 164px;
   }
 
   :deep(.dropdown-trigger) {
-    color: $grey-400;
+    color: var(--grey-400);
     margin-left: 1rem;
     height: 1rem;
     width: 1rem;
diff --git a/src/components/home/update.vue b/src/components/home/update.vue
index d61070594..ff0a018e7 100644
--- a/src/components/home/update.vue
+++ b/src/components/home/update.vue
@@ -57,7 +57,7 @@ export default {
 	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/components/input/button.vue b/src/components/input/button.vue
index 57890913b..256f6350a 100644
--- a/src/components/input/button.vue
+++ b/src/components/input/button.vue
@@ -103,7 +103,7 @@ export default {
   }
 
   &.is-primary.is-outlined:hover {
-    color: $white;
+    color: var(--white);
   }
 
   &.is-small {
diff --git a/src/components/input/colorPicker.vue b/src/components/input/colorPicker.vue
index b7cb31827..047c6212e 100644
--- a/src/components/input/colorPicker.vue
+++ b/src/components/input/colorPicker.vue
@@ -127,7 +127,7 @@ export default {
 		height: $PICKER_SIZE;
 		overflow: hidden;
 		border-radius: 100%;
-		border: $BORDER_WIDTH solid $grey-300;
+		border: $BORDER_WIDTH solid var(--grey-300);
 		box-shadow: $shadow;
 
 		& > * {
diff --git a/src/components/input/datepicker.vue b/src/components/input/datepicker.vue
index 85ecd5513..414ecbbd6 100644
--- a/src/components/input/datepicker.vue
+++ b/src/components/input/datepicker.vue
@@ -258,7 +258,7 @@ export default {
 		position: absolute;
 		z-index: 99;
 		width: 320px;
-		background: $white;
+		background: var(--white);
 		border-radius: $radius;
 		box-shadow: $shadow;
 
@@ -272,7 +272,7 @@ export default {
 			padding: 0 .5rem;
 			width: 100%;
 			height: 2.25rem;
-			color: $text;
+			color: var(--text);
 			transition: all $transition;
 
 			&:first-child {
@@ -280,7 +280,7 @@ export default {
 			}
 
 			&:hover {
-				background: $light;
+				background: var(--light);
 			}
 
 			.text {
@@ -291,7 +291,7 @@ export default {
 				padding-right: .25rem;
 
 				.weekday {
-					color: $text-light;
+					color: var(--text-light);
 					text-transform: capitalize;
 				}
 			}
diff --git a/src/components/input/editor.vue b/src/components/input/editor.vue
index c782d68db..34aaa617e 100644
--- a/src/components/input/editor.vue
+++ b/src/components/input/editor.vue
@@ -344,7 +344,7 @@ $editor-border-color: #ddd;
 	}
 
 	&-placeholder {
-		color: $grey-400 !important;
+		color: var(--grey-400) !important;
 		font-style: italic;
 	}
 }
@@ -383,7 +383,7 @@ $editor-border-color: #ddd;
 
 pre.CodeMirror-line {
 	margin-bottom: 0 !important;
-	color: $grey-700 !important;
+	color: var(--grey-700) !important;
 }
 
 .cm-header {
@@ -409,10 +409,10 @@ ul.actions {
 	}
 
 	&, a {
-		color: $grey-500;
+		color: var(--grey-500);
 
 		&.done-edit {
-			color: $primary;
+			color: var(--primary);
 		}
 	}
 
diff --git a/src/components/input/fancycheckbox.vue b/src/components/input/fancycheckbox.vue
index c882427b9..5280d1318 100644
--- a/src/components/input/fancycheckbox.vue
+++ b/src/components/input/fancycheckbox.vue
@@ -106,7 +106,7 @@ svg {
 }
 
 .check:hover svg {
-	stroke: $primary;
+	stroke: var(--primary);
 }
 
 .is-disabled .check:hover svg {
@@ -125,7 +125,7 @@ polyline {
 
 input[type=checkbox]:checked + .check {
 	svg {
-		stroke: $primary;
+		stroke: var(--primary);
 	}
 
 	path {
diff --git a/src/components/input/multiselect.vue b/src/components/input/multiselect.vue
index bdd0dc891..cdc50c803 100644
--- a/src/components/input/multiselect.vue
+++ b/src/components/input/multiselect.vue
@@ -377,23 +377,23 @@ export default {
 
 	&.has-search-results .input-wrapper {
 		border-radius: $radius $radius 0 0;
-		border-color: $primary !important;
-		background: $white !important;
+		border-color: var(--primary) !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 {
@@ -419,8 +419,8 @@ export default {
 		}
 
 		&:focus-within {
-			border-color: $primary !important;
-			background: $white !important;
+			border-color: var(--primary) !important;
+			background: var(--white) !important;
 		}
 
 		.loader {
@@ -429,9 +429,9 @@ export default {
 	}
 
 	.search-results {
-		background: $white;
+		background: var(--white);
 		border-radius: 0 0 $radius $radius;
-		border: 1px solid $primary;
+		border: 1px solid var(--primary);
 		border-top: none;
 
 		max-height: 50vh;
@@ -478,16 +478,16 @@ export default {
 			}
 
 			&:focus, &:hover {
-				background: $grey-100;
+				background: var(--grey-100);
 				box-shadow: none !important;
 
 				.hint-text {
-					color: $text;
+					color: var(--text);
 				}
 			}
 
 			&:active {
-				background: $grey-200;
+				background: var(--grey-200);
 			}
 		}
 	}
diff --git a/src/components/list/partials/list-card.vue b/src/components/list/partials/list-card.vue
index ff415fb26..09a1e71e3 100644
--- a/src/components/list/partials/list-card.vue
+++ b/src/components/list/partials/list-card.vue
@@ -86,7 +86,7 @@ export default {
   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;
@@ -158,7 +158,7 @@ export default {
     font-family: $vikunja-font;
     font-weight: 400;
     font-size: 1.5rem;
-    color: $text;
+    color: var(--text);
     width: 100%;
     margin-bottom: 0;
     max-height: calc(100% - 2rem); // 1rem padding, 1rem height of the "is archived" badge
@@ -171,7 +171,7 @@ export default {
   }
 
   &.has-light-text .title {
-    color: $light;
+    color: var(--light);
   }
 
   &.has-background {
@@ -180,8 +180,8 @@ export default {
     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);
     }
   }
 
@@ -190,7 +190,7 @@ export default {
     opacity: 0;
 
     &:hover {
-      color: $orange;
+      color: var(--warning);
     }
 
     &.is-archived {
@@ -200,7 +200,7 @@ export default {
     &.is-favorite {
       display: inline-block;
       opacity: 1;
-      color: $orange;
+      color: var(--warning);
     }
   }
 
diff --git a/src/components/misc/Done.vue b/src/components/misc/Done.vue
index 4dcdf0380..60b173f2a 100644
--- a/src/components/misc/Done.vue
+++ b/src/components/misc/Done.vue
@@ -40,8 +40,8 @@ export default {
 
 <style lang="scss" scoped>
 .is-done {
-  background: $green;
-  color: $white;
+  background: var(--success);
+  color: var(--white);
   padding: .5rem;
   font-weight: bold;
   line-height: 1;
diff --git a/src/components/misc/api-config.vue b/src/components/misc/api-config.vue
index a60f0bb58..861b1dac8 100644
--- a/src/components/misc/api-config.vue
+++ b/src/components/misc/api-config.vue
@@ -208,7 +208,7 @@ export default {
   text-align: right;
 
   span.url {
-    border-bottom: 1px dashed $primary;
+    border-bottom: 1px dashed var(--primary);
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/components/misc/card.vue b/src/components/misc/card.vue
index 8db04b3a6..bf6cc501d 100644
--- a/src/components/misc/card.vue
+++ b/src/components/misc/card.vue
@@ -57,22 +57,22 @@ export default {
 
 <style lang="scss" scoped>
 .card {
-  background-color: $white;
+  background-color: var(--white);
   border-radius: $radius;
   margin-bottom: 1rem;
-  border: 1px solid $grey-200;
+  border: 1px solid var(--grey-200);
   box-shadow: $shadow-sm;
 }
 
 .card-header {
   box-shadow: none;
-  border-bottom: 1px solid $grey-200;
+  border-bottom: 1px solid var(--grey-200);
   border-radius: $radius $radius 0 0;
 }
 
 // FIXME: should maybe be merged somehow with modal
 :deep(.modal-card-foot) {
-  background-color: $grey-50;
+  background-color: var(--grey-50);
   border-top: 0;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/misc/legal.vue b/src/components/misc/legal.vue
index ff74921ac..c4e7c21ee 100644
--- a/src/components/misc/legal.vue
+++ b/src/components/misc/legal.vue
@@ -22,7 +22,7 @@ export default {
 .legal-links {
   margin-top: 1rem;
   text-align: right;
-  color: $grey-300;
+  color: var(--grey-300);
   font-size: 1rem;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/misc/shortcut.vue b/src/components/misc/shortcut.vue
index 5d155db20..0afe177e1 100644
--- a/src/components/misc/shortcut.vue
+++ b/src/components/misc/shortcut.vue
@@ -27,8 +27,8 @@ export default {
 
 kbd {
 	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/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index b67d8816a..51442b517 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -145,9 +145,9 @@ export default {
 		width: .75rem;
 		height: .75rem;
 
-		background: $primary;
+		background: var(--primary);
 		border-radius: 100%;
-		border: 2px solid $white;
+		border: 2px solid var(--white);
 	}
 
 	.notifications-list {
@@ -157,7 +157,7 @@ export default {
 		max-height: 400px;
 		overflow-y: auto;
 
-		background: $white;
+		background: var(--white);
 		width: 350px;
 		max-width: calc(100vw - 2rem);
 		padding: .75rem .25rem;
@@ -183,14 +183,14 @@ export default {
 			transition: background-color $transition;
 
 			&:hover {
-				background: $grey-100;
+				background: var(--grey-100);
 				border-radius: $radius;
 			}
 
 			.read-indicator {
 				width: .35rem;
 				height: .35rem;
-				background: $primary;
+				background: var(--primary);
 				border-radius: 100%;
 				margin-left: .5rem;
 
@@ -219,7 +219,7 @@ export default {
 			}
 
 			.created {
-				color: $grey-400;
+				color: var(--grey-400);
 			}
 
 			&:last-child {
@@ -227,14 +227,14 @@ export default {
 			}
 
 			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/components/quick-actions/quick-actions.vue b/src/components/quick-actions/quick-actions.vue
index 93388d86b..204dd4ebe 100644
--- a/src/components/quick-actions/quick-actions.vue
+++ b/src/components/quick-actions/quick-actions.vue
@@ -490,11 +490,11 @@ export default {
 	.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;
@@ -516,12 +516,12 @@ export default {
 					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/components/tasks/edit-task.vue b/src/components/tasks/edit-task.vue
index d032fc94c..2969f7084 100644
--- a/src/components/tasks/edit-task.vue
+++ b/src/components/tasks/edit-task.vue
@@ -160,7 +160,7 @@ ul.assingees {
 
 		a {
 			float: right;
-			color: $red;
+			color: var(--danger);
 			transition: all $transition;
 		}
 	}
diff --git a/src/components/tasks/gantt-component.vue b/src/components/tasks/gantt-component.vue
index 874977dc7..53e218a18 100644
--- a/src/components/tasks/gantt-component.vue
+++ b/src/components/tasks/gantt-component.vue
@@ -447,12 +447,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-$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 {
 	overflow-x: auto;
-	border-top: 1px solid $grey-200;
+	border-top: 1px solid var(--grey-200);
 
 	.dates {
 		display: flex;
@@ -479,8 +479,8 @@ $gantt-vertical-border-color: $grey-100;
 						font-weight: normal;
 
 						&.today {
-							background: $primary;
-							color: $white;
+							background: var(--primary);
+							color: var(--white);
 							border-radius: 5px 5px 0 0;
 							font-weight: bold;
 						}
@@ -510,7 +510,7 @@ $gantt-vertical-border-color: $grey-100;
 
 			.task {
 				display: inline-block;
-				border: 2px solid $primary;
+				border: 2px solid var(--primary);
 				font-size: 0.85rem;
 				margin: 0.5rem;
 				border-radius: 6px;
@@ -523,30 +523,30 @@ $gantt-vertical-border-color: $grey-100;
 				user-select: none; // Non-prefixed version
 
 				&.is-current-edit {
-					border-color: $orange !important;
+					border-color: var(--warning) !important;
 				}
 
 				&.has-light-text {
-					color: $light;
+					color: var(--light);
 
 					&.done span:after {
-						border-top: 1px solid $light;
+						border-top: 1px solid var(--light);
 					}
 
 					.edit-toggle {
-						color: $light;
+						color: var(--light);
 					}
 				}
 
 				&.has-dark-text {
-					color: $text;
+					color: var(--text);
 
 					&.done span:after {
-						border-top: 1px solid $dark;
+						border-top: 1px solid var(--dark);
 					}
 
 					.edit-toggle {
-						color: $text;
+						color: var(--text);
 					}
 				}
 
@@ -599,8 +599,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/components/tasks/partials/attachments.vue b/src/components/tasks/partials/attachments.vue
index 17cd98e60..bad2430a1 100644
--- a/src/components/tasks/partials/attachments.vue
+++ b/src/components/tasks/partials/attachments.vue
@@ -267,17 +267,17 @@ export default {
       padding: .5rem;
 
       &:hover {
-        background-color: $grey-200;
+        background-color: var(--grey-200);
       }
 
       .filename {
         font-weight: bold;
         margin-bottom: .25rem;
-        color: $text;
+        color: var(--text);
       }
 
       .info {
-        color: $grey-500;
+        color: var(--grey-500);
         font-size: .9rem;
 
         p {
@@ -347,9 +347,9 @@ export default {
         margin: .5rem auto 2rem;
         border-radius: 2px;
         box-shadow: $shadow-md;
-        background: $primary;
+        background: var(--primary);
         padding: 1rem;
-        color: $white;
+        color: var(--white);
         width: 100%;
         max-width: 300px;
       }
diff --git a/src/components/tasks/partials/checklist-summary.vue b/src/components/tasks/partials/checklist-summary.vue
index 85b6f85bb..97bbb37eb 100644
--- a/src/components/tasks/partials/checklist-summary.vue
+++ b/src/components/tasks/partials/checklist-summary.vue
@@ -39,7 +39,7 @@ export default {
 
 <style scoped lang="scss">
 .checklist-summary {
-	color: $grey-500;
+	color: var(--grey-500);
 	display: inline-flex;
 	align-items: center;
 
@@ -49,10 +49,10 @@ export default {
 		margin-right: .25rem;
 
 		circle {
-			stroke: $grey-400;
+			stroke: var(--grey-400);
 
 			&:last-child {
-				stroke: $primary;
+				stroke: var(--primary);
 			}
 		}
 	}
diff --git a/src/components/tasks/partials/defer-task.vue b/src/components/tasks/partials/defer-task.vue
index 6cfc126e9..54d25b392 100644
--- a/src/components/tasks/partials/defer-task.vue
+++ b/src/components/tasks/partials/defer-task.vue
@@ -141,11 +141,11 @@ $defer-task-max-width: 350px + 100px;
 	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;
-	color: $text;
+	background: var(--white);
+	color: var(--text);
 	cursor: default;
 	z-index: 10;
 	box-shadow: $shadow-lg;
diff --git a/src/components/tasks/partials/editAssignees.vue b/src/components/tasks/partials/editAssignees.vue
index 4eb354263..64fc768bc 100644
--- a/src/components/tasks/partials/editAssignees.vue
+++ b/src/components/tasks/partials/editAssignees.vue
@@ -127,7 +127,7 @@ export default {
 	}
 
 	:deep(.user img) {
-		border: 2px solid $white;
+		border: 2px solid var(--white);
 		margin-right: 0;
 	}
 
@@ -135,8 +135,8 @@ export default {
 		position: absolute;
 		top: 4px;
 		left: 2px;
-		color: $red;
-		background: $white;
+		color: var(--danger);
+		background: var(--white);
 		padding: 0 4px;
 		display: block;
 		border-radius: 100%;
diff --git a/src/components/tasks/partials/kanban-card.vue b/src/components/tasks/partials/kanban-card.vue
index ae5187103..af00fe235 100644
--- a/src/components/tasks/partials/kanban-card.vue
+++ b/src/components/tasks/partials/kanban-card.vue
@@ -117,7 +117,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-$task-background: $white;
+$task-background: var(--white);
 
 .task {
 	-webkit-touch-callout: none; // iOS Safari
@@ -163,7 +163,7 @@ $task-background: $white;
 		}
 
 		&.overdue {
-			color: $red;
+			color: var(--danger);
 		}
 	}
 
@@ -219,7 +219,7 @@ $task-background: $white;
 	.footer .icon,
 	.due-date,
 	.priority-label {
-		background: $grey-100;
+		background: var(--grey-100);
 		border-radius: $radius;
 		padding: 0 .5rem;
 	}
@@ -229,7 +229,7 @@ $task-background: $white;
 	}
 
 	.task-id {
-		color: $grey-500;
+		color: var(--grey-500);
 		font-size: .8rem;
 		margin-bottom: .25rem;
 		display: flex;
@@ -244,21 +244,21 @@ $task-background: $white;
 	}
 
 	&.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);
 			}
 		}
 	}
diff --git a/src/components/tasks/partials/listSearch.vue b/src/components/tasks/partials/listSearch.vue
index ea642f1f2..95258aec6 100644
--- a/src/components/tasks/partials/listSearch.vue
+++ b/src/components/tasks/partials/listSearch.vue
@@ -82,6 +82,6 @@ export default {
 
 <style lang="scss" scoped>
 .list-namespace-title {
-  color: $grey-500;
+  color: var(--grey-500);
 }
 </style>
\ No newline at end of file
diff --git a/src/components/tasks/partials/priorityLabel.vue b/src/components/tasks/partials/priorityLabel.vue
index 11e4d0175..0625412b1 100644
--- a/src/components/tasks/partials/priorityLabel.vue
+++ b/src/components/tasks/partials/priorityLabel.vue
@@ -54,7 +54,7 @@ export default {
 }
 
 span.high-priority {
-	color: $red;
+	color: var(--danger);
 	width: auto !important; // To override the width set in tasks
 
 	.icon {
@@ -64,7 +64,7 @@ span.high-priority {
 	}
 
 	&.not-so-high {
-		color: $orange;
+		color: var(--warning);
 	}
 }
 </style>
\ No newline at end of file
diff --git a/src/components/tasks/partials/relatedTasks.vue b/src/components/tasks/partials/relatedTasks.vue
index 3badac6cc..df247ceda 100644
--- a/src/components/tasks/partials/relatedTasks.vue
+++ b/src/components/tasks/partials/relatedTasks.vue
@@ -274,7 +274,7 @@ $remove-icon-width: 24px;
   }
 
   .different-list {
-    color: $grey-500;
+    color: var(--grey-500);
     width: auto;
   }
 
@@ -312,16 +312,16 @@ $remove-icon-width: 24px;
 		border: 2px solid transparent;
 
 		a {
-			color: $text;
+			color: var(--text);
 			transition: color ease $transition-duration;
 
 			&:hover {
-				color: $grey-900;
+				color: var(--grey-900);
 			}
 		}
 
 		.remove {
-			color: $red;
+			color: var(--danger);
 		}
 	}
   }
diff --git a/src/components/tasks/partials/reminders.vue b/src/components/tasks/partials/reminders.vue
index 9d2a629ff..45a0ceabb 100644
--- a/src/components/tasks/partials/reminders.vue
+++ b/src/components/tasks/partials/reminders.vue
@@ -112,7 +112,7 @@ export default {
     align-items: center;
 
     &.overdue :deep(.datepicker a.show) {
-      color: $red;
+      color: var(--danger);
     }
 
     &:last-child {
@@ -120,7 +120,7 @@ export default {
     }
 
     a.remove {
-      color: $red;
+      color: var(--danger);
       padding-left: .5rem;
     }
   }
diff --git a/src/components/tasks/partials/singleTaskInList.vue b/src/components/tasks/partials/singleTaskInList.vue
index da679bcaa..9e955d5c8 100644
--- a/src/components/tasks/partials/singleTaskInList.vue
+++ b/src/components/tasks/partials/singleTaskInList.vue
@@ -227,7 +227,7 @@ export default {
 	border: 2px solid transparent;
 
 	&:hover {
-		background-color: $grey-100;
+		background-color: var(--grey-100);
 	}
 
 	.tasktext,
@@ -239,13 +239,13 @@ export default {
 		flex: 1 0 50%;
 
 		.overdue {
-			color: $red;
+			color: var(--danger);
 		}
 	}
 
 	.task-list {
 		width: auto;
-		color: $grey-400;
+		color: var(--grey-400);
 		font-size: .9rem;
 		white-space: nowrap;
 	}
@@ -273,11 +273,11 @@ export default {
 	}
 
 	a {
-		color: $text;
+		color: var(--text);
 		transition: color ease $transition-duration;
 
 		&:hover {
-			color: $grey-900;
+			color: var(--grey-900);
 		}
 	}
 
@@ -288,12 +288,12 @@ export default {
 		transition: opacity $transition, color $transition;
 
 		&:hover {
-			color: $orange;
+			color: var(--warning);
 		}
 
 		&.is-favorite {
 			opacity: 1;
-			color: $orange;
+			color: var(--warning);
 		}
 	}
 
@@ -324,16 +324,16 @@ export default {
 
 	.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;
 	}
 
 	.remove {
-		color: $red;
+		color: var(--danger);
 	}
 
 	input[type="checkbox"] {
@@ -351,8 +351,8 @@ export default {
 		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);
 	}
 }
 </style>
\ No newline at end of file
diff --git a/src/styles/components/labels.scss b/src/styles/components/labels.scss
index ee06d3f2e..049702652 100644
--- a/src/styles/components/labels.scss
+++ b/src/styles/components/labels.scss
@@ -6,7 +6,7 @@
 
   .tag {
     margin: .5rem 0 .5rem .5rem;
-    background: $grey-200;
+    background: var(--grey-200);
 
     // FIXME: only used in ListLabels.vue
     &.disabled {
diff --git a/src/styles/components/task.scss b/src/styles/components/task.scss
index 3db356444..212fd05f4 100644
--- a/src/styles/components/task.scss
+++ b/src/styles/components/task.scss
@@ -7,8 +7,8 @@
 .modal-container .task-view {
   border-radius: $radius;
   padding: 1rem;
-  color: $text;
-  background-color: $light-background !important;
+  color: var(--text);
+  background-color: var(--light-background) !important;
 
   @media screen and (max-width: 800px) {
     border-radius: 0;
diff --git a/src/styles/components/tooltip.scss b/src/styles/components/tooltip.scss
index 20acf5792..a5b77b3d1 100644
--- a/src/styles/components/tooltip.scss
+++ b/src/styles/components/tooltip.scss
@@ -5,7 +5,7 @@
   z-index: 10000;
   font-size: 0.8rem;
   text-align: center;
-  background: $dark;
+  background: var(--dark);
   color: white;
   border-radius: 5px;
   padding: 5px 10px 5px;
@@ -28,7 +28,7 @@
     height: 0;
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;
-    border-top: 5px solid $dark;
+    border-top: 5px solid var(--dark);
 
     &.bottom {
       transform: rotate(180deg);
diff --git a/src/styles/theme/background.scss b/src/styles/theme/background.scss
index e57ef22ca..9766811ac 100644
--- a/src/styles/theme/background.scss
+++ b/src/styles/theme/background.scss
@@ -8,7 +8,7 @@
 
 	// FIXME: move to pagination component
   .pagination-link:not(.is-current) {
-    background: $light-background;
+    background: var(--light-background);
   }
 
   .box,
diff --git a/src/styles/theme/content.scss b/src/styles/theme/content.scss
index 4be780b15..08eadd1c3 100644
--- a/src/styles/theme/content.scss
+++ b/src/styles/theme/content.scss
@@ -6,7 +6,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/navigation.scss b/src/styles/theme/navigation.scss
index 894ef2e12..ef23d5f5e 100644
--- a/src/styles/theme/navigation.scss
+++ b/src/styles/theme/navigation.scss
@@ -6,14 +6,14 @@
 	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);
 	}
 }
 
@@ -31,7 +31,7 @@
 	&::after {
 		display: block;
 		content: '';
-		border-top: 3px solid $grey-400;
+		border-top: 3px solid var(--grey-400);
 		border-radius: $radius;
 		transition: all $transition;
 	}
@@ -68,7 +68,7 @@
 
 	&:hover,
 	&:focus {
-		color: $text;
+		color: var(--text);
 	}
 }
 
@@ -84,7 +84,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/scrollbars.scss b/src/styles/theme/scrollbars.scss
index 29d241067..c985376ee 100644
--- a/src/styles/theme/scrollbars.scss
+++ b/src/styles/theme/scrollbars.scss
@@ -1,7 +1,7 @@
 $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);
 
 // Chrome
 ::-webkit-scrollbar {
diff --git a/src/styles/theme/theme.scss b/src/styles/theme/theme.scss
index b2549db73..0f5aeff47 100644
--- a/src/styles/theme/theme.scss
+++ b/src/styles/theme/theme.scss
@@ -6,7 +6,7 @@
 }
 
 :focus {
-  box-shadow: 0 0 0 2px rgba($primary, 0.5);
+  box-shadow: 0 0 0 2px var(--primary-translucent);
 }
 
 :focus:not(:focus-visible) {
@@ -15,11 +15,11 @@
 
 :focus-visible,
 :-moz-focusring {
-  box-shadow: 0 0 0 2px rgba($primary, 0.5);
+  box-shadow: 0 0 0 2px var(--primary-translucent);
 }
 
 body {
-  background: $light-background;
+  background: var(--light-background);
   min-height: 100vh;
 }
 
@@ -54,7 +54,7 @@ h6 {
 
 	&::-moz-progress-bar,
 	&::-webkit-progress-value {
-	  background: $grey-500;
+	  background: var(--grey-500);
 	}
 
 	@media screen and (max-width: $tablet) {
@@ -103,11 +103,11 @@ button.table {
   }
 
   .icon:not(.has-text-success) {
-    color: $grey-300 !important;
+    color: var(--grey-300) !important;
   }
 
   &.has-text-danger .icon {
-    color: $danger !important;
+    color: var(--danger) !important;
   }
 
   &.is-disabled {
@@ -165,6 +165,6 @@ button.table {
 }
 
 .box {
-  border: 1px solid $grey-200;
+  border: 1px solid var(--grey-200);
   box-shadow: $shadow-sm;
 }
\ No newline at end of file
diff --git a/src/styles/variables/colors.scss b/src/styles/variables/colors.scss
index 09d04c1dd..fd6ca96e5 100644
--- a/src/styles/variables/colors.scss
+++ b/src/styles/variables/colors.scss
@@ -1,18 +1,96 @@
-$grey-50: #F9FAFB;
-$grey-100: #f3f4f6;
-$grey-200: #E5E7EB;
-$grey-300: #D1D5DB;
-$grey-400: #9CA3AF;
-$grey-500: #6B7280;
-$grey-600: #4B5563;
-$grey-700: #374151;
-$grey-800: #1F2937;
-$grey-900: #111827;
+:root {
+
+	/* Vikunja colors as CSS custom properties */
+  --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-500: hsla(var(--grey-500-hsl), 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%);
+
+  --light-background: var(--grey-100);
+  --scheme-main: var(--white);
+
+// Vikunja overrides of Bulma defaults
+  // --black-bis: #121212;
+  // --black-ter: #242424;
+  --grey-darker: var(--grey-700);
+  --grey-dark:  var(--grey-800);
+  --grey:  var(--grey-500);
+  --grey-light:  var(--grey-300);
+  --grey-lighter:  var(--grey-200);
+  --grey-lightest: var(--grey-100);
+  //--white-ter: whitesmoke;
+  //--white-bis: #fafafa;
+
+  --white-h: 0deg;
+  --white-s: 0%;
+  --white-l: 100%;
+  --white-a: 1;
+  --white: hsla(var(--white-h), var(--white-s), var(--white-l), var(--white-a));
+	--white-translucent: hsla(var(--white-h), var(--white-s), var(--white-l), 0.75);
+
+  --black-h: 0deg;
+  --black-s: 0%;
+  --black-l: 4%;
+  --black-a: 1;
+  --black: hsla(var(--black-h), var(--black-s), var(--black-l), var(--black-a));
+
+  //$warning/$orange: #ff851b or hsl(27.9, 100%, 55.3%)
+  --warning-h: 27.9deg !important;
+  --warning-s: 100% !important;
+  --warning-l: 55.3% !important;
+  --warning-a: 1 !important;
+  --warning: hsla(var(--warning-h), var(--warning-s), var(--warning-l), var(--warning-a));
+  //$success/$green is #00db60 or hsl(146.3, 100%, 42.9%)
+  --success-h: 146.3deg !important;
+  --success-s: 100% !important;
+  --success-l: 42.9% !important;
+  --success-a: 1 !important;
+  --success: hsla(var(--success-h), var(--success-s), var(--success-l), var(--success-a));
+  //$danger/$red is #ff4136 or hsl(3.3, 100%, 60.6%)
+  --danger-h: 3.3deg !important;
+  --danger-s: 100% !important;
+  --danger-l: 60.6% !important;
+  --danger-a: 1 !important;
+  --danger: hsla(var(--danger-h), var(--danger-s), var(--danger-l), var(--danger-a));
+  //var(--primary)/$blue is #1973ff or hsl(216.5, 100%, 54.9%)
+  --primary-h: 216.5deg !important;
+  --primary-s: 100% !important;
+  --primary-l: 54.9% !important;
+  --primary-a: 1 !important;
+  --primary: hsla(var(--primary-h), var(--primary-s), var(--primary-l), var(--primary-a));
+
+	--primary-translucent: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.5);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* Light mode colours in reverse 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-500: hsla(var(--grey-500-hsl), 1);
+    --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-l: 4% !important;
+    --black-l: 100% !important;
+
+    --text: var(--grey-800) !important;
+    --text-invert: #000 !important;
+    --text-light: var(--grey-300) !important;
+    --text-strong: var(--grey-900) !important;
+  }
+}
 
-// Bulma defaults
-$grey-dark: $grey-800;
-$grey-darker: $grey-700;
-$grey: $grey-500;
-$grey-light: $grey-300;
-$grey-lighter: $grey-200;
-$grey-lightest: $grey-100;
diff --git a/src/styles/variables/shadows.scss b/src/styles/variables/shadows.scss
index 5782efd99..fdbf4b237 100644
--- a/src/styles/variables/shadows.scss
+++ b/src/styles/variables/shadows.scss
@@ -1,5 +1,9 @@
-$shadow-xs: 0 1px 3px rgba($grey-500, .12), 0 1px 2px rgba($grey-500, .24);
-$shadow-sm: 0 3px 6px rgba($grey-500, .12), 0 2px 4px rgba($grey-500, .10);
-$shadow-md: 0 10px 20px rgba($grey-500, .12), 0 3px 6px rgba($grey-500, .08);
-$shadow-lg: 0 15px 25px rgba($grey-500, .12), 0 5px 10px rgba($grey-500, .05);
-$shadow-xl: 0 20px 40px rgba($grey-500, .2);
+$shadow-xs: 0 1px 3px hsla(var(--grey-500-hsl),.12),
+            0 1px 2px hsla(var(--grey-500-hsl), .24);
+$shadow-sm: 0 3px 6px hsla(var(--grey-500-hsl), .12),
+            0 2px 4px hsla(var(--grey-500-hsl), .10);
+$shadow-md: 0 10px 20px hsla(var(--grey-500-hsl), .12),
+            0 3px 6px hsla(var(--grey-500-hsl), .08);
+$shadow-lg: 0 15px 25px hsla(var(--grey-500-hsl), .12),
+            0 5px 10px hsla(var(--grey-500-hsl), .05);
+$shadow-xl: 0 20px 40px hsla(var(--grey-500-hsl), .2);
diff --git a/src/styles/variables/variables.scss b/src/styles/variables/variables.scss
index a699d9cf4..8d2e61cd3 100644
--- a/src/styles/variables/variables.scss
+++ b/src/styles/variables/variables.scss
@@ -1,12 +1,12 @@
 
-$info-invert: $white;
+$info-invert: #fff;
 
 $family-sans-serif: 'Open Sans', Helvetica, Arial, sans-serif;
 $vikunja-font: 'Quicksand', sans-serif;
 
 $thickness: 1px;
-$pagination-current-border: $primary;
-$navbar-item-active-color: $primary;
+$pagination-current-border: var(--primary);
+$navbar-item-active-color: var(--primary);
 
 $dropdown-content-shadow: none;
 $dropdown-item-hover-background-color: var(--grey-100);
diff --git a/src/views/list/ShowList.vue b/src/views/list/ShowList.vue
index cca9b3d52..5834f6b26 100644
--- a/src/views/list/ShowList.vue
+++ b/src/views/list/ShowList.vue
@@ -158,7 +158,7 @@ export default {
 }
 
 .switch-view {
-  background: $white;
+  background: var(--white);
   display: inline-flex;
   border-radius: $radius;
   font-size: .75rem;
@@ -180,17 +180,17 @@ export default {
 
     &.is-active,
 	&:hover {
-      color: $white;
+      color: var(--white);
     }
 
     &.is-active {
-      background: $primary;
+      background: var(--primary);
       font-weight: bold;
       box-shadow: $shadow-xs;
     }
 
     &:hover {
-      background: $primary;
+      background: var(--primary);
     }
   }
 }
diff --git a/src/views/list/settings/background.vue b/src/views/list/settings/background.vue
index bb3ead15d..197fa0013 100644
--- a/src/views/list/settings/background.vue
+++ b/src/views/list/settings/background.vue
@@ -167,7 +167,7 @@ export default {
     font-size: .8rem;
 
     a {
-      color: $grey-800;
+      color: var(--grey-800);
     }
   }
 
@@ -224,7 +224,7 @@ export default {
         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/views/list/views/Kanban.vue b/src/views/list/views/Kanban.vue
index 1aa1a3c89..c1271a38b 100644
--- a/src/views/list/views/Kanban.vue
+++ b/src/views/list/views/Kanban.vue
@@ -593,7 +593,7 @@ export default {
 </script>
 
 <style lang="scss">
-$bucket-background: $grey-100;
+$bucket-background: var(--grey-100);
 $ease-out: all .3s cubic-bezier(0.23, 1, 0.32, 1);
 $bucket-width: 300px;
 $bucket-header-height: 60px;
@@ -627,7 +627,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;
 
 		* {
@@ -636,7 +636,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 	}
 
 	.bucket {
-		background-color: $bucket-background;
+		background-color: var(--bucket-background);
 		border-radius: $radius;
 		position: relative;
 
@@ -685,7 +685,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 			padding-right: 1rem;
 
 			.button {
-				background: $bucket-background;
+				background: var(--bucket-background);
 				width: 100%;
 			}
 		}
@@ -719,7 +719,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 			font-weight: bold;
 
 			&.is-max {
-				color: $red;
+				color: var(--danger);
 			}
 		}
 
@@ -743,7 +743,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 			background-color: transparent;
 
 			&:hover {
-				background-color: $white;
+				background-color: var(--white);
 			}
 		}
 	}
diff --git a/src/views/list/views/List.vue b/src/views/list/views/List.vue
index 11ce974f5..fa63a3770 100644
--- a/src/views/list/views/List.vue
+++ b/src/views/list/views/List.vue
@@ -331,8 +331,8 @@ export default {
 
 		.ghost {
 			border-radius: $radius;
-			background: $grey-100;
-			border: 2px dashed $grey-300;
+			background: var(--grey-100);
+			border: 2px dashed var(--grey-300);
 
 			* {
 				opacity: 0;
diff --git a/src/views/migrator/MigrateService.vue b/src/views/migrator/MigrateService.vue
index ae6d762bb..3dac7621c 100644
--- a/src/views/migrator/MigrateService.vue
+++ b/src/views/migrator/MigrateService.vue
@@ -197,7 +197,7 @@ export default {
 
 	span {
 		transition: all 500ms ease;
-		background: $grey-500;
+		background: var(--grey-500);
 		height: 10px;
 		width: 10px;
 		display: inline-block;
@@ -242,7 +242,7 @@ export default {
 @keyframes wave {
 	0%, 40%, 100% {
 		transform: translate(0, 0);
-		background-color: $primary;
+		background-color: var(--primary);
 	}
 	10% {
 		transform: translate(0, -15px);
diff --git a/src/views/namespaces/ListNamespaces.vue b/src/views/namespaces/ListNamespaces.vue
index addaa596e..e2b8f0dce 100644
--- a/src/views/namespaces/ListNamespaces.vue
+++ b/src/views/namespaces/ListNamespaces.vue
@@ -131,12 +131,12 @@ export default {
 
     .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;
       font-family: $vikunja-font;
-      background: rgba($white, 0.75);
+      background: var(--white-translucent);
       margin-left: .5rem;
     }
 
diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index fc64d819f..aa6da31ea 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -711,18 +711,18 @@ $flash-background-duration: 750ms;
   // This is a workaround to hide the llama background from the top on the task detail page
   margin-top: -1.5rem;
   padding: 1rem;
-  background-color: $light-background;
+  background-color: var(--light-background);
 
   @media screen and (max-width: $desktop) {
     padding-bottom: 0;
   }
 
   .subtitle {
-    color: $grey-500;
+    color: var(--grey-500);
 	margin-bottom: 1rem;
 
     a {
-      color: $grey-800;
+      color: var(--grey-800);
     }
   }
 
@@ -731,7 +731,7 @@ $flash-background-duration: 750ms;
   }
 
   .icon.is-grey {
-    color: $grey-400;
+    color: var(--grey-400);
   }
 
   :deep(.heading) {
@@ -759,7 +759,7 @@ $flash-background-duration: 750ms;
     }
 
     .title.task-id {
-      color: $grey-400;
+      color: var(--grey-400);
       white-space: nowrap;
     }
 
@@ -770,7 +770,7 @@ $flash-background-duration: 750ms;
     align-items: center;
 
     a.remove {
-      color: $red;
+      color: var(--danger);
       vertical-align: middle;
       padding-left: .5rem;
       line-height: 1;
@@ -781,7 +781,7 @@ $flash-background-duration: 750ms;
     width: 100%;
 
     a.show {
-      color: $text;
+      color: var(--text);
       padding: .25rem .5rem;
       transition: background-color $transition;
       border-radius: $radius;
@@ -789,7 +789,7 @@ $flash-background-duration: 750ms;
       margin: .1rem 0;
 
       &:hover {
-        background: $white;
+        background: var(--white);
       }
     }
 
@@ -805,7 +805,7 @@ $flash-background-duration: 750ms;
 
     .detail-title {
       display: block;
-      color: $grey-400;
+      color: var(--grey-400);
     }
 
     .none {
@@ -842,7 +842,7 @@ $flash-background-duration: 750ms;
       transition: all $transition-duration;
 
       &::placeholder {
-        color: $text-light;
+        color: var(--text-light);
         opacity: 1;
         font-style: italic;
       }
@@ -888,7 +888,7 @@ $flash-background-duration: 750ms;
 
   .created {
     font-size: .75rem;
-    color: $grey-500;
+    color: var(--grey-500);
     text-align: right;
   }
 
diff --git a/src/views/tasks/TaskDetailViewModal.vue b/src/views/tasks/TaskDetailViewModal.vue
index 6deb7421f..21f724625 100644
--- a/src/views/tasks/TaskDetailViewModal.vue
+++ b/src/views/tasks/TaskDetailViewModal.vue
@@ -53,11 +53,11 @@ export default {
 	position: fixed;
 	top: 5px;
 	right: 26px;
-	color: $white;
+	color: var(--white);
 	font-size: 2rem;
 
 	@media screen and (max-width: $desktop) {
-		color: $dark;
+		color: var(--dark);
 	}
 }
 </style>
\ No newline at end of file
diff --git a/src/views/teams/ListTeams.vue b/src/views/teams/ListTeams.vue
index 2fc6f87e7..503a8b3d1 100644
--- a/src/views/teams/ListTeams.vue
+++ b/src/views/teams/ListTeams.vue
@@ -68,7 +68,7 @@ ul.teams {
       transition: background-color $transition;
 
       &:hover {
-        background: $grey-100;
+        background: var(--grey-100);
       }
     }
   }
diff --git a/src/views/user/Settings.vue b/src/views/user/Settings.vue
index f2612e575..aba2931d5 100644
--- a/src/views/user/Settings.vue
+++ b/src/views/user/Settings.vue
@@ -88,13 +88,13 @@ export default {
 		a {
 			display: block;
 			padding: .5rem;
-			color: $dark;
+			color: var(--dark);
 			width: 100%;
 			border-left: 3px solid transparent;
 
 			&:hover, &.router-link-active {
-				background: $white;
-				border-color: $primary;
+				background: var(--white);
+				border-color: var(--primary);
 			}
 		}
 	}
diff --git a/src/views/user/settings/Avatar.vue b/src/views/user/settings/Avatar.vue
index 72e097535..2f9b74d61 100644
--- a/src/views/user/settings/Avatar.vue
+++ b/src/views/user/settings/Avatar.vue
@@ -149,6 +149,6 @@ export default {
 }
 
 .vue-advanced-cropper__background {
-	background: $white;
+	background: var(--white);
 }
 </style>