آموزش اضافه کردن حالت شب به سایت
شاید وب سایت های محتوایی را دیده باشید که یک آیکون مخصوص مطالعه در شب ( dark mode ) دارند با کلیک کردن روی آن ظاهر سایت به حالت تیره تبدیل میشود و خواندن متن در شب را آسان تر میکند.
و همچنین با کلیک کردن دوباره روی آن گزینه به حالت روز بازگشته و قالب روشن ( light mode ) سایت فراخوانی میشود. این چیزی نیست که فقط در وب سایت ها باشد بلکه امروز در اکثر اپلیکیشن ها هم مشاهده میشود که حالت روز و شب داخل خود دارند و ممکن است برای سایت های محتوایی که کاربران قراره یک متن نسبتا طولانی را بخوانند بسیار مفید است.
آموزش اضافه کردن حالت دارک مود (حالت روز/شب) به سایت
ممکن است ابتدا تصور کنید که اضافه کردن یک حالت دوگانه رنگی به وب سایت زیاد مهم نیست ولی باید بدانید یکی از کلیدی ترین نکات برای ارتقا رتبه و محبوبیت وب سایت شما است مخصوصا اگر در سایتتان بخش وبلاگ ، اخبار یا نوشته های طولانی دارید که قراره کاربر برای مطالعه ی آنها مدت زمانی را صرف بکنه پس پیاده کردن این امکان به وب سایت شما اعتبار بیشتری خواهد داد.
برای اضافه کردن حالت شب و روز به سایت یا حالت روشن و تیره به سایت
- باید کلاس های css برای حالت شب به فایل css خود اضافه کنید.
- باید با استفاده از جاوا اسکریپت کدهای css حالت تیره یا شب را به صفحه ی خود تزریق کنید.
- در صورت اینکه صفحه ی جاری دارک یا شب است به حالت لایت یا روز تغییر پیدا کند و برعکس ( toggle mode ).
نمونه کد اضافه کردن حالت دارک و لایت به سایت
خب برای نمونه من در سایت codepen امروز کمی کدنویسی کردم و چون قالب مثال ما یکم شکل و شمایل به خودش بگیره من از فریمورک 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
یعنی ریدم به خودت و این چرت و پرت های ناقصی که میزاری
سلام خسته نباشید، ممنون از آموزش خوبتون
فقط یه مشکلی هست وقتی حالت شب رو می زنم توی صفحه اصلی اعمال میشه ولی وقتی داخل مطلب میرم باید دوباره حالت شب رو فعال کنم و برعکس، چطور میشه این مشکل رو حل کرد؟
سلام. ببخشید برای قالب های بلاگفا هم میشه همچین متدی رو انجام داد یا نه؟؟اگه امکان پذیره با چه روشی میشه؟؟