ColorModeAvatar

An Avatar with a different src for light and dark mode.

Usage

<script setup lang="ts">
const light = 'https://avatars.githubusercontent.com/u/739984?v=4'
const dark = 'https://avatars.githubusercontent.com/u/904724?v=4'
</script>

<template>
  <UColorModeAvatar :light="light" :dark="dark" />
</template>

Props

• dark (string) - required
• light (string) - required

The ColorModeAvatar component allows you to specify different avatar images for light and dark color modes. Simply pass the image URLs via the required light and dark props.

This component is useful for displaying different avatar images based on the current color mode of your application.