ColorModeImagePRO

GitHub
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

ColorModeButton

A Button to switch between light and dark mode.

ColorModeSelect

A Select to switch between system, dark & light mode.