ColorModeImage

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

Usage

<script setup>
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 | object
"img"

ColorModeAvatar

An Avatar with a different src for light and dark mode.

ColorModeButton

A Button to switch between color mode.