---
title: "ThemeAware Image — Free Framer component · Best of Framer"
description: "Free Framer component · by Abdulrahim Aref · Buttons. Overview The ThemeAware Image component is the perfect solution for adapting your website's visual assets to the user's system theme."
canonical: "https://framer.elliotli.dev/component/themeaware-image"
---

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

# ThemeAware Image

Auto-swaps Dark & Light mode images.

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

![ThemeAware Image preview image 1](https://framer.elliotli.dev/og/component/themeaware-image/5e830bfcfbbc4ce4/1600x1200.jpg)

## Summary

Overview The ThemeAware Image component is the perfect solution for adapting your website's visual assets to the user's system theme.

## Description

**Overview**

The ThemeAware Image component is the perfect solution for adapting your website's visual assets to the user's system theme. It automatically detects if the user prefers Dark or Light mode via system settings and displays the corresponding image instantly.

**Key Features:**

-   **Proper Dark Mode Detection:** Uses the standard prefers-color-scheme media query to respect system settings perfectly.
    
-   **Real-time Updates:** Actively listens for theme changes so the image swaps instantly without needing a page refresh.
    
-   **Highly Optimized & SSR-Safe:** Built with best practices. Guards against window being undefined during server-side rendering, uses startTransition for smooth state updates, and includes proper event cleanup to prevent memory leaks.
    
-   **Accessible:** Full alt text support for screen readers.
    
-   **Flexible Layout:** Includes object-fit controls, letting you adjust exactly how your images are displayed within the frame.
    

**How to Use:**

1.  Drop the component onto your canvas.
    
2.  Upload your Light Mode image.
    
3.  Upload your Dark Mode image.
    
4.  Set your alt text and you are ready to go!
    

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

-   All · #4143

## Details

- **Author**: Abdulrahim Aref
- **Published**: 2026-04-15
- **Updated**: 2026-04-15
- **Added**: 2026-04-12
- **Categories**: Buttons

## More like this

-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow
-   [Dash Stretch Button](/component/dash-stretch-button) — Pentaclay · Free — Animated Hover Button With a Dash
-   [Nova Theme Toggle](/component/nova-theme-toggle) — Shouvik Biswas · $12 — Three-Mode Theme Toggle
-   [Nabby: Copy Button](/component/nabby-copy-button) — Francesco Gallo · Free — Plug in your button, copy anything