5d:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/1rc641binzbjp.js","/creators-assets/_next/static/immutable/chunks/12ci1vsd8nj4u.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/2ply_q-h6u_2z.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/1pb7yncyfm9fe.js","/creators-assets/_next/static/immutable/chunks/1j6jg0y72xk13.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/26nhnsanh2piz.js","/creators-assets/_next/static/immutable/chunks/03itqfxm4gmj8.js","/creators-assets/_next/static/immutable/chunks/114fkj16mhe97.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/16inv17cv83xq.js","/creators-assets/_next/static/immutable/chunks/2760bhhttj0zo.js","/creators-assets/_next/static/immutable/chunks/3_z6gb0g1nigd.js","/creators-assets/_next/static/immutable/chunks/3vlbhrh3-zofo.js","/creators-assets/_next/static/immutable/chunks/120bipr4k16wv.js","/creators-assets/_next/static/immutable/chunks/3ea2l_ol8wqqa.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/1zr4ew02k6y_l.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/08ajsjh8ypdt2.js","/creators-assets/_next/static/immutable/chunks/1ddgh6mv1wg4x.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/3t6k2_m2gc3-k.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/0w6oa8_ba59u4.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3sa-o_ztvtkwe.js","/creators-assets/_next/static/immutable/chunks/3c3kl-ixsd844.js"],"PostDetailCard"] 5e:Td93,

🌙☀️ Smart Theme Toggle Component

Transform your website's user experience with this intelligent theme switching component that seamlessly adapts to your users' preferences.

Key Features

🎯 Smart Auto-Detection

Automatically detects and respects your users' system theme preferences
Instantly switches between light and dark modes
Remembers user choices across sessions

🎨 Fully Customizable Design

Adjust button sizes from compact (20px) to large (60px)
Choose any colors for light/dark backgrounds and icons
Customize border radius for perfectly rounded or sharp edges
Add elegant shadow effects with one click
Fine-tune hover and tap animations for premium feel

🔊 Interactive Audio Experience

Built-in click sound effects to enhance user engagement
Upload any custom sound file you want (MP3, WAV, etc.)
Adjustable volume control from silent to full volume
Professional audio handling with graceful fallbacks

⚡ Advanced Technology

Automatically extracts and applies your site's CSS theme tokens
Smooth spring animations powered by Framer Motion
Global theme state management across your entire site
Optimized for performance with client-side rendering
Works seamlessly with Framer's design system

🎮 Smooth Interactions

Satisfying scale animations on hover and tap
Elegant icon transitions with rotation effects
Instant visual feedback for better user experience
Mobile-optimized touch interactions

🛠️ Easy Setup

Simply drag and drop into your Framer project - no coding required! All customization options are available through Framer's intuitive property panel.

Ready to give your users the perfect viewing experience? This component handles all the technical complexity while giving you complete creative control over the design.

5a:[["$","$L5d",null,{"post":{"id":"0199a300-aa0c-7169-97d6-c6bb18cbf153","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"3fc1a4ca-931c-4fe3-a0d1-7f7c172d1f13","name":"Mickces","slug":"mickces","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/32548/avatar-GYdnfBOaEBE0TLc5S0ZpeT1O2Y8Wwt.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"4j25hoSXT97bcXjCeLrF","resolved":true,"title":"Smart Theme Toggle ","body":"$5e","bodyJson":null,"introduction":"","slug":"smart-theme-toggle","author":{"framerUserId":"3fc1a4ca-931c-4fe3-a0d1-7f7c172d1f13","name":"Mickces","slug":"mickces","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/32548/avatar-GYdnfBOaEBE0TLc5S0ZpeT1O2Y8Wwt.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/4j25hoSXT97bcXjCeLrF/smart-theme-toggle-2Fco3Rgcj6gko4Q3gA16m2nplpjNgI","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-09-26T11:29:04.157Z","updatedAt":"2025-10-02T03:35:19.484Z","publishedAt":"2025-10-02T03:39:13.804Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://themeswitch.framer.ai/","price":"5","paymentUrl":"https://elo.lemonsqueezy.com/buy/99439aa1-69eb-41a3-8b5c-8e38a305adee","workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"UX5A5KqJapaMUHIxYqG2","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-10-02T03:39:13.804Z","updatedAt":"2025-10-02T03:39:13.804Z","reported":false}}],"$L5f"]

Suggested for you