diff --git a/web-app/src/lib/components/LoadingSpinner.svelte b/web-app/src/lib/components/LoadingSpinner.svelte
index 6eb9339..7de9c20 100644
--- a/web-app/src/lib/components/LoadingSpinner.svelte
+++ b/web-app/src/lib/components/LoadingSpinner.svelte
@@ -10,7 +10,7 @@
   .spinner {
     position: fixed;
     inset: 0;
-    background-color: rgba(0, 0, 0, 0.5);
+    background-color: var(--bg-blurred);
     z-index: 40;
   }
 
diff --git a/web-app/src/lib/components/Modal.svelte b/web-app/src/lib/components/Modal.svelte
index 0f446c4..2a01eef 100644
--- a/web-app/src/lib/components/Modal.svelte
+++ b/web-app/src/lib/components/Modal.svelte
@@ -39,7 +39,7 @@
     position: fixed;
     inset: 0;
     z-index: 10;
-    background-color: rgba(0, 0, 0, 0.5);
+    background-color: var(--bg-blurred);
   }
 
   .modal__content {
diff --git a/web-app/template-styles/common-styles.css b/web-app/template-styles/common-styles.css
index d79b454..c2243e6 100644
--- a/web-app/template-styles/common-styles.css
+++ b/web-app/template-styles/common-styles.css
@@ -22,6 +22,7 @@
   --bg-primary: white;
   --bg-secondary: hsl(0 0% 95%);
   --bg-tertiary: hsl(0 0% 90%);
+  --bg-blurred: rgba(255, 255, 255, 0.5);
 
   --color-text: black;
   --color-text-invert: white;
@@ -75,6 +76,7 @@
     --bg-primary: hsl(0 0% 15%);
     --bg-secondary: hsl(0 0% 20%);
     --bg-tertiary: hsl(0 0% 25%);
+    --bg-blurred: rgba(0, 0, 0, 0.5);
 
     --color-text: white;
     --color-text-invert: black;