تشخیص تم رنگ سیستم در جاوا اسکریپت

چند روز پیش در این فکر بودم که چگونه با استفاده از جاوا اسکریپت بفهمم که تم سیستم در وب تیره است یا روشن و راهی برای تشخیص آن پیدا کردم. در این مقاله، پیاده سازی چک کردن تم سیستم رو با شما به اشتراک میگذارم.

• من از متد ()matchMedia ارائه شده توسط رابط window مرورگر استفاده خواهم کرد.
• متد matchMedia یک mediaQueryString به عنوان پارامتر دریافت میکند و یک شی MediaQueryList را برمی گرداند.
• آبجکت MediaQueryList دارای پراپرتی به نام matches از نوع داده Boolean خواهد بود.

کد

if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    // Dark Mode
}

از prefers-color-scheme که یک CSS media feature است، برای تشخیص تم رنگ سیستم استفاده می شود.کاربر ممکنه، اولویت تم رو از طریق تنظیمات سیستم عامل (حالت روشن یا تاریک) تغییر دهد. همچنین prefers-color-scheme در تمامی مرورگر های موبایل و وب پشتیبانی می شود.

ما همچنین می‌توانیم یک listener داشته باشیم، اگر کاربر تم را در این بین تغییر دهد.

window
   .matchMedia(&quot(prefers-color-scheme: dark)&quot)
   .addEventListener(&quotchange&quot, (event) => {
         const theme = event.matches ? &quotdark&quot : &quotlight&quot
    });

اگر از روش دیگری برای تشخیص تم سیستم در وب اطلاع دارید، در کامنت به من اطلاع دهید.

ممنونم که وقت گذاشتید و مطالعه کردید. اگر از این مقاله لذت بردید یا آن را مفید دیدید، با لایک کردن اون به دیده شدنش کمک کنید. برای ارتباط با من میتوانید از طریق لینکدین با من در تماس باشید.