پیش از این نحوه شناسایی حالت شب و روز دستگاه کاربر در انجمن بی تاک تحت عنوان کد CSS: استایل حالت تیره و روشن بر اساس دستگاه کاربر با prefers-color-scheme قرار داده بودیم که می توانستید استایل های موردنظرتان را بر اساس حالت تیره و روشن یا حالت شب و روز دستگاه کاربر تغییر دهید و سایتتان را شخصی سازی کنید. در این تاپیک قصد داریم نحوه شناسایی حالت شب و روز دستگاه کاربر را با دستورات جاوا اسکریپت - JavaScript به شما آموزش دهیم که بتوانیم کدهای خاصی را بر اساس حالت رنگ دستگاه کاربر اجرا کنید. با ما همراه باشید.
شناسایی حالت شب
برای شناسایی حالت شب کافیست کد زیر را در محل موردنظرتان به طور دقیق استفاده کنید:
const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
if (isDarkMode) {
// کدهایی که در حالت شب دستگاه کاربر اجرا می شوند
}
سپس کدهای خود را در محلی که در کد بالا مشخص شده جایگزین کنید.
شناسایی حالت روز
اگر قصد دارید کدهایی را بر اساس حالت روشن یا حالت روز دستگاه کاربر اجرا کنید از این کد استفاده کنید:
const isLightMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches;
if (isLightMode) {
// کدهایی که در حالت روز دستگاه اجرا می شوند
}
