ColorModeImage
An image element with a different source for light and dark mode.
Usage
The ColorModeImage component uses the <NuxtImg> component when @nuxt/image is installed, falling back to img otherwise.
<template>
<UColorModeImage
light="https://picsum.photos/id/29/400"
dark="https://picsum.photos/id/46/400"
:width="200"
:height="200"
/>
</template>
Switch between light and dark mode to see the different images:
API
Props
| Prop | Default | Type |
|---|---|---|
dark | string | |
light | 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 |