ColorModeImage

Um elemento de imagem com uma origem diferente para os modos claro e escuro.

Uso

O componente ColorModeImage usa o componente <NuxtImg> quando o @nuxt/image está instalado, recorrendo a img caso contrário.

light

dark

<template>
  <NColorModeImage
    light="https://picsum.photos/id/29/400"
    dark="https://picsum.photos/id/46/400"
    :width="200"
    :height="200"
  />
</template>

Alterne entre os modos claro e escuro para ver as diferentes imagens:

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`

Este componente também suporta todos os atributos HTML nativos de <img>.

Changelog

No recent changes

ColorModeButton

Um Button para alternar entre os modos claro e escuro.

ColorModeSelect

Um Select para alternar entre os modos do sistema, escuro e claro.