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
dark*string
light*string
alt string
crossorigin "" | "anonymous" | "use-credentials"
decoding "async" | "auto" | "sync"
height string | number
loading "lazy" | "eager"
referrerpolicy "" | "no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url"
sizes string
srcset string
usemap string
width string | number
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.