---
title: "Nuxt Color Mode"
description: "How to use the Nuxt OG Image module with Nuxt Color Mode."
canonical_url: "https://nuxtseo.com/docs/og-image/v5/integrations/color-mode"
last_updated: "2026-05-06T18:46:40.709Z"
---

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.

## 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`.

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