5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:Tb2e,

🌗 Dynamic Media for Modern Themes

Don't let your videos break your design aesthetic. Theme Aware Video is the ultimate utility for designers who care about mood and accessibility. It detects the visitor's theme (Light, Dark, or System) and instantly serves the correct video file for a seamless, professional experience.

✨ Key Features

Instant Theme Switching: Automatically swaps video sources when the user toggles their theme.
Cinematic Transitions: Features built-in fade effects so the switch feels like a premium production choice, not a technical glitch.
Smart Memory: Choose whether the new video restarts from the beginning or resumes exactly where the previous one left off.
Total Media Control: Full property panel access for Autoplay, Mute, Loop, Volume, and Controls.
Optimized Loading: Uses "Poster Images" and smart-loading to ensure your site speed stays lightning-fast.

🎯 Perfect For:

Hero Sections: High-contrast dark backgrounds for night mode and clean, bright visuals for day mode.
Product Demos: Show your software or app in the exact theme the user is currently browsing.
Ambient Backgrounds: Shift the mood of your site's atmosphere as the sun goes down.

🛠️ Pro Setup in Seconds

Upload: Add your Light-mode and Dark-mode video files (or links).
Configure: Set your "Poster" thumbnails for instant loading.
Customize: Choose your transition style and playback logic (Restart vs. Resume).
Publish: Deliver a polished, theme-synced experience that impresses clients and users alike.

🧩 Technical Specs

SSR Ready: Works perfectly with Framer's server-side rendering.
Responsive: Full control over "Video Fit" (Cover, Fill, Contain).
Zero Code: All logic is handled under the hood—you just design.
Works will all the theme toggles in the marketplace but one

5a:[["$","$L5d",null,{"post":{"id":"01999a98-ea14-7111-a8b5-9b37d8bf11f2","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"22f71974-4a17-471d-b9eb-95828a0594f2","name":"Taha","slug":"taha","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"x7oXiKmxWVghZ8TFPMm4","resolved":true,"title":"Theme Aware video","body":"$5e","bodyJson":null,"introduction":"Videos adapt to Light & Dark mode","slug":"themeawarevideo","author":{"framerUserId":"22f71974-4a17-471d-b9eb-95828a0594f2","name":"Taha","slug":"taha","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/x7oXiKmxWVghZ8TFPMm4/themeawarevideo-1QHjShGojgYtm302PS8uPsl6HkdaWi","metadata":{"tint":{"h":240,"s":53,"l":70},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-09-23T17:57:01.622Z","updatedAt":"2026-09-12T15:38:14.517Z","publishedAt":"2025-09-30T12:28:56.724Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://diligent-tasks-403647.framer.app/","price":"10","paymentUrl":"https://buy.polar.sh/polar_cl_soLNVEvk4nAAM4gVpg7W6vHH8KC7IqccXNK7q2zq35z","workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"iaAk4io6gcxbrZ6UkJKT","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-09-30T12:28:56.724Z","updatedAt":"2025-09-30T12:28:56.724Z","reported":false}}],"$L5f"]

Suggested for you