ColorModeImage

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

The ColorModeImage component uses the <NuxtImg> component when @nuxt/image is installed, falling back to img otherwise.

{
  "wait": "Loading client-side content..."
}

Switch between light and dark mode to see the different images:

API

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.

ColorModeButton

A button to toggle between light and dark themes.

ColorModeSelect

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