---
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/integrations/color-mode"
last_updated: "2026-05-14T12:24:02.706Z"
---

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

```ts
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](/docs/og-image/guides/styling#theme-switching-data-theme) in the styling guide.