diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
new file mode 100644
index 0000000..5aa05c8
--- /dev/null
+++ b/docs/.vitepress/theme/custom.css
@@ -0,0 +1,24 @@
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #3399ff 30%, #0066cc);
+
+  --vp-home-hero-image-background-image: linear-gradient(-45deg, #3399ff 50%, #0066cc 50%);
+  --vp-home-hero-image-filter: blur(44px);
+}
+
+.VPImage.image-src {
+  max-width: 180px;
+  max-height: 180px;
+}
+
+@media (min-width: 640px) {
+  :root {
+    --vp-home-hero-image-filter: blur(56px);
+  }
+}
+
+@media (min-width: 960px) {
+  :root {
+    --vp-home-hero-image-filter: blur(68px);
+  }
+}
diff --git a/docs/.vitepress/theme/index.mts b/docs/.vitepress/theme/index.mts
new file mode 100644
index 0000000..42fe9a9
--- /dev/null
+++ b/docs/.vitepress/theme/index.mts
@@ -0,0 +1,4 @@
+import DefaultTheme from 'vitepress/theme'
+import './custom.css'
+
+export default DefaultTheme
diff --git a/docs/index.md b/docs/index.md
index 3ff7be3..0414002 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -31,30 +31,3 @@ features:
     title: Cross-Browser Support
     details: Available on Chrome, Firefox, and Microsoft Edge for your convenience.
 ---
-
-<style>
-:root {
-  --vp-home-hero-name-color: transparent;
-  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #3399ff 30%, #0066cc);
-
-  --vp-home-hero-image-background-image: linear-gradient(-45deg, #3399ff 50%, #0066cc 50%);
-  --vp-home-hero-image-filter: blur(44px);
-}
-
-.VPImage.image-src {
-  max-width: 180px;
-  max-height: 180px;
-}
-
-@media (min-width: 640px) {
-  :root {
-    --vp-home-hero-image-filter: blur(56px);
-  }
-}
-
-@media (min-width: 960px) {
-  :root {
-    --vp-home-hero-image-filter: blur(68px);
-  }
-}
-</style>