Nuxt Color Mode

Nuxt OG Image integrates with Nuxt Color Mode by default.

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.

Usage

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
  },
})

Per-image theme switching

If you need to render the same component in different themes for different pages (e.g. a light variant and a dark variant of a hero image), bind :data-theme on the component's root element to a colorMode prop. See Theme Switching in the styling guide.