---
title: "Theme Aware Image — Framer component · Best of Framer"
description: "$9.00 · Framer component · by Taha · Buttons. Theme Aware Image solves the contrast problem."
canonical: "https://framer.elliotli.dev/component/adaptive-image"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Theme Aware Image

# Theme Aware Image

Smart images | Light & Dark mode.

[View on Framer](https://framer.com/marketplace/components/adaptive-image/?via=elliot-li)

![Theme Aware Image preview image 1](https://framer.elliotli.dev/og/component/adaptive-image/317244b3fc1b316d/1600x1200.jpg)

## Summary

Theme Aware Image solves the contrast problem.

## Description

## 🖼️ Visual Harmony in Every Theme

Ever had a beautiful illustration look "broken" when a user switches to Dark Mode? **Theme Aware Image** solves the contrast problem. It’s a specialized Framer component that detects the active website theme and swaps your images in real-time, ensuring your site remains polished and readable 24/7.

### ✨ Why You Need This:

-   **Logo Perfection:** Switch between a dark logo for light headers and a white logo for dark headers.
    
-   **Illustration Sync:** Serve mood-specific artwork that feels native to the user's environment.
    
-   **Diagram Clarity:** Ensure technical charts and screenshots are always legible by providing theme-optimized versions.
    

### 🚀 Key Features:

-   **Instant Auto-Switch:** Detects Light, Dark, or System preferences with zero lag.
    
-   **localStorage Support:** Remembers the user’s preference across the entire site visit.
    
-   **Native Framer Logic:** Works perfectly with Framer’s built-in color styles and your custom **Theme Toggle**.
    
-   **Responsive & Performance-First:** Automatically utilizes Framer’s CDN for optimized AVIF/WebP delivery on all devices.
    
-   **Zero Configuration:** No API keys or complex setups. Drop, upload, and publish.
    

### 🎯 Perfect For:

-   **SaaS Landing Pages:** For theme-synced app screenshots.
    
-   **Portfolios:** To show off design work that adapts to the mood.
    
-   **Documentation Sites:** Where readability of diagrams is critical.
    

### 🛠️ 3-Step Setup:

1.  **Upload:** Select your "Light Mode" image.
    
2.  **Upload:** Select your "Dark Mode" image.
    
3.  **Customize:** Set your alt-text (for SEO) and aspect ratio.
    
4.  **Done.** Your images are now theme-intelligent.
    
    **Works will all the theme toggles in the marketplace but one**
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #6022

## Details

- **Author**: Taha
- **Price**: $9.00
- **Published**: 2025-08-04
- **Updated**: 2026-10-11
- **Added**: 2025-07-31
- **Categories**: Buttons

## More like this

-   [Liquid Blob Button](/component/liquid-blob-button) — Oddframe · Free — Interactive Liquid Blob CTA Button
-   [Pixel Face Toggle](/component/pixel-face-toggle) — Zac Nielson · $9 — Dark mode switch with a pixel face
-   [Liquid Hover Media](/component/liquid-hover-media) — Bardia Madani · $5 — Fluid media distortion on hover
-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow