frontend/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>