---
title: "Nuxt Color Mode · Nuxt OG Image · Nuxt SEO"
canonical_url: "https://nuxtseo.com/docs/og-image/v5/integrations/color-mode"
last_updated: "2026-08-16T10:00:31.933Z"
meta:
  description: "How to use the Nuxt OG Image module with Nuxt Color Mode."
  "og:description": "How to use the Nuxt OG Image module with Nuxt Color Mode."
  "og:title": "Nuxt Color Mode · Nuxt OG Image · Nuxt SEO"
---

Nuxt SEO on GitHub

You're viewing **OG Image v5** documentation. For the latest, [~~switch to v6~~](https://nuxtseo.com/docs/og-image/getting-started/introduction).

](https://nuxtseo.com/docs/og-image/v5/getting-started/introduction)

](https://nuxtseo.com/docs/og-image/v5/api/define-og-image)

](https://nuxtseo.com/docs/og-image/v5/releases/v5)

Switch to OG Image](https://nuxtseo.com/docs/og-image/getting-started/introduction)Switch to Nuxt SEO](https://nuxtseo.com/docs/nuxt-seo/getting-started/introduction)Switch to Robots](https://nuxtseo.com/docs/robots/getting-started/introduction)Switch to Sitemap](https://nuxtseo.com/docs/sitemap/getting-started/introduction)Switch to Schema.org](https://nuxtseo.com/docs/schema-org/getting-started/introduction)Switch to Link Checker](https://nuxtseo.com/docs/link-checker/getting-started/introduction)Switch to SEO Utils](https://nuxtseo.com/docs/seo-utils/getting-started/introduction)Switch to Site Config](https://nuxtseo.com/docs/site-config/getting-started/introduction)Switch to Skew Protection](https://nuxtseo.com/docs/skew-protection/getting-started/introduction)Switch to AI Ready](https://nuxtseo.com/docs/ai-ready/getting-started/introduction)

**Integrations**

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

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

**Was this page helpful?**

[**Nuxt Content** How to use the Nuxt OG Image module with Nuxt Content.](https://nuxtseo.com/docs/og-image/v5/integrations/content) [**Satori Renderer** Learn how to use the Satori renderer.](https://nuxtseo.com/docs/og-image/v5/guides/satori)