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

[airich-design]

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?

[airich-design]

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.

[Alexikon]

I had the same problem. Solved it by doing this:

toastOptions={{
  classNames: {
    toast:
      props.richColors
        // Removed everything where shadcn+tailwind affected the colors
        ? "group-[.toaster]:border group-[.toaster]:shadow-lg"
        : "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]: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",
    // Gives the closeButton a background color, because default unstyled button is transparent
    closeButton: "group-[.toaster]:bg-muted group-[.toaster]:border",
  },
}}

If you disable richColors, now you still have the shadcn style.

[lutzseverino]

What's up with this issue? Right when I installed it, richColors were working perfectly. Suddenly the colors disappeared. All the proposed workarounds here look worse because they lack a border.

[sheraz4196]

It is working for me all the time, Just gad such kind of issue while working in react. but it worked there

toastOptions={{
  classNames: {
    toast:
      props.richColors
        // Removed everything where shadcn+tailwind affected the colors
        ? "group-[.toaster]:border group-[.toaster]:shadow-lg"
        : "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]: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",
    // Gives the closeButton a background color, because default unstyled button is transparent
    closeButton: "group-[.toaster]:bg-muted group-[.toaster]:border",
  },
}}

[airich-design]

I still wonder how you guys keep finding this issue, its closed and resolved. This issue existed and doesnt anymore.

Wish you all a good week!

[lutzseverino]

Hi, sorry for the rushed comment yesterday.

For anyone else still experiencing this issue, my particular problem was that the global.css file was not being imported at the top of the imports in the file.

This happened to me suddenly after installing an import sorter tool, which made this even more confusing because I didn't manually change the order of the imports; Prettier did.

I'm unsure if the import needs to be at the absolute top of the file or just before the main app import—I'm not home to test right now—but regardless, moving it to the top did the trick, which actually makes sense.

[WilliamNazarian]

this issue still happens to me how can I resolve it. Unless I remove the toastOptions in react I am unable to override the default colors I gave it with richColors