component
Theme Aware Image
By Taha
Details
- TahaAuthor
- componentType
- $10.00Price
- 2025-08-04Published
- 2026-09-12Updated
- 2025-07-31Added
- ButtonsCategories
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.
- All · #4302