سورس کد دارک مود کردن


فعال کردن حالت **دارک مود** (Dark Mode)
برای سایت‌ها در سال‌های اخیر محبوبیت زیادی پیدا کرده است. این ویژگی، رنگ‌بندی صفحه را به یک ترکیب تیره و کم‌نور تغییر می‌دهد و فواید متعددی برای کاربران و تجربه کلی سایت دارد. در ادامه به مهم‌ترین فواید دارک مود برای سایت‌ها اشاره می‌کنیم:
### 1. **کاهش فشار به چشم‌ها** یکی از بزرگترین مزایای دارک مود این است که فشار بر چشم‌ها را، مخصوصاً در محیط‌های کم‌نور یا هنگام استفاده طولانی‌مدت، کاهش می‌دهد. پس‌زمینه‌های تیره و متن‌های روشن به چشم‌ها اجازه می‌دهند تا به راحتی در طولانی مدت اطلاعات را پردازش کنند، به‌ویژه در شرایط نوری پایین.
### 2. **افزایش عمر باتری دستگاه‌ها** در نمایشگرهای OLED و AMOLED، پیکسل‌های تیره انرژی کمتری مصرف می‌کنند. دارک مود می‌تواند مصرف باتری را در دستگاه‌های موبایل و لپ‌تاپ‌هایی با این نوع نمایشگرها به‌طور قابل توجهی کاهش دهد و طول عمر باتری را افزایش دهد.
### 3. **زیبایی و جذابیت بصری** دارک مود یک تجربه مدرن و حرفه‌ای از نظر زیبایی بصری ایجاد می‌کند. برای برخی از کاربران، طراحی‌های تیره جذاب‌تر و زیباتر به نظر می‌رسد. به همین دلیل بسیاری از سایت‌های مدرن و برنامه‌ها از این ویژگی بهره می‌برند.
### 4. **جذب کاربران شب‌کار یا شب‌زنده‌دار** بسیاری از کاربرانی که در شب یا محیط‌های تاریک به سایت‌ها دسترسی دارند، دارک مود را ترجیح می‌دهند. این ویژگی برای مطالعه و کار شبانه بسیار مناسب است، زیرا از تابش شدید نور جلوگیری می‌کند و به یک تجربه کاربری راحت‌تر کمک می‌کند.
سورس کد دارک مود کردن
### 5. **کاهش انتشار نور آبی** نور آبی که از نمایشگرها ساطع می‌شود، می‌تواند باعث مشکلات خواب شود. دارک مود با کاهش نور آبی، کمک می‌کند تا اثرات منفی بر خواب و سلامت کاربران کاهش یابد. این امر به خصوص در هنگام استفاده از سایت‌ها در شب بسیار مفید است.
### 6. **تجربه کاربری قابل تنظیم** ارائه دارک مود به عنوان یک گزینه، به کاربران اجازه می‌دهد که تجربه وب خود را شخصی‌سازی کنند. کاربران می‌توانند بین دارک مود و لایت مود (حالت روشن) انتخاب کنند، که این یک تجربه کاربری منعطف‌تر و بهتر ارائه می‌دهد.
### 7. **جلوگیری از خستگی ذهنی** برای کاربرانی که زمان زیادی را به خواندن محتوا یا کار با داده‌های مختلف در سایت‌ها اختصاص می‌دهند، دارک مود می‌تواند باعث کاهش خستگی ذهنی شود. تغییر رنگ پس‌زمینه به یک رنگ ملایم‌تر به مغز فرصت استراحت بیشتری می‌دهد.
### 8. **کمک به دسترسی بهتر** برای برخی کاربران که مشکلات بینایی یا حساسیت به نور دارند، حالت دارک مود یک راه حل مناسب است. این ویژگی می‌تواند به این کاربران کمک کند تا با کمتری مشکلات سایت‌ها را مرور کنند.
### نتیجه‌گیری: افزودن حالت دارک مود به سایت‌ها یک انتخاب هوشمندانه است که می‌تواند تجربه کاربری را بهبود ببخشد، سلامت چشم و خواب کاربران را ارتقا دهد و حتی عمر باتری دستگاه‌های آن‌ها را افزایش دهد. دارک مود به نوعی نیازها و ترجیحات متنوع کاربران را پوشش می‌دهد و باعث بهبود جذابیت بصری سایت می‌شود.

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dark Mode Toggle</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="toggle-container"> <label class="switch"> <input type="checkbox" id="darkModeToggle" onclick="toggleDarkMode()"> <span class="slider"></span> </label> <span class="label-text">Dark Mode</span> </div> <h1>Welcome to My Website</h1> <p>This is an example paragraph to demonstrate dark mode functionality.</p> <script src="script.js"></script> </body> </html>

CSS

/* styles.css */ /* General body styles */ body { background-color: white; color: black; font-family: Arial, sans-serif; transition: background-color 0.5s ease, color 0.5s ease; } /* Toggle Switch */ .toggle-container { display: flex; align-items: center; margin: 20px; } .label-text { font-size: 1.5rem; margin-left: 10px; } /* The switch - the box around the slider */ .switch { position: relative; display: inline-block; width: 60px; height: 30px; } /* Hide default HTML checkbox */ .switch input { opacity: 0; width: 0; height: 0; } /* The slider */ .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: 0.4s; border-radius: 30px; } /* Sun and moon icons */ .slider:before { position: absolute; content: "\2600"; /* Unicode for sun */ height: 24px; width: 24px; left: 3px; bottom: 3px; background-color: white; transition: 0.4s; border-radius: 50%; font-size: 20px; text-align: center; line-height: 24px; } /* Toggle the background and icons when checked */ input:checked + .slider { background-color: #444; } input:checked + .slider:before { transform: translateX(30px); content: "\263D"; /* Unicode for moon */ } /* Dark mode styles */ body.dark-mode { background-color: #121212; color: white; }

JavaScript

// script.js function toggleDarkMode() { // Toggle the 'dark-mode' class on the body element document.body.classList.toggle('dark-mode'); }

اشتراک گذاری