diff --git a/src/components/home/contentNoAuth.vue b/src/components/home/contentNoAuth.vue
index 30204e5eb..3681ea620 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 var(--light-background);
+  background: url('@/assets/llama.svg') no-repeat bottom left fixed var(--site-background);
   min-height: 100vh;
 }
 
diff --git a/src/components/home/navigation.vue b/src/components/home/navigation.vue
index c806a8465..633f6dcaf 100644
--- a/src/components/home/navigation.vue
+++ b/src/components/home/navigation.vue
@@ -278,7 +278,7 @@ export default {
 
 <style lang="scss" scoped>
 $navbar-padding: 2rem;
-$vikunja-nav-background: var(--light-background);
+$vikunja-nav-background: var(--site-background);
 $vikunja-nav-color: var(--grey-700);
 $vikunja-nav-selected-width: 0.4rem;
 
diff --git a/src/components/home/topNavigation.vue b/src/components/home/topNavigation.vue
index 831c5d5f1..e88ec31a3 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: var(--light-background);
+	background: var(--site-background);
 	z-index: 5 !important;
 	justify-content: space-between;
 	align-items: center;
diff --git a/src/styles/components/task.scss b/src/styles/components/task.scss
index 212fd05f4..4a2b565e1 100644
--- a/src/styles/components/task.scss
+++ b/src/styles/components/task.scss
@@ -8,7 +8,7 @@
   border-radius: $radius;
   padding: 1rem;
   color: var(--text);
-  background-color: var(--light-background) !important;
+  background-color: var(--site-background) !important;
 
   @media screen and (max-width: 800px) {
     border-radius: 0;
diff --git a/src/styles/theme/background.scss b/src/styles/theme/background.scss
index 9766811ac..4b8570c04 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: var(--light-background);
+    background: var(--site-background);
   }
 
   .box,
diff --git a/src/styles/theme/theme.scss b/src/styles/theme/theme.scss
index 0b2293979..766e937d8 100644
--- a/src/styles/theme/theme.scss
+++ b/src/styles/theme/theme.scss
@@ -19,7 +19,7 @@
 }
 
 body {
-  background: var(--light-background);
+  background: var(--site-background);
   min-height: 100vh;
 }
 
diff --git a/src/styles/variables/colors.scss b/src/styles/variables/colors.scss
index ffbc6256e..f789d48f3 100644
--- a/src/styles/variables/colors.scss
+++ b/src/styles/variables/colors.scss
@@ -13,7 +13,7 @@
   --grey-800: hsl(215, 27.9%, 16.9%);
   --grey-900: hsl(220.9, 39.3%, 11%);
 
-  --light-background: var(--grey-100);
+  --site-background: var(--grey-100);
   --scheme-main: var(--white);
 
   // Vikunja overrides of Bulma defaults
diff --git a/src/styles/variables/variables.scss b/src/styles/variables/variables.scss
index 5368aba4b..8d65bacc9 100644
--- a/src/styles/variables/variables.scss
+++ b/src/styles/variables/variables.scss
@@ -10,7 +10,7 @@ $dropdown-content-shadow: none;
 $dropdown-item-hover-background-color: var(--grey-100);
 
 $bulmaswatch-import-font: false !default;
-$light-background: var(--grey-100);
+$site-background: var(--grey-100);
 
 $transition-duration: 150ms;
 $transition: $transition-duration ease;
diff --git a/src/views/tasks/TaskDetailView.vue b/src/views/tasks/TaskDetailView.vue
index f450e05ce..8d6a24002 100644
--- a/src/views/tasks/TaskDetailView.vue
+++ b/src/views/tasks/TaskDetailView.vue
@@ -711,7 +711,7 @@ $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: var(--light-background);
+  background-color: var(--site-background);
 
   @media screen and (max-width: $desktop) {
     padding-bottom: 0;