diff --git a/docs/.vitepress/theme/components/ColorPicker.vue b/docs/.vitepress/theme/components/ColorPicker.vue
index b4965a026..775aac7a0 100644
--- a/docs/.vitepress/theme/components/ColorPicker.vue
+++ b/docs/.vitepress/theme/components/ColorPicker.vue
@@ -54,6 +54,19 @@ const updateThemeColor = (colorName: ColorNames) => {
     .map((scale) => `--vp-c-brand-${scale}: ${colorSet[scale]};`)
     .join('\n    ')
 
+  // Add darker background for Halloween theme
+  const halloweenBgOverride = colorName === 'halloween' ? `
+    --vp-c-bg: rgb(20, 20, 20);
+    --vp-c-bg-alt: rgb(18, 18, 18);
+    --vp-c-bg-elv: rgba(18, 18, 18, 0.8);
+  ` : ''
+
+  const halloweenDarkBgOverride = colorName === 'halloween' ? `
+    --vp-c-bg: rgb(15, 15, 15);
+    --vp-c-bg-alt: rgb(12, 12, 12);
+    --vp-c-bg-elv: rgba(12, 12, 12, 0.8);
+  ` : ''
+
   css.value = `
     :root {
       ${cssVars}
@@ -61,6 +74,7 @@ const updateThemeColor = (colorName: ColorNames) => {
       --vp-c-brand-2: ${colorSet[600]};
       --vp-c-brand-3: ${colorSet[800]};
       --vp-c-brand-soft: ${colorSet[400]};
+      ${halloweenBgOverride}
     }
 
     .dark {
@@ -69,6 +83,7 @@ const updateThemeColor = (colorName: ColorNames) => {
       --vp-c-brand-2: ${colorSet[500]};
       --vp-c-brand-3: ${colorSet[700]};
       --vp-c-brand-soft: ${colorSet[300]};
+      ${halloweenDarkBgOverride}
     }
   `
 
diff --git a/docs/.vitepress/theme/style.scss b/docs/.vitepress/theme/style.scss
index 4b275f93a..94b57448d 100644
--- a/docs/.vitepress/theme/style.scss
+++ b/docs/.vitepress/theme/style.scss
@@ -104,17 +104,6 @@
   --vp-custom-block-halloween-text-deep: var(--halloween-200);
 }
 
-/* Halloween theme background override */
-:root:has([data-halloween-theme]) {
-  --vp-c-bg: rgb(20, 20, 20);
-  --vp-c-bg-alt: rgb(18, 18, 18);
-}
-
-.dark:has([data-halloween-theme]) {
-  --vp-c-bg: rgb(18, 18, 18);
-  --vp-c-bg-alt: rgb(15, 15, 15);
-}
-
 .vp-doc a {
   color: var(--vp-c-brand-1);
   text-decoration: underline;