diff --git a/src/components/misc/no-auth-wrapper.vue b/src/components/misc/no-auth-wrapper.vue
index 02ab1bcc1..6b2e6a010 100644
--- a/src/components/misc/no-auth-wrapper.vue
+++ b/src/components/misc/no-auth-wrapper.vue
@@ -26,7 +26,7 @@ const motd = computed(() => store.state.config.motd)
 
 <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(--site-background);
 	min-height: 100vh;
 }
 
diff --git a/src/components/misc/ready.vue b/src/components/misc/ready.vue
index 20cd1941b..8d0efa6c5 100644
--- a/src/components/misc/ready.vue
+++ b/src/components/misc/ready.vue
@@ -98,7 +98,7 @@ export default {
 	left: 0;
 	bottom: 0;
 	right: 0;
-	background: $grey-100;
+	background: var(--grey-100);
 	z-index: 99;
 
 	img {
@@ -110,8 +110,8 @@ export default {
 	margin-right: 1rem;
 
 	&.is-loading::after {
-		border-left-color: $grey-400;
-		border-bottom-color: $grey-400;
+		border-left-color: var(--grey-400);
+		border-bottom-color: var(--grey-400);
 	}
 }