OG Image

Nuxt Color Mode

How to use the Nuxt OG Image module with Nuxt Color Mode.

Nuxt OG Image integrates with Nuxt Color Mode out of the box.

It will render the default NuxtSeo component in the configured color mode. It will also take browser screenshots in the configured color mode.

By default, it will use light mode when the module isn't configured.


To use Nuxt OG Image with Nuxt Color Mode, you need to provide a preference or a fallback color mode that isn't system.

export default defineNuxtConfig({
  colorMode: {
    preference: 'system',
    fallback: 'light', // will render in light mode