سورس دکمه تغییر تم تاریک و روشن با افکت Ripple | HTML, CSS, JS

معرفی سورس

یک دکمه Toggle (سوئیچ) شیک و مدرن برای تغییر تم وبسایت از روشن به تاریک و بالعکس. این سورس با HTML، CSS و JavaScript خالص نوشته شده و دارای یک افکت ripple (موج) بسیار جذاب است که هنگام کلیک روی دکمه، به‌صورت دایره‌ای از مرکز صفحه گسترش می‌یابد و تم را تغییر می‌دهد. مناسب برای اضافه کردن قابلیت Dark Mode به هر پروژه وب.

🎯 ویژگی‌ها

• ✅ تغییر تم بین حالت روشن (Light) و تاریک (Dark)
• ✅ افکت ripple دایره‌ای هنگام کلیک – تجربه کاربری فوق‌العاده
• ✅ طراحی مینیمال و سازگار با تمام مرورگرها
• ✅ کدنویسی تمیز و خوانا – مناسب برای یادگیری
• ✅ بدون نیاز به هیچ کتابخانه خارجی
• ✅ واکنش‌گرا و قابل استفاده در موبایل و دسکتاپ
• ✅ سه فایل مجزا: HTML, CSS, JS

🎨 طراحی ظاهری

دکمه سوئیچ با ظاهری گرد و مدرن طراحی شده است. در حالت روشن پس‌زمینه سفید و در حالت تاریک پس‌زمینه مشکی (#121212) می‌شود. دایره ripple از مرکز صفحه شروع شده و با انیمیشنی نرم تمام صفحه را می‌پوشاند، سپس تم تغییر می‌کند. جزئیات سایه‌ها و رنگ‌ها با دقت تنظیم شده‌اند.

📦 محتویات سورس

• index.html – ساختار دکمه و صفحه
• style.css – استایل‌دهی کامل تم، دکمه و افکت ripple
• script.js – مدیریت رویداد کلیک و انیمیشن ripple

🚀 نحوه استفاده

1. هر سه فایل را در یک پوشه قرار دهید.
2. فایل index.html را با مرورگر باز کنید.
3. روی دکمه کلیک کنید تا تم تغییر کند و افکت ripple را ببینید.

برای استفاده در پروژه خود کافی است کدهای CSS و JS را به پروژه اضافه کرده و ساختار HTML را در محل دلخواه قرار دهید.

📋 مشخصات فنی

• تکنولوژی: HTML5, CSS3, JavaScript (Vanilla)
• طراحی: واکنش‌گرا (Responsive)
• وابستگی: بدون کتابخانه خارجی
• تعداد فایل: ۳
• حجم کلی: کمتر از ۳ کیلوبایت
• افکت: Ripple + Transition

🎁 این سورس برای چه کسانی مناسب است؟

• توسعه‌دهندگان وب که می‌خواهند قابلیت Dark Mode را به سایت خود اضافه کنند
• افراد مبتدی که می‌خواهند با رویدادهای JavaScript و انیمیشن‌های CSS کار کنند
• طراحان UI که به دنبال یک کامپوننت Toggle آماده و شکیل هستند
• هرکسی که یک سورس کوچک، کاربردی و جذاب برای پروژه خود نیاز دارد

💡 چرا این سورس؟

• 🔹 افکت ripple منحصربه‌فرد و جذاب
• 🔹 کد کاملاً تمیز و خوانا
• 🔹 بدون هیچ کتابخانه اضافی – سریع و سبک
• 🔹 نصب و استفاده در کمتر از ۱ دقیقه
• 🔹 قابل شخصی‌سازی کامل (رنگ تم، سرعت انیمیشن و...)
• 🔹 مناسب برای رزومه و پروژه‌های نمونه