frontend/app/components/ui/sonner/Sonner.vue

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

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

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

    }"
    />
</template>