Nuxt Color Mode · Nuxt OG Image · Nuxt SEO

-
-
-
-

[1.4K](https://github.com/harlan-zw/nuxt-seo)

[Nuxt SEO on GitHub](https://github.com/harlan-zw/nuxt-seo)

You're viewing **OG Image v5** documentation. For the latest,

.

OG Image

-
-
-
-
-
-
-
-
-
-

Search…```k`` /`

v5

- Playgrounds
- [Discord Support](https://discord.com/invite/275MBUBvgP)

### Getting Started

-
-
-
-

### Core Concepts

-
-
-
-
-
-
-
-
-
-
-
-
-
-

### Integrations

-
-

Integrations

# Nuxt Color Mode

[Copy for LLMs](https://nuxtseo.com/docs/og-image/v5/integrations/color-mode.md)

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

[Edit this page](https://github.com/nuxt-modules/og-image/blob/v5.1.13/docs/content/1.integrations/2.color-mode.md)

[Markdown For LLMs](https://nuxtseo.com/docs/og-image/v5/integrations/color-mode.md)

Did this page help you?

[GitHub](https://github.com/harlan-zw/nuxt-seo) [ Discord](https://discord.com/invite/275MBUBvgP)

###

-
-

Modules

-
-
-
-
-
-
-
-
-

###

-
-
-

###

Nuxt

-
-
-
-
-

Vue

-
-
-
-
-
-
-
-

###

-
-
-
-
-
-
-
-
-
-

Copyright © 2023-2026 Harlan Wilton - [MIT License](https://github.com/harlan-zw/nuxt-seo/blob/main/license) · [mdream](https://mdream.dev)