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

string | Record<string, any>

"img"

ColorModeButton

A Button to switch between color mode.

ColorModeSelect

A Select to switch between color mode.