Vue ColorModeAvatar Component

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>
  <B24ColorModeAvatar 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`		`IconComponent` Display an icon on the left side.
`text`		`string`
`size`	`'md'`	`"md" \| "3xs" \| "2xs" \| "xs" \| "sm" \| "lg" \| "xl" \| "2xl" \| "3xl"`
`chip`		`boolean \| ChipProps`
`b24ui`		`{ root?: ClassNameValue; image?: ClassNameValue; fallback?: ClassNameValue; icon?: ClassNameValue; }`

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

ContentToc

A sticky table of contents component with dynamic active section highlighting.

ColorModeButton

A button to toggle between light and dark themes.