diff --git a/resources/css/variables.scss b/resources/css/variables.scss
index b573c70..02e0bbf 100644
--- a/resources/css/variables.scss
+++ b/resources/css/variables.scss
@@ -167,6 +167,10 @@ $spacing: (
     // Editor
     --editor-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
     --editor-backdrop: rgba(255, 255, 255, 0.75);
+
+    // Loading
+    --loading-color: var(--base-color-lighter);
+    --loading-overlay-color: rgba(0, 0, 0, 0.4);
 }
 
 // --primary-color-hover: #f1fdff;
@@ -205,5 +209,9 @@ $spacing: (
         // Editor
         --editor-shadow: 0 0 4px rgba(255, 255, 255, 0.2);
         --editor-backdrop: rgba(0, 0, 0, 0.75);
+
+        // Loading
+        --loading-color: var(--base-color-lighter);
+        --loading-overlay-color: rgba(0, 0, 0, 0.4);
     }
 }
diff --git a/resources/js/components/SMLoading.vue b/resources/js/components/SMLoading.vue
index a0cd025..38f25a1 100644
--- a/resources/js/components/SMLoading.vue
+++ b/resources/js/components/SMLoading.vue
@@ -43,7 +43,7 @@ const props = defineProps({
         bottom: 0;
         right: 0;
         z-index: 10000;
-        background-color: rgba(0, 0, 0, 0.4);
+        background-color: var(--loading-overlay-color);
         backdrop-filter: blur(2px);
         -webkit-backdrop-filter: blur(2px);
     }
@@ -56,7 +56,7 @@ const props = defineProps({
     }
 
     .loading-box {
-        background-color: #fff;
+        background-color: var(--loading-color);
         padding: 24px 48px;
         border-radius: 10px;
         box-shadow: var(--base-shadow);