fix(#1502): add theme prop to sonner

[vachanmn123]

🔗 Linked issue

Fixes #1502

❓ Type of change

• 📖 Documentation (updates to the documentation, readme or JSdoc annotations)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

I have added a theme prop to the Sonner component to allow it to work better with dark themes. Resolves #1502

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly. (N/A)

Summary by CodeRabbit

• New Features
  • Sonner toaster now follows the app’s color mode—when the mode is set to auto, it uses the system theme—improving visual consistency across the UI.
• Chores
  • Updated the Sonner registry configuration to include the required utility library for color mode handling.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 431ee194-761b-4c6b-91fa-2c7bff4cedeb

📥 Commits

Reviewing files that changed from the base of the PR and between 3b91756 and 1ec5d95.

📒 Files selected for processing (2)

• apps/v4/registry.json
• apps/v4/registry/new-york-v4/ui/sonner/Sonner.vue

🚧 Files skipped from review as they are similar to previous changes (1)

• apps/v4/registry/new-york-v4/ui/sonner/Sonner.vue

---

📝 Walkthrough

Walkthrough

Adds automatic color-mode detection to the Sonner toaster, maps auto to system, passes the resulting theme to Sonner, and declares @vueuse/core in the registry dependencies.

Changes

Sonner theme support

Layer / File(s)	Summary
Color mode wiring and registry dependency apps/v4/registry/new-york-v4/ui/sonner/Sonner.vue, apps/v4/registry.json	Uses useColorMode() to derive the toaster theme, maps auto to system, binds the theme to Sonner, and adds @vueuse/core to the registry entry.

Estimated code review effort: 1 (Trivial) | ~5 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly matches the main change: adding Sonner theme support.
Linked Issues check	✅ Passed	The changes make Sonner derive theme from color mode, satisfying the issue's theme and richColors requirement.
Out of Scope Changes check	✅ Passed	The dependency update and import formatting are supporting changes for the theme feature, not unrelated scope.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

⚔️ Resolve merge conflicts

• Resolve merge conflict in branch dev

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install failed: private package registry requires authentication. Disable ESLint in CodeRabbit settings or use public packages.

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

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.

[vachanmn123]

This is my first OSS contribution, sorry if this might sound stupid but are we supposed to import from @vueuse/core? Since I checked the Button implementation and it does in fact use the same function but without an import.

[benkroeger]

I don't think this should be part of the shadcn library.
In our codebase we manage the user's theme preference in a different store (actually persisted to server via api) and pass that to useColorMode as custom store ref.
If this PR got merged, it would always fallback to vueuse's default store for overrides (i.e., LocalStorage) and thus make the Sonner styling be out-of-sync with the rest of our application.

I think it is best to resolve / manage the color mode outside of this component and simply pass it as theme prop.

[benkroeger]

Since I checked the Button implementation and it does in fact use the same function but without an import.

where did you find that? I searched the code base and found useColorMode only in apps/v4 - which is the docs page (not the actual components code)

[vachanmn123]

Since I checked the Button implementation and it does in fact use the same function but without an import.

where did you find that? I searched the code base and found useColorMode only in apps/v4 - which is the docs page (not the actual components code)

I had made a mistake in understanding it. The current implementation is correct right?

[zernonia]

Thanks for the PR! The direction is good, but a couple of changes are needed before this can work:

1. Import useColorMode explicitly from @vueuse/core. Right now it relies on auto-import — in the docs app that resolves to @nuxtjs/color-mode's composable, which returns a ColorModeInstance object (not a string ref), so colorMode === 'auto' is always false and :theme receives an object. And for users installing this component via the CLI (e.g. plain Vite apps with no auto-imports), useColorMode would be undefined at runtime. Please add:

   import { useColorMode } from '@vueuse/core'

2. Update the registry dependencies. The sonner item in registry.json currently only lists vue-sonner — please add @vueuse/core to its dependencies so the CLI installs it for consumers.

Also worth noting: place :theme before v-bind="props" so that a user-supplied theme prop can still override the default (with the current order, props.theme is silently ignored).

[vachanmn123]

Thanks for the PR! The direction is good, but a couple of changes are needed before this can work:

1. Import useColorMode explicitly from @vueuse/core. Right now it relies on auto-import — in the docs app that resolves to @nuxtjs/color-mode's composable, which returns a ColorModeInstance object (not a string ref), so colorMode === 'auto' is always false and :theme receives an object. And for users installing this component via the CLI (e.g. plain Vite apps with no auto-imports), useColorMode would be undefined at runtime. Please add:

   import { useColorMode } from '@vueuse/core'

2. Update the registry dependencies. The sonner item in registry.json currently only lists vue-sonner — please add @vueuse/core to its dependencies so the CLI installs it for consumers.

Also worth noting: place :theme before v-bind="props" so that a user-supplied theme prop can still override the default (with the current order, props.theme is silently ignored).

I've applied these changes in the latest commit