5c:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/3gx96u50v9idb.js","/creators-assets/_next/static/immutable/chunks/125_ce2ese0y_.js","/creators-assets/_next/static/immutable/chunks/2ii8lkleumgkk.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/069_m7850i8jf.js","/creators-assets/_next/static/immutable/chunks/03586ab1rea-b.js","/creators-assets/_next/static/immutable/chunks/19qq0hy3mz_vv.js","/creators-assets/_next/static/immutable/chunks/2oixy7hansmjm.js","/creators-assets/_next/static/immutable/chunks/2rczsbgoa3afm.js","/creators-assets/_next/static/immutable/chunks/2a63j-5qkrdf4.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/0-lv0573a1cyl.js","/creators-assets/_next/static/immutable/chunks/3kkqflhmmpg9p.js","/creators-assets/_next/static/immutable/chunks/0ib-rcz4b0eq3.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/24gcuxpvxd8dy.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3vd9_7_mqx0kl.js","/creators-assets/_next/static/immutable/chunks/3l37d07td4kzk.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3nw4q_evu8ge1.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/2qsfz_74auu2_.js","/creators-assets/_next/static/immutable/chunks/1xkjm3oyldl_r.js","/creators-assets/_next/static/immutable/chunks/16d5vpfsnfybw.js","/creators-assets/_next/static/immutable/chunks/3yfgkb3cck8zt.js","/creators-assets/_next/static/immutable/chunks/0rfcd366io6r9.js","/creators-assets/_next/static/immutable/chunks/2r15b2hek61lg.js","/creators-assets/_next/static/immutable/chunks/3kyaj4hrugjs0.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/2ryuxt_mk774w.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/3eh5q_6ksmw0l.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/0pc9t50m5x90i.js","/creators-assets/_next/static/immutable/chunks/2ee50z0bknh40.js","/creators-assets/_next/static/immutable/chunks/3f4d4x4z1mrzh.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js","/creators-assets/_next/static/immutable/chunks/0e-wwv74y78f7.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js"],"PostDetailCard"] 5d:Tb18,

Adaptive Image — Auto Dark/Light Mode Component

A drag-and-drop image component that automatically displays the right image for your visitor's system theme. Upload one image for light mode and one for dark mode — the component handles the rest, switching in real time based on your visitor's own device or browser settings.

✨ Key Features

🌗 True System Detection — Reads the visitor's OS/browser prefers-color-scheme setting directly, no manual toggle required
⚡ Real-Time Response — If the visitor changes their system theme while the page is open, the image updates instantly, no refresh needed
🧩 Drag & Drop Component — Just drag it onto your canvas like any native Framer element, no code editing needed
🎨 Two Image Slots — Separate upload fields for your light-theme and dark-theme image variants
📐 Adjustable Corner Radius — Fine-tune the image's border radius directly from the properties panel
📏 Resizable on Canvas — Freely resize the component's width and height like any other layer Perfect For
- Logos & brand marks with light/dark variants
- Hero images & banners
- Product screenshots & mockups
- Illustrations & icons
- Any visual asset that needs to feel native to the visitor's preferred theme
Why You Need This
Most Framer sites with dark mode support still show one static image regardless of theme, which often looks mismatched, like a light-background logo floating on a dark hero section. This component fixes that entirely. Upload your two image variants once, adjust the radius and size to fit your design, and every visitor automatically sees the version that matches their own system preference.
How It Works
1. Drag the "Adaptive Image" component onto your canvas
2. Upload your light-mode image
3. Upload your dark-mode image
4. Adjust corner radius and size to fit your design
5. Publish — done. The image now automatically matches each visitor's system theme

59:[["$","$L5c",null,{"post":{"id":"019fa761-3f20-72ea-927b-7be378de83c3","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"a9625b80-0cc4-4552-b1cb-e3aed4e62480","name":"Shiddiq Jawas","slug":"shiddiq-jawas","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"PyegI8vnjvl5KYvGLypF","resolved":true,"title":"AdaptiveImage","body":"$5d","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Adaptive Image — Auto Dark/Light Mode Component","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"A drag-and-drop image component that automatically displays the right image for your visitor's system theme. Upload one image for light mode and one for dark mode — the component handles the rest, switching in real time based on your visitor's own device or browser settings."}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"sparkles","emoji":"✨"}},{"type":"text","text":" Key Features","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"last_quarter_moon","emoji":"🌗"}},{"type":"text","text":" "},{"type":"text","text":"True System Detection","marks":[{"type":"bold"}]},{"type":"text","text":" — Reads the visitor's OS/browser prefers-color-scheme setting directly, no manual toggle required"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"zap","emoji":"⚡"}},{"type":"text","text":" "},{"type":"text","text":"Real-Time Response","marks":[{"type":"bold"}]},{"type":"text","text":" — If the visitor changes their system theme while the page is open, the image updates instantly, no refresh needed"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"jigsaw","emoji":"🧩"}},{"type":"text","text":" "},{"type":"text","text":"Drag & Drop Component","marks":[{"type":"bold"}]},{"type":"text","text":" — Just drag it onto your canvas like any native Framer element, no code editing needed"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"art","emoji":"🎨"}},{"type":"text","text":" "},{"type":"text","text":"Two Image Slots","marks":[{"type":"bold"}]},{"type":"text","text":" — Separate upload fields for your light-theme and dark-theme image variants"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"triangular_ruler","emoji":"📐"}},{"type":"text","text":" "},{"type":"text","text":"Adjustable Corner Radius","marks":[{"type":"bold"}]},{"type":"text","text":" — Fine-tune the image's border radius directly from the properties panel"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"straight_ruler","emoji":"📏"}},{"type":"text","text":" "},{"type":"text","text":"Resizable on Canvas","marks":[{"type":"bold"}]},{"type":"text","text":" — Freely resize the component's width and height like any other layer "},{"type":"text","text":"Perfect For","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Logos & brand marks with light/dark variants"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hero images & banners"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product screenshots & mockups"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Illustrations & icons"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Any visual asset that needs to feel native to the visitor's preferred theme"}]},{"type":"paragraph"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Why You Need This","marks":[{"type":"bold"}]},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"text","text":"Most Framer sites with dark mode support still show one static image regardless of theme, which often looks mismatched, like a light-background logo floating on a dark hero section. This component fixes that entirely. Upload your two image variants once, adjust the radius and size to fit your design, and every visitor automatically sees the version that matches their own system preference."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"How It Works","marks":[{"type":"bold"}]}]},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drag the \"Adaptive Image\" component onto your canvas"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Upload your light-mode image"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Upload your dark-mode image"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjust corner radius and size to fit your design"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Publish — done. The image now automatically matches each visitor's system theme"}]}]}],"attrs":{"type":null,"start":1}}]}]}]},"introduction":"Switches images by light/dark mode","slug":"adaptiveimage","author":{"framerUserId":"a9625b80-0cc4-4552-b1cb-e3aed4e62480","name":"Shiddiq Jawas","slug":"shiddiq-jawas","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/a9625b80-0cc4-4552-b1cb-e3aed4e62480/019fa75d-1145-75f9-949f-8fbf9f6ad53e.jpg","metadata":{"tint":{"h":0,"s":0,"l":57},"width":2880,"height":1652}}],"post":null,"createdAt":"2026-07-28T06:19:55.556Z","updatedAt":"2026-07-28T06:19:55.556Z","publishedAt":"2026-07-28T06:19:55.549Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://adaptiveimageshiddiqs.framer.website/","price":"3","paymentUrl":"https://shiddiqcreatives.lemonsqueezy.com/checkout/buy/e8010313-fd02-48d0-810d-3a482b96889b","workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"PKjro63RrShgN3uYbX5Q","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-28T06:19:56.065Z","updatedAt":"2026-07-28T06:19:56.065Z","reported":false}}],"$L5e"]

Suggested for you