Sep 1, 2025
0 views
A theme-aware image component for Framer that automatically swaps between light and dark images. It can detect the current theme via system preference, Framer’s theme attributes, or both (recommended), and updates live on changes. Supports configurable size, object-fit, and corner radius, with graceful empty-state hints when an image is missing.
//
Tags
Drop the component onto the canvas.
Provide Light Mode Image and Dark Mode Image.
Choose Theme Detection: system, framer, or both (recommended).
Adjust Width, Height, Image Fit, and Corner Radius.
Preview theme switching by toggling your OS/Framer theme.
Preset A – Logo Swap: detect=both, fit=contain, radius=0, width=240, height=120
Preset B – Illustration Cover: detect=system, fit=cover, radius=16, width=600, height=400
Preset C – Framer Only: detect=framer, fit=scale-down, radius=12, width=320, height=240
System detection: window.matchMedia("(prefers-color-scheme: dark)").
Framer detection: checks documentElement/body for data-theme, data-framer-theme, toggle-theme, and .dark class.
Both: first tries Framer attributes; if not dark, falls back to system preference.
Subscribes to media query changes and attribute mutations to update state live.
Renders selected img with object-fit and rounded corners; fades via a short opacity transition.
Observers watch only specific attributes; negligible overhead.
Prefer both for resilient detection across editors and published sites.
Use appropriate image dimensions to avoid browser scaling artifacts.
Modern browsers supporting prefers-color-scheme and MutationObserver.
If Framer uses custom theme hooks not covered by attributes/classes, extend the checks in code.
Empty state shows a neutral placeholder prompting which image is missing.
Provide meaningful alt text if the image conveys information (replace empty string).
Ensure adequate contrast in surrounding UI; component itself doesn’t alter image content.
No network calls (beyond the browser fetching your image URLs).
No dangerouslySetInnerHTML / eval.
All listeners/observers are removed on unmount.
Provide meaningful alt text if the image conveys information (replace empty string).
Ensure adequate contrast in surrounding UI; component itself doesn’t alter image content.
No network calls (beyond the browser fetching your image URLs).
No dangerouslySetInnerHTML / eval.
All listeners/observers are removed on unmount.
Implementation & Framer adaptation by SecretoCho Design.
SecretoCho Design
Source Link
SecretoCho Design 2025
Provided “as is” for visual/UX purposes. Validate asset licensing, responsive behavior, and accessibility in your project.
Stay ahead of the curve with insights into emerging visualization trends and technologies.