ColorModeAvatar

AvatarGitHub
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.

<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:

API

Props

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
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.

Changelog

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.