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:
Drop the component onto your canvas.
Upload your Light Mode image.
Upload your Dark Mode image.
Set your alt text and you are ready to go!
Abdulrahim Aref
