diff --git a/src/components/home/MenuButton.vue b/src/components/home/MenuButton.vue
index 14a2e4699..ab012c92b 100644
--- a/src/components/home/MenuButton.vue
+++ b/src/components/home/MenuButton.vue
@@ -43,7 +43,7 @@ $size: $lineWidth + 1rem;
 		width: $lineWidth;
 		left: 50%;
 		transform: $transformX;
-		background-color: $grey-400;
+		background-color: var(--grey-400);
 		border-radius: 2px;
 		transition: all $transition;
 	}
@@ -62,7 +62,7 @@ $size: $lineWidth + 1rem;
 	&:focus {
 		&::before,
 		&::after {
-			background-color: $grey-600;
+			background-color: var(--grey-600);
 		}
 
 		&::before {
diff --git a/src/components/home/PoweredByLink.vue b/src/components/home/PoweredByLink.vue
index e174ba691..06ff3b111 100644
--- a/src/components/home/PoweredByLink.vue
+++ b/src/components/home/PoweredByLink.vue
@@ -10,7 +10,7 @@ import {POWERED_BY as poweredByUrl} from '@/urls'
 
 <style lang="scss">
 .menu-bottom-link {
-	color: $grey-300;
+	color: var(--grey-300);
 	text-align: center;
 	display: block;
 	padding-top: 1rem;
diff --git a/src/components/home/contentAuth.vue b/src/components/home/contentAuth.vue
index 0386b3772..7a2bd2427 100644
--- a/src/components/home/contentAuth.vue
+++ b/src/components/home/contentAuth.vue
@@ -144,7 +144,7 @@ export default {
 	justify-content: center;
 	align-items: center;
 	font-size: 2rem;
-	color: $grey-400;
+	color: var(--grey-400);
 	line-height: 1;
 	transition: all $transition;
 
@@ -155,7 +155,7 @@ export default {
 	&:hover,
 	&:focus {
 		height: 1rem;
-		color: $grey-600;
+		color: var(--grey-600);
 	}
 }
 
diff --git a/src/components/tasks/partials/relatedTasks.vue b/src/components/tasks/partials/relatedTasks.vue
index 383288d55..b2ce2c6c2 100644
--- a/src/components/tasks/partials/relatedTasks.vue
+++ b/src/components/tasks/partials/relatedTasks.vue
@@ -328,7 +328,7 @@ export default {
 	border-radius: $radius;
 
 	&:hover {
-		background-color: $grey-200;
+		background-color: var(--grey-200);
 	}
 
 	a {