Toasts are being rendered backgroundless

[ssr765]

The toasts are being rendered without background, it is solved easily specifying the background color in toast-options prop, but then ignores the colors applied via rich-colors prop. I'm using toast.promise that has no rich color assigned.

This is my implementation of the Toaster:

  <Toaster
    :dark="dark"
    :visible-toasts="5"
    :toast-options="{
      style: {
        border: '1px solid',
      },
      descriptionClass: 'whitespace-pre-line text-xs! leading-4!',
    }"
    close-button
    rich-colors
    :position="position"
    class="pointer-events-auto"
  />

But still happens with an unconfigured Toaster.

Ah yes, and the dark mode isn't being applied either (dark variable is from VueUse's useDark method).

[rdennler]

If it helps, I was able to fix it on my end by specifying custom variables.

You can implement overrides. like so in your .css file

    --popover: 0 0% 100%; // <--- Adjust accordingly
    --popover-foreground: 240 10% 3.9%; // <--- Adjust accordingly
    --border: 240 5.9% 90%; // <--- Adjust accordingly

Then something like this

<script lang="ts" setup>
import { Toaster as Snackbar, type ToasterProps } from "vue-sonner";
import "vue-sonner/style.css";

const props = defineProps<ToasterProps>();
</script>

<template>
    <Snackbar
        class="toaster group"
        v-bind="props"
        :style="{
            '--normal-bg': 'hsl(var(--popover))',
            '--normal-text': 'hsl(var(--popover-foreground))',
            '--normal-border': 'hsl(var(--border))',
        }"
    />
</template>

Should allow proper rendering of colors while preserving rich color support.