From 6d343f1256307dda4c39c782ee3da77bbd2f3978 Mon Sep 17 00:00:00 2001
From: dyzulk <66510723+dyzulk@users.noreply.github.com>
Date: Mon, 19 Jan 2026 16:41:52 +0700
Subject: [PATCH] feat: Add custom VitePress layout with a dynamic background
 featuring a grid pattern and glowing orbs.

---
 .vitepress/theme/Layout.vue | 22 ++++++++++------------
 1 file changed, 10 insertions(+), 12 deletions(-)

diff --git a/.vitepress/theme/Layout.vue b/.vitepress/theme/Layout.vue
index d8e85e0..1642c20 100644
--- a/.vitepress/theme/Layout.vue
+++ b/.vitepress/theme/Layout.vue
@@ -25,6 +25,13 @@ const { Layout } = DefaultTheme
   z-index: -1;
   pointer-events: none;
   overflow: hidden;
+  --orb-opacity-max: 0.2;
+  --orb-opacity-min: 0.15;
+}
+
+:root.dark .mivo-bg {
+  --orb-opacity-max: 0.05;
+  --orb-opacity-min: 0.03;
 }
 
 .mivo-grid {
@@ -43,14 +50,10 @@ const { Layout } = DefaultTheme
   position: absolute;
   border-radius: 9999px;
   filter: blur(100px);
-  opacity: 0.2;
+  opacity: var(--orb-opacity-max);
   animation: pulse 8s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
-:root.dark .mivo-orb {
-  opacity: 0.05;
-}
-
 .orb-1 {
   top: -20%;
   left: -10%;
@@ -71,12 +74,7 @@ const { Layout } = DefaultTheme
 }
 
 @keyframes pulse {
-  0%, 100% { opacity: 0.2; }
-  50% { opacity: 0.15; }
-}
-
-:root.dark @keyframes pulse {
-  0%, 100% { opacity: 0.05; }
-  50% { opacity: 0.03; }
+  0%, 100% { opacity: var(--orb-opacity-max); }
+  50% { opacity: var(--orb-opacity-min); }
 }
 </style>