ColorModeImage

GitHub
An image element with a different source for light and dark mode.

Usage

<template>
  <PColorModeImage
    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
This component also supports all native <img> HTML attributes.

Changelog

No recent changes

ColorModeButton

A Button to switch between light and dark mode.

ColorModeSelect

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