diff --git a/docs/.vitepress/theme/components/ColorPicker.vue b/docs/.vitepress/theme/components/ColorPicker.vue
index 5925bb92f..915924de2 100644
--- a/docs/.vitepress/theme/components/ColorPicker.vue
+++ b/docs/.vitepress/theme/components/ColorPicker.vue
@@ -56,9 +56,9 @@ const updateThemeColor = (colorName: ColorNames) => {
 
   // if user isnt using halloween theme switch it
   const nonHalloweenOverride = colorName !== 'halloween' ? `
-    --vp-c-bg: rgb(26, 26, 26) !important;
-    --vp-c-bg-alt: rgb(23, 23, 23) !important;
-    --vp-c-bg-elv: rgba(23, 23, 23, 0.8) !important;
+    --vp-c-bg: #ffffff !important;
+    --vp-c-bg-alt: #f9f9f9 !important;
+    --vp-c-bg-elv: rgba(255, 255, 255, 0.7) !important;
     --vp-button-alt-bg: #484848 !important;
     --vp-button-alt-text: #f0eeee !important;
     --vp-button-alt-hover-bg: #484848 !important;
@@ -89,10 +89,10 @@ const updateThemeColor = (colorName: ColorNames) => {
 
   const nonHalloweenBodyOverride = colorName !== 'halloween' ? `
     body {
-      background-color: rgb(26, 26, 26) !important;
+      background-color: #ffffff !important;
     }
     .VPApp, .Layout, .VPContent, .VPHome, .VPHero, #app {
-      background-color: rgb(26, 26, 26) !important;
+      background-color: #ffffff !important;
     }
     .dark body {
       background-color: rgb(26, 26, 26) !important;
diff --git a/docs/.vitepress/theme/style.scss b/docs/.vitepress/theme/style.scss
index 2ae24f2f7..11340d5c7 100644
--- a/docs/.vitepress/theme/style.scss
+++ b/docs/.vitepress/theme/style.scss
@@ -64,12 +64,12 @@
   --vp-custom-block-halloween-text-deep: var(--halloween-900);
 }
 
-/* Apply halloween theme by default */
+/* Apply Halloween theme by default (for light mode)*/
 :root {
-  --vp-c-bg: rgb(20, 20, 20) !important;
-  --vp-c-bg-alt: rgb(18, 18, 18) !important;
-  --vp-c-bg-elv: rgba(18, 18, 18, 0.8) !important;
-  --vp-c-bg-soft: rgb(18, 18, 18) !important;
+  --vp-c-bg: #fef3e8 !important;
+  --vp-c-bg-alt: #fef0e7 !important;
+  --vp-c-bg-elv: rgba(254, 240, 231, 0.8) !important;
+  --vp-c-bg-soft: #fef0e7 !important;
   --vp-button-alt-bg: #a855f7 !important;
   --vp-button-alt-text: #fff !important;
   --vp-button-alt-hover-bg: #9333ea !important;
@@ -83,13 +83,14 @@
 }
 
 body {
-  background-color: rgb(20, 20, 20) !important;
+  background-color: #fef3e8 !important;
 }
 
 .VPApp, .Layout, .VPContent, .VPHome, .VPHero, #app {
-  background-color: rgb(20, 20, 20) !important;
+  background-color: #fef3e8 !important;
 }
 
+/* Apply Halloween theme by default - (for dark mode) */
 .dark {
   --vp-c-bg: rgb(15, 15, 15) !important;
   --vp-c-bg-alt: rgb(12, 12, 12) !important;
@@ -106,6 +107,9 @@ body {
   --vp-button-brand-hover-border: #ea580c !important;
   --vp-button-brand-hover-text: #fff !important;
 }
+  --vp-button-brand-hover-border: #ea580c !important;
+  --vp-button-brand-hover-text: #fff !important;
+}
 
 .dark body {
   background-color: rgb(15, 15, 15) !important;