fix(#1502): add theme prop to sonner#1694
Conversation
|
No actionable comments were generated in the recent review. 🎉 📝 WalkthroughWalkthroughAdds automatic color-mode detection to the Sonner toaster by using the Changes
Sequence Diagram(s)sequenceDiagram
participant Component as Sonner.vue
participant Hook as useColorMode()
participant Toaster as Sonner/Toaster
Component->>Hook: call useColorMode()
Hook-->>Component: returns colorMode (e.g., "auto", "dark", "light")
Component->>Component: compute theme = colorMode === "auto" ? "system" : colorMode
Component->>Toaster: render with prop theme=<computed theme>
Toaster-->>Component: display toasts with selected theme
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~5 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
vachanmn123
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/v4/registry/new-york-v4/ui/sonner/Sonner.vue`:
- Around line 30-31: The current template spreads v-bind="props" then
unconditionally sets :theme="theme", which in Vue 3 causes the computed theme to
always override any consumer-supplied props.theme; update the binding so the
component uses the consumer-provided theme when present by changing the
computed/prop usage to use props.theme ?? <computed fallback> (or adjust the
computedTheme getter) and then bind :theme to that result (or replace
:theme="theme" with :theme="props.theme ?? themeFallback"); target the
v-bind="props" usage and the computed/theme variable in Sonner.vue and ensure
ToasterProps.theme is respected.
- Around line 3-11: The file calls useColorMode but doesn't import it; add
useColorMode to the import list from its source (e.g., import { useColorMode }
from "@vueuse/core" or from your project's composables) so the reference inside
Sonner.vue (where useColorMode() is invoked) resolves at runtime; update the
existing import block that currently imports computed to include the correct
useColorMode import instead of leaving it undefined.
| import { | ||
| CircleCheckIcon, | ||
| InfoIcon, | ||
| Loader2Icon, | ||
| OctagonXIcon, | ||
| TriangleAlertIcon, | ||
| XIcon, | ||
| } from "lucide-vue-next" | ||
| import { computed } from "vue" |
There was a problem hiding this comment.
useColorMode is missing from the imports.
useColorMode is called on line 17 but is not imported anywhere in this file. This will throw a ReferenceError at runtime in any project that doesn't have @vueuse/core composables auto-imported.
🔧 Proposed fix
import { computed } from "vue"
+import { useColorMode } from "@vueuse/core"
import { Toaster as Sonner } from "vue-sonner"🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/v4/registry/new-york-v4/ui/sonner/Sonner.vue` around lines 3 - 11, The
file calls useColorMode but doesn't import it; add useColorMode to the import
list from its source (e.g., import { useColorMode } from "@vueuse/core" or from
your project's composables) so the reference inside Sonner.vue (where
useColorMode() is invoked) resolves at runtime; update the existing import block
that currently imports computed to include the correct useColorMode import
instead of leaving it undefined.
|
This is my first OSS contribution, sorry if this might sound stupid but are we supposed to import from |
|
I don't think this should be part of the shadcn library. I think it is best to resolve / manage the color mode outside of this component and simply pass it as |
where did you find that? I searched the code base and found |
3 participants
🔗 Linked issue
Fixes #1502
❓ Type of change
📚 Description
I have added a theme prop to the Sonner component to allow it to work better with dark themes. Resolves #1502
📝 Checklist
Summary by CodeRabbit