ColorModeAvatar

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

Usage

The ColorModeAvatar component extends the Avatar component, so you can pass any property such as size, icon, etc.

Use the light and dark props to define the source for light and dark mode.

light

dark

<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`	`'span'`	`any` The element or component this component should render as.
`light`		`string`
`dark`		`string`
`alt`		`string`
`crossorigin`		`"" \| "anonymous" \| "use-credentials"`
`decoding`		`"async" \| "auto" \| "sync"`
`height`		`string \| number`
`loading`		`"lazy" \| "eager"`
`referrerpolicy`		`"" \| "no-referrer" \| "no-referrer-when-downgrade" \| "origin" \| "origin-when-cross-origin" \| "same-origin" \| "strict-origin" \| "strict-origin-when-cross-origin" \| "unsafe-url"`
`sizes`		`string`
`srcset`		`string`
`usemap`		`string`
`width`		`string \| number`
`icon`		`string \| object`
`text`		`string`
`size`	`'md'`	`"md" \| "3xs" \| "2xs" \| "xs" \| "sm" \| "lg" \| "xl" \| "2xl" \| "3xl"`
`chip`		`boolean \| ChipProps`
`ui`		`{ root?: ClassNameValue; image?: ClassNameValue; fallback?: ClassNameValue; icon?: ClassNameValue; }`

This component also supports all native <img> HTML attributes.

5b177 — feat: extend native HTML attributes (#5348)

5cb65 — feat: import @nuxt/ui-pro components

ContentToc

A sticky Table of Contents with automatic active anchor link highlighting.

ColorModeButton

A Button to switch between light and dark mode.