قراره روش بهینه و اصلی راه‌اندازی دارک‌تم در صفحات وب رو بگیم.
اگه نمی‌دونید بهترین راه برای ایجاد دارک‌تم چیه، با من همراه باشید.
منظور از بهترین راه و راه استاندارد برای پیاده‌سازی دارک‌تم یا حالت‌شب اینه که بتونیم به راحتی و بدون دردسر این قابلیت رو به خوبی و به طور بی‌نقص در وب پیاده کنیم.
دارک‌تم چیست؟
دارک‌تم(dark theme)، حالت تاریک، حالت شب و دارک مود(dark mode) همه به یک مفهوم اشاره دارن.
حالت شب عبارت هست از حالتی که در اون غالب المان‌ها و کامپوننت‌های رابط کاربری به رنگ‌های تیره تغییر رنگ می‌دن.
این حالت و قابلیت بیشتر برای متناسب کردن رابط‌کاربری در استفاده شب‌هنگام از اپلیکیشن و نرم‌افزار اضافه میشه.
امروزه تقریبا نه تنها سیستم‌عامل‌ها بلکه غالب نرم‌افزار‌ها و اپلیکیشن‌های دسک‌تاپی و تلفن‌همراه از این قابلیت بهره می‌برن.
لذا پیاده‌سازی همچین چیزی در اپلیکیشن، امروزه جزء ضرورت‌های رابط‌کاربری هست.
ما اینجا به نحوه پیاده‌سازی این مورد در وب به وسیله css و js می‌پردازیم.
افزودن قابلیت دارک‌مود با css و js
در اینجا روش پیاده‌سازی ساده و بهینه این قابلیت رو شرح می‌دیم.
خب احتمالا می‌دونید که با js به راحتی می‌تونیم یه class به یه المنت در html اختصاص بدیم و کار راحتی هست.
ما قراره از همین روش برای تغییر مود یا حالت تم استفاده کنیم.
|
1 |
document.body.classList.add("dark"); |
خب؛ در مثال بالا ما class با عنوان dark رو به المنت body اضافه کردیم.
و مشابه کد زیر می‌تونیم این کلاس رو از بادی حذف کنیم.
|
1 |
document.body.classList.remove("dark"); |
طبیعتا این کار، سایر استایل‌های نه تنها body بلکه هیچ‌جای دیگه‌ای از صفحه وب رو تغییر نمی‌ده.
اما اگه ما در css خودمون برای dark استایل خاصی تعریف کنیم چی؟
بیاید اول فرض بگیریم که ما در body صفحه وب خودمون یه المنت div با کلاس post داریم.
بعد توی css می‌تونیم اینطور تعریف کنیم استایل body رو:
|
1 2 3 4 |
body{ background-color: #F1F1F1; color: #222; } |
صرفا گفتیم که رنگ پس‌زمینه body سفید باشه و رنگ متون درونش مشکی.
حالا فرض کنید استایل زیر رو هم به css اضافه کنیم:
|
1 2 3 4 |
body.dark{ background-color: #1E1E1E; color: #eee; } |
در اینجا ما تعریف کردیم که المنت body در صورتی دارای کلاس dark بود، پس‌زمینش تیره بشه و متن درونش روشن بشه.
خب این یعنی اگه ما کلاس dark رو به body اضافه کنیم، این اتفاق می‌افته و بادی وارد حالت دارک‌تم میشه و اگه این کلاس رو ازش بگیریم، مجددا به حالت لایت‌تم(حالت روز یا روشن) برمی‌گرده.
اما گفتیم یه المنت div با کلاس post هم داریم، اون رو چطور متاثر از این رخداد کنیم؟
می‌دونیم که وقتی یه عنصر والد استایلی مثل color: red می‌گیره، روی تمام تمام فرزندانش هم تاثیر می‌گذاره و رنگ متون عناصر زیر‌مجموعه اون هم قرمز میشه.
پس وقتی برای بادی یه رنگ متن خاص رو تعیین می‌کنیم، برای عناصر زیر مجموعش هم اعمال میشه. اما این درباره رنگ پس‌زمینه صادق نیست.
چون هر کادر و div یه رنگ پس‌زمینه منحصر به خودش داره.
پس طبیعتا دارای رنگ پس‌زمینه متفاوتی خواهد‌بود.
فرض کنید که استایل اصلی post این شکلی باشه:
|
1 2 3 |
.post{ background: #fff; } |
این یعنی در حالت لایت، این شکلی هست.
و برای اینکه براش دارک‌مود هم تعریف کنیم، این استایل رو هم اضافه می‌کنیم:
|
1 2 3 |
body.dark .post{ background-color: #282C34; } |
این استایل تعریف می‌کنه که اگه والد post که قطعا بادی هست(بدون احتساب عناصر والد واسطه)، دارای کلاس dark بود، رنگ پس‌زمینه post به تیره تغییر می‌کنه.
به همین راحتی می‌تونید دارک‌استایل برای همه عناصر و المنت‌ها و کامپوننت‌ها تعریف کنید.
این یه روش ساده و ابتدایی هست، که در کم‌ترین زمان ممکن قابل پیاده‌سازی هست؛ اما اینجا کمی اون رو توضیح دادیم تا برای افراد مبتدی، نحوه عملکرد این روش مشخص بشه.
امیدوارم مفید بوده باشه ✨
اگه سوالی دارید یا نظری دارید، حتما زیر این پست مطرح کنید؛ پاسخ می‌دم!