سبد خرید
حساب کاربری
رایگان ببین!

آموزش طراحی دکمه دارک مود + سورس کد

پخش ویدیو

مــشـــاهـــده آموزش طراحی دکمه دارک مود + سورس کد

در این آموزش یاد میگیرید هر نوع دکمه دارک مود که دوست داشتید رو بدون پلاگین جانبی برای سایت المنتوریتون استفاده کنید و بخش های مختلف سایت رو برای حالت دارک و لایت تنظیم کنید

در این آموزش دو نوع مختلف از دکمه دارک مود آموزش داده شده

سورس کد های آموزش ساخت دارک مود با المنتور

کد جاوا اسکریپت پایه

				
					      <script>
      
      //کد جاوا اسکریپت پایه

          const switchElement = document.querySelector('.switch')

switchElement.addEventListener('click', function () {
  // Hint: Add 'dark' class to body :))

  document.body.classList.toggle('dark')

  if (document.body.className.includes('dark')) {
    localStorage.setItem('theme', 'dark')
  } else {
    localStorage.setItem('theme', 'light')
  }

  // console.log(document.body.className.includes('dark'));  // Boolean
})


window.onload = function () {
  let localStorageTheme = localStorage.getItem('theme')

  if (localStorageTheme === 'dark') {
    document.body.classList.add('dark')
  }

}
</script>

اسکریپت مخصوص uiverse

				
					
<script>
/*اسکریپت مخصوص uiverse*/

const niasswitchElement = document.querySelector('.theme-switch__checkbox')

niasswitchElement.addEventListener('click', function () {
  // Hint: Add 'dark' class to body :))

  document.body.classList.toggle('dark')

  if (document.body.className.includes('dark')) {
    localStorage.setItem('theme', 'dark')
  } else {
    localStorage.setItem('theme', 'light')
  }

  // console.log(document.body.className.includes('dark'));  // Boolean
})


window.onload = function () {
  let localStorageTheme = localStorage.getItem('theme')
  if (localStorageTheme === 'dark') {
    document.body.classList.add('dark')
    document.getElementById('themeSwitch').checked = true;
  }

}
          
      </script>

کد html

				
					<div class="switch">
        <div class="flicker"></div>
        <div class="moon"></div>
      </div>

کد css

				
					.switch {
  width: 80px;
  height: 40px;
  border-radius: 20px;
  background-color: rgb(39, 38, 38);
  position: relative;
}

.flicker {
  width: 30px;
  height: 30px;
  border-radius: 15px;
  background-color: rgb(255, 255, 255);
  position: absolute;
  top: 5px;
  left: 5px;
  transition: 0.3s;
  box-shadow: inset 4px 4px 4px rgb(255, 255, 255),
    inset -4px -4px 4px rgb(195 193 198 / 90%);
}
.moon {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  box-shadow: 4px 4px 0 0 rgb(255, 255, 255);
  position: absolute;
  top: 5px;
  left: 45px;
}
.dark .flicker {
  transform: translateX(40px);
}



.dark {
  background-color: rgb(57, 57, 57);
  transition: 0.3s;
}

.dark > * {
  color: rgb(255, 255, 255);
}

.dark a {
  color: rgb(246, 169, 241);
}


.dark h1, .dark span, .dark i, .dark .singlepostnias, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 , .dark .menu .e-n-menu-title-text.e-link.e-focus{
  color: white!important;
}
.dark .elementor-icon-box-title span , .dark .header-menu-nias span{
    color: #009966!important
}
.dark .niasdark .elementor-widget-container{
    background-color: #282828!important;
}
مقایسه این آموزش با دوره المنتور پیشرفته
تو دوره شرکت کنم ؟
این آموزشو حتماً ببین!

آموزش رایگانی که در این صفحه میبینید نمونه ای از شیوه تدریس و سطح کار کردن با المنتور رو به شما نمایش میده پس قبل از تهیه دوره حتماً این آموزشو ببین

قطعاً دیدن این آموزش دید شمارو نسبت به کار کردن با المنتور عوض میکنه و سطح کاری شمارو افزایش میده

  • رایگان
  • دسترسی دائمی
دیگر آموزش های رایگان
دوره المنتور پیشرفته
3.000.000 تومان
  • پشتیبانی دائمی
  • دسترسی به تمام فایل های آموزش ها
  • دسترسی به هدایا(پلاگین های اورجینال با آپدیت دائمی)
  • گارانتی بازگشت وجه 30 روزه
  • پرداخت یکباره
  • آپدیت دائمی و اضافه شدن جلسات جدید
شرکت در دوره پیشرفته

در مورد این آموزش سوالی داری؟

اینجا سوالتو مطرح کن

2 دیدگاه برای آموزش طراحی دکمه دارک مود + سورس کد

  1. اکبر غلام‌پور –

    سلام ممنون از آموزش خوبتون
    لطفا بگین در صورتی که دکمه دارک مود فقط برای صفحه اول سایتم قرار بدم و کاربر اونو فعال کنه آیا در صفحات دیگه سایت حالت دارک مود ذخیره خواهد بود ؟

    • Nias –

      اگه شرط نمایش کد js رو در “تمام سایت” انتخاب کنید بله ذخیره میمونه

  2. محمد –

    سلام من تمام کار های داخل ویدیو رو رفتم ولی رنگ تغییر نکرد

    • Nias –

      سلام احنمالاً اولوبت استایل قالبتون اجازه نمیده،
      به انتهای کد css که برای رنگ قرار دادین !important اضافه کنید که بالاترین اولویتو داشته باشه و اعمال بشه

دیدگاه خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

کاربر عزیز مرورگر شما یک مرورگر رسمی نیست و حاوی برخی فایل های قدیمی است لطفاً برای مشاهده بدون مشکل سایت و استفاده از امکانات از مرورگر هایی همچون کروم استفاده نمایید