diff --git a/apps/v4/registry/new-york-v4/ui/sonner/Sonner.vue b/apps/v4/registry/new-york-v4/ui/sonner/Sonner.vue
index 6830896bb..42a7a8e9b 100644
--- a/apps/v4/registry/new-york-v4/ui/sonner/Sonner.vue
+++ b/apps/v4/registry/new-york-v4/ui/sonner/Sonner.vue
@@ -1,10 +1,19 @@
 <script lang="ts" setup>
 import type { ToasterProps } from "vue-sonner"
-import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon, XIcon } from "lucide-vue-next"
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+  XIcon,
+} from "lucide-vue-next"
 import { Toaster as Sonner } from "vue-sonner"
 import { cn } from "@/lib/utils"
 
 const props = defineProps<ToasterProps>()
+
+const colorMode = useColorMode()
 </script>
 
 <template>
@@ -17,6 +26,7 @@ const props = defineProps<ToasterProps>()
       '--border-radius': 'var(--radius)',
     }"
     v-bind="props"
+    :theme="colorMode === 'auto' ? 'system' : colorMode"
   >
     <template #success-icon>
       <CircleCheckIcon class="size-4" />