diff --git a/docs/src/.vitepress/theme/style.css b/docs/src/.vitepress/theme/style.css
index 09d5c4a..c60a962 100644
--- a/docs/src/.vitepress/theme/style.css
+++ b/docs/src/.vitepress/theme/style.css
@@ -89,21 +89,21 @@ pre, code {
 /* Component: Home */
 
 :root {
-  --vp-home-hero-name-color: transparent;
-  --vp-home-hero-name-background: -webkit-linear-gradient(
-    120deg,
-    #9558B2 30%,
-    #CB3C33
-  );
-
-  --vp-home-hero-image-background-image: linear-gradient(
-    -45deg,
-    #9558B2 30%,
-    #389826 30%,
-    #CB3C33 
-  );
-  --vp-home-hero-image-filter: blur(40px);
-}
+    --vp-home-hero-name-color: transparent;
+    --vp-home-hero-name-background: -webkit-linear-gradient(
+      120deg,
+      var(--julia-purple) 30%,
+      var(--julia-red)
+    );
+  
+    --vp-home-hero-image-background-image: linear-gradient(
+      -45deg,
+      var(--julia-purple) 30%,
+      var(--julia-green) 30%,
+      var(--julia-red) 
+    );
+    --vp-home-hero-image-filter: blur(40px);
+  }
 
 @media (min-width: 640px) {
   :root {
diff --git a/template/src/.vitepress/theme/style.css b/template/src/.vitepress/theme/style.css
index 09d5c4a..7b4c7e4 100644
--- a/template/src/.vitepress/theme/style.css
+++ b/template/src/.vitepress/theme/style.css
@@ -92,15 +92,15 @@ pre, code {
   --vp-home-hero-name-color: transparent;
   --vp-home-hero-name-background: -webkit-linear-gradient(
     120deg,
-    #9558B2 30%,
-    #CB3C33
+    var(--julia-purple) 30%,
+    var(--julia-red)
   );
 
   --vp-home-hero-image-background-image: linear-gradient(
     -45deg,
-    #9558B2 30%,
-    #389826 30%,
-    #CB3C33 
+    var(--julia-purple) 30%,
+    var(--julia-green) 30%,
+    var(--julia-red) 
   );
   --vp-home-hero-image-filter: blur(40px);
 }