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:

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