---
title: Theme-Aware Image
description: Display different images based on the user's light or dark theme preference
type: reference
summary: A component that swaps images based on the active theme, built on top of Next.js Image.
prerequisites:
  - /docs/getting-started
  - /docs/provider
related:
  - /docs/syntax
  - /docs/configuration
---

# Theme-Aware Image



The `ThemeAwareImage` component renders different images depending on whether the user is viewing your documentation in light or dark mode. It extends the Next.js `Image` component, so you get all the same optimization benefits like lazy loading, responsive sizing, and format conversion.

## Usage

Import the component and pass a `src` object with `light` and `dark` variants:

```tsx
import { ThemeAwareImage } from "@/components/geistdocs/theme-aware-image";

<ThemeAwareImage
  src={{
    light: "/images/diagram-light.png",
    dark: "/images/diagram-dark.png",
  }}
  alt="Architecture diagram"
  width={800}
  height={400}
/>
```

The component reads the current theme from `next-themes` and resolves the correct image source automatically. All standard Next.js `Image` props (such as `width`, `height`, `alt`, `priority`, and `className`) are supported.

## How it works

`ThemeAwareImage` uses the `resolvedTheme` value from the `useTheme` hook provided by `next-themes`. This ensures it responds to the actual rendered theme, even when the user's preference is set to "system".

* When `resolvedTheme` is `"dark"`, the `src.dark` image is displayed.
* Otherwise, the `src.light` image is used.

Because this component relies on client-side theme detection, it is a client component (`"use client"`).

## Props

| Prop      | Type                                                    | Description                                                     |
| --------- | ------------------------------------------------------- | --------------------------------------------------------------- |
| `src`     | `{ light: ImageProps["src"]; dark: ImageProps["src"] }` | An object containing the light and dark image sources           |
| `alt`     | `string`                                                | Accessible alt text for the image                               |
| `width`   | `number`                                                | The width of the image in pixels                                |
| `height`  | `number`                                                | The height of the image in pixels                               |
| `...rest` | `ImageProps`                                            | Any additional props supported by the Next.js `Image` component |


---

For a semantic overview of all documentation, see [/sitemap.md](/sitemap.md)

For an index of all available documentation, see [/llms.txt](/llms.txt)