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.
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.
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.
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.
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.
Taha
