sonner.svelte 668 B

1234567891011121314151617181920
  1. <script lang="ts">
  2. import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
  3. import { mode } from "mode-watcher";
  4. let restProps: SonnerProps = $props();
  5. </script>
  6. <Sonner
  7. theme={$mode}
  8. class="toaster group"
  9. toastOptions={{
  10. classes: {
  11. toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
  12. description: "group-[.toast]:text-muted-foreground",
  13. actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
  14. cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
  15. },
  16. }}
  17. {...restProps}
  18. />