The ColorModeAvatar component extends theAvatar component, so you can pass any property such assize,icon, etc.
Use thelight anddark props to define the source for light and dark mode.
<template> <UColorModeAvatar light="https://github.com/vuejs.png" dark="https://github.com/nuxt.png" /></template>
Switch between light and dark mode to see the different images:
| Prop | Default | Type |
|---|
as | | The element or component this component should render as. |
light | | |
dark | | |
icon | | |
size | | "md" | "xs" | "sm" | "lg" | "xl" | "3xs" | "2xs" | "2xl" | "3xl"
|
alt | | |
chip | | The element or component this component should render as. Defaults to'div'. Display some text inside the chip. color?: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"
size?: "md" | "xs" | "sm" | "lg" | "xl" | "3xs" | "2xs" | "2xl" | "3xl"
position?: "top-right" | "bottom-right" | "top-left" | "bottom-left"
The position of the chip. Defaults to'top-right'. Whentrue, keep the chip inside the component for rounded elements. Whentrue, render the chip relatively to the parent. ui?: { root?: ClassNameValue; base?: ClassNameValue; }
|
text | | |
ui | | { root?: ClassNameValue; image?: ClassNameValue; fallback?: ClassNameValue; icon?: ClassNameValue; }
|
