Black Friday Week: 20% off on all Nuxt UI Pro products from Nov 25 to Dec 2!

ColorModeImage

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

Usage

<script setup lang="ts">
const light = 'https://picsum.photos/id/29/200'
const dark = 'https://picsum.photos/id/46/200'
</script>

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

Props

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

ColorModeButton

A Button to switch between color mode.

ColorModeSelect

A Select to switch between color mode.