Avatar with light background color fallback

<script setup lang="ts">
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
</script>

<template>
  <div class="flex items-center gap-2">
    <Avatar class="after:border-primary/10">
      <AvatarFallback class="bg-primary/10 text-primary">
        AB
      </AvatarFallback>
    </Avatar>
    <Avatar class="after:border-destructive/10">
      <AvatarFallback class="bg-destructive/10 text-destructive">
        DV
      </AvatarFallback>
    </Avatar>
    <Avatar class="after:border-green-200 dark:after:border-green-600">
      <AvatarFallback class="bg-green-50 text-green-600 dark:bg-green-900">
        SB
      </AvatarFallback>
    </Avatar>
    <Avatar class="after:border-fuchsia-200 dark:after:border-fuchsia-600">
      <AvatarFallback class="bg-fuchsia-50 text-fuchsia-600 dark:bg-fuchsia-900">
        DB
      </AvatarFallback>
    </Avatar>
  </div>
</template>