New Sonner component - "richColors" Prop Not Overriding Default Colors in sonner Component of shadcn/ui

[NotInTime]

Issue The richColors prop in the sonner component of shadcn/ui does not override the default colors as expected. Custom colors passed through this prop are ignored, and the component continues to use its default color scheme.

Reproduction Steps Implement sonner component from shadcn/ui. Use the richColors prop on the "" Observe that the component still shows the default colors from sonner.tsx instead of the richer colors for succes and error toasts as promised from the docs.

Expected vs. Actual Behavior Expected: The sonner component should display the colors provided through the richColors prop.

Actual: The component disregards the richColors prop and uses its default colors.

[murali-krishna-sv]

It is working for me. Make sure you are using this format https://sonner.emilkowal.ski/toast#creating-toasts to create toasts for success, error, warning ...

You can find the css for rich colors here - https://github.com/emilkowalski/sonner/blob/main/src/styles.css#L440

If you want to change the styles for normal toast, try using a custom toast - https://sonner.emilkowal.ski/toast#custom and colors to them.

[daviloops]

I partially solved it by commenting this lines out from sonner.tsx, now it doesn't override richColors props, but I guess it also doesn't apply custom variables to the toasts.

import { useTheme } from "next-themes"
import { Toaster as Sonner } from "sonner"

type ToasterProps = React.ComponentProps<typeof Sonner>

const Toaster = ({ ...props }: ToasterProps) => {
  const { theme = "system" } = useTheme()

  return (
    <Sonner
      theme={theme as ToasterProps["theme"]}
      className="toaster group"
      // TODO: had to comment this to make richColors work
      // toastOptions={{
      //   classNames: {
      //     toast:
      //       "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
      //     description: "group-[.toast]:text-muted-foreground",
      //     actionButton:
      //       "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
      //     cancelButton:
      //       "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
      //   },
      // }}
      {...props}
    />
  )
}

export { Toaster }

[obrunofontana]

I partially solved it by commenting this lines out from sonner.tsx, now it doesn't override richColors props, but I guess it also doesn't apply custom variables to the toasts.

import { useTheme } from "next-themes"
import { Toaster as Sonner } from "sonner"

type ToasterProps = React.ComponentProps<typeof Sonner>

const Toaster = ({ ...props }: ToasterProps) => {
  const { theme = "system" } = useTheme()

  return (
    <Sonner
      theme={theme as ToasterProps["theme"]}
      className="toaster group"
      // TODO: had to comment this to make richColors work
      // toastOptions={{
      //   classNames: {
      //     toast:
      //       "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
      //     description: "group-[.toast]:text-muted-foreground",
      //     actionButton:
      //       "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
      //     cancelButton:
      //       "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
      //   },
      // }}
      {...props}
    />
  )
}

export { Toaster }

This is a workarround, any best solution?

[NotInTime]

I partially solved it by commenting this lines out from sonner.tsx, now it doesn't override richColors props, but I guess it also doesn't apply custom variables to the toasts.

import { useTheme } from "next-themes"
import { Toaster as Sonner } from "sonner"

type ToasterProps = React.ComponentProps<typeof Sonner>

const Toaster = ({ ...props }: ToasterProps) => {
  const { theme = "system" } = useTheme()

  return (
    <Sonner
      theme={theme as ToasterProps["theme"]}
      className="toaster group"
      // TODO: had to comment this to make richColors work
      // toastOptions={{
      //   classNames: {
      //     toast:
      //       "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
      //     description: "group-[.toast]:text-muted-foreground",
      //     actionButton:
      //       "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
      //     cancelButton:
      //       "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
      //   },
      // }}
      {...props}
    />
  )
}

export { Toaster }

This is a workarround, any best solution?

Yes i guess this is a workaround but at this point you could just use the Sonner Container from https://sonner.emilkowal.ski/

[l2aelba]

I think ShadcnUi is made for unstyled colors, so you have to custom style the component by yourself in toastOptions Doc: https://sonner.emilkowal.ski/styling

---

For someone who lazy to do that, so do this with a blank toastOptions (if you don't want to change the installed src code)

<Toaster richColors toastOptions={{}} />

---

Example options:

{
  classNames: {
    description: 'group-[.toast]:text-muted-foreground',
    actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
    cancelButton: 'group-[.toast]:bg-white group-[.toast]:text-black',
    error:
      'group toast group-[.toaster]:bg-red group-[.toaster]:text-red-600 dark:group-[.toaster]:text-foreground group-[.toaster]:shadow-lg',
    success:
      'group toast group-[.toaster]:bg-green group-[.toaster]:text-green-600 dark:group-[.toaster]:text-foreground group-[.toaster]:shadow-lg',
    warning:
      'group toast group-[.toaster]:bg-yellow group-[.toaster]:text-yellow-600 dark:group-[.toaster]:text-foreground group-[.toaster]:shadow-lg',
    info: 'group toast group-[.toaster]:bg-blue group-[.toaster]:text-blue-600 dark:group-[.toaster]:text-foreground group-[.toaster]:shadow-lg',
  },
}

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

[kevinlitardo]

Hi, the current solution I found (based on the prev comments) is to fill the component like this:

[sheraz4196]

Best thing is to use Next.js as toast works fine there. But for other frameworks, the solution @kevinlitardo proposed is best.