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