Nuxt UI Pro v1.0 is out with dashboard components! Discount ends in 7 hours.

ColorModeImage

An <img> with a different src for light and dark mode.

Usage

<script setup lang="ts">
const light = 'https://source.unsplash.com/random/200x200?sky'
const dark = 'https://source.unsplash.com/random/200x200?stars'
</script>

<template>
  <UColorModeImage :light="light" :dark="dark" />
</template>

Props

darkrequired
string
lightrequired
string
as
string | Record<string, any>
"img"