Skip to content

component

Theme Aware Image

By Taha

Details

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: Upload: Select your "Light Mode" image. Upload: Select your "Dark Mode" image. Customize: Set your alt-text (for SEO) and aspect ratio. Done. Your images are now theme-intelligent. Works will all the theme toggles in the marketplace but one

Introduction

Smart images | Light & Dark mode.

Rank history

Daily rank per list, from the first snapshot — lower is better.

120014001600173088/148/228/309/79/15
  • All · #4302