حالت شب و روز / Light و Dark یا تیره و روشن، به استایلی گفته می شود که در اکثر سیستم عامل ها به کاربران این اجازه را می دهد که محیط کار خود را به صورت تیره یا روشن مشاهده کنند. حالت تیره یا شب معمولا با پس زمینه مشکی و رنگ سفید و حالت روشن با پس زمینه سفید و متن مشکی تعریف می شود. در برخی از وب سایت ها نیز شاید دیده باشید که کلیدی برای حالت روز و شب وب سایت تعریف شده است که نیاز به کمی جاوا اسکریپت و کدهای HTML و … است اما در این تاپیک از انجمن بی تاک قصد داریم با یک دستور ساده prefers-color-scheme از سلکتور @media استایل های سایت را بر اساس حالت شب و روز فعلی دستگاه کاربر تغییر دهیم. بر اساس این کد، ما می توانیم استایل هایی را تعیین کنیم تا اگر سیستم عامل کاربر از حالت شب استفاده می کند، آن استایل ها در سایت اعمال شوند.
با این کار نیاز به کدنویسی پیچیده نداریم و به مرورگر اجازه می دهیم حالت شب یا روز سیستم عامل کاربر را بررسی کرده و دستورات مربوط به حالت شب یا روز را روی سایت اعمال کند.
به صورت ساده، این دو دستور به این صورت است:
@media (prefers-color-scheme: light) {
// استایل های مربوط به حالت روز
}
@media (prefers-color-scheme: dark) {
// استایل های مربوط به حالت شب
}
به همین سادگی می توانیم حالت شب یا روز سایت را از سیستم عامل کاربر دریافت کنیم و رنگ بندی یا استایل های مخصوص را اجرا کنیم.
البته نیازی به استفاده از هر دو پارامتر بطور همزمان نیست. شما قالبتان را بر اساس نسخه روز طراحی کنید، سپس برای حالت شب، دستورات مربوط به تغییر رنگ پس زمینه و متن ها را استفاده کنید. به این صورت حجم کدهای استفاده شده بسیار کم خواهد بود.
اگر در دستگاه خودتان (چه موبایل، چه تبلت و چه کامپیوتر شخصی) حالت تیره را در تنظیمات فعال کرده باشید و وارد انجمن بی تاک شوید، سایت را با حالت تیره مشاهده خواهید کرد:
