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)

**OG Image v6** is here! Looking for an older version?

.

OG Image

-
-
-
-
-
-
-
-
-
-

Search…```k`` /`

v6 (latest)

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

### Getting Started

-
-
-
-

### Core Concepts

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

### Overview

-
-
-
-

### Integrations

-
-
-

Integrations

# Nuxt Color Mode

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

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](#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/edit/main/docs/content/4.integrations/2.color-mode.md)

[Markdown For LLMs](https://nuxtseo.com/docs/og-image/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)