ColorModeAvatar

An Avatar that automatically switches its image based on the current theme (light/dark).

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.

{
  "wait": "Loading client-side content..."
}

Switch between light and dark mode:

to see the different images

API

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.