تخفیف تابستانی سال ۱۳۹۹ تاپایان: دوشنبه ۳۱ شهریور ۱۳۹۹
بزن بریم فروشگاه

تبلیغات : محصولاتی که ممکن است خوشتان بیاید

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

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

: ۲۴۵۹ بار
نوشته شده : 11 ماه پیش
موضوعات :‌ - طراحی وب

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

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

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

 

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

 

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

 

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

 

  1. باید کلاس های css برای حالت شب به فایل css خود اضافه کنید
  2. باید با استفاده از جاوا اسکریپت کدهای css حالت تیره یا شب را به صفحه ی خود تزریق کنید
  3. در صورت اینکه صفحه ی جاری تیره یا شب است به حالت روشن یا روز تغییر پیدا کند و برعکس ( 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

 

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

 


محصولات برگزیده مناسب شما

پایان 👍
برای استفاده ی دیگران و حمایت از ما در جامعه های زیر به اشتراک بگذارید

مهندس عباس نیک زاد


برای نوشتن نظر وارد شوید ورود
یا به عنوان یک میهمان نظر خود را بنویسید :
    1. اگر سوال شما طولانی است و نیاز به پشتیبانی خوبی دارد در پروفایل خود تیکت باز کنید تیم پشتیبان ما پاسخ میدهد
    2. سعی کنید نظر خود را بیش از چند جمله بنویسید
    3. نظرات شامل توهین و تهمت و نامرتبط تائید نخواهد شد

برای دریافت جدید ترین آموزش ها ما را در فضای مجازی دنبال کنید
دوره ی آموزش پروژه محور ساخت کافه بازار دوره ی آموزش پروژه محور ساخت فروشگاه دیجیکالا آموزش لاراول دوره ی آموزش ویو جی اس
x
تبلیغات از درون سایت خودمون :)
X
دوره های پیشنهادی برای شما