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

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

جمعه, ۲۵ بهمن ۱۳۹۸، ۰۲:۳۲ ق.ظ

شاید وب سایت های محتوایی را دیده باشید که یک آیکون مخصوص مطالعه در شب دارند با کلیک کردن روی آن ظاهر سایت به حالت تیره تبدیل میشود و خواندن متن در شب را آسان تر میکند.

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

این چیزی نیست که فقط در وب سایت ها باشد بلکه امروز در اکثر اپلیکیشن ها هم مشاهده میشود که حالت روز و شب داخل خود دارند و ممکن است برای سایت های محتوایی که کاربران قراره یک متن نسبتا طولانی را بخوانند بسیار مفید است .

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

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

برای اضافه کردن حالت شب و روز به سایت یا حالت روشن و تیره به سایت

باید کلاس های css برای حالت شب به فایل css خود اضافه کنید
باید با استفاده از جاوا اسکریپت کدهای css حالت تیره یا شب را به صفحه ی خود تزریق کنید
در صورت اینکه صفحه ی جاری تیره یا شب است به حالت روشن یا روز تغییر پیدا کند و برعکس ( toggle mode )

نمونه کد اضافه کردن حالت شب و روز به وب سایت

خب برای نمونه من در سایت کدپن امروز کمی کدنویسی کردم و چون قالب مثال ما یکم شکل و شمایل به خودش بگیره من از bulma استفاده کردم البته bulma فقط برای اینه که طرح قالبمون یکم شیک باشه وگرنه نیازی بهش نیست .

خب بعد از اضافه کردن bulma چند تا دکمه ی و متن و نوتیفیکشن و اینپوت قرار دادم که کدهاش در بخش HTML به شکل زیره :‌

<body id="body">
  <h1 class="title">حالت روز و شب سایت</h1>
   کافیه رو این دکمه کلیک کنید
  <a class="button is-danger"
     name="dark_light" onclick="toggleDarkLight()" >شب / روز</a>
  <hr>
  
  <a class="button is-primary">button </a>
  <a class="button is-success">button</a>
  <a class="button is-danger">button</a>
  <a class="button is-warning">button</a>
  <a class="button is-link">button</a>
  <hr>
 <div class="notification is-primary">
  primary notificaiton
  </div>
   <div class="notification is-danger">
  danger notificaiton
  </div>
   <div class="notification is-success">
  success notificaiton
  </div>
   <div class="notification is-link">
  link notificaiton
  </div>
  
<input type="text" placeholder="enter name" class="input">
</body>

در کدهای بالا بجز بقیه موارد که مهم نیستند یک قسمت مهمه و اونم تگ a هست که خاصیت name اون dark_light است این دقیقا همون دکمه است که باید رخداد تغییر تم روشن به تیره و یا تیره به روشن را هنگام کلیک شدنش انجام بدیم

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

کدهای زیر را نگاه کنید تا توضیح بدیم ؛

function toggleDarkLight() {
  var body = document.getElementById("body");
  var currentClass = body.className;
  body.className = currentClass == "dark-mode" ? "light-mode" : "dark-mode";
}

در کدهای بالا ما اومدیم یک تابع به نام toggleDarkLight تعریف کردیم که کارش تغییر قالب تیره به روشن و برعکس است .

بعد اومدیم کل body یعنی کل قالب را گرفتیم هر چیزی که در صفحه است .

بعد یک متغیر به نام currentClass برای اینکه مشخص کنیم کلاسی که الان ازش استفاده میکنیم برای حالت تیره است یا روشن تعریف کردیم

و سپس گفتیم اگر نام کلاس ما dark-mode بود به light-mode تغییر بده و اگر dark-mode نبود به dark-mode تغییرش بده

یعنی بررسی میکنه میبینه که اگر کلاس استفاده شده dark-mode بود اون رو light-mode میکنه و برعکس

خب حالا وقت این رسیده که از کلاس های dark-mode و light-mode در بخش css استفاده کنیم .

body
{
  direction:rtl;
  padding:10px;
}
body.dark-mode {
	 background-color: #111;
	 color: #eee;
}
 body.dark-mode a {
	 color: #111;
}
 body.dark-mode button {
	 background-color: #eee;
	 color: #111;
}
 body.light-mode {
	 background-color: #eee;
	 color: #111;
}
 body.light-mode a {
	 color: #111;
}
 body.light-mode button {
	 background-color: #111;
	 color: #eee;
}
body.dark-mode .button {
  background-color:grey !important;
  color:#000 !important;
}
body.dark-mode .notification {
  background-color:grey !important;
  color:#fff !important;
}
body.dark-mode .title {
  color:#fff !important;
}
body.dark-mode .input {
   background-color:grey !important;
  color:#fff !important;
}

در کدهای بالا از پرچم !important به این خاطر استفاده شده که روی تمام کدهای css که از قبل وجود داشت اعمال بشه

در پروژه ی ما هر کلاسی که وجود داشت اگر بخوهیم کدنویسی dark-mode یا قالب تیره براش انجام بدیم مشابه کد زیر انجام میدیم :

body.dark-mode نام کلاس یا ایدی یا تگ  {
   کدهای سی اس اس برای زمان انتخاب قالب تیره

}

و برعکس برای زمانی که قالب روی حالت روشن یا روز است از کد زیر میتوانیم استفاده کنیم :‌

body.light-mode نام کلاس یا ایدی یا تگ  {
   کدهای سی اس اس برای زمان انتخاب قالب تیره

}

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

https://codepen.io/abasnikzad/pen/NWWvEWP

۹۸/۱۱/۲۵

نفس کریمی زاده

بهترین منابع آموزشی برنامه نویسی فارسی

بهترین منابع آموزشی برنامه نویسی فارسی

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