تابع Light-Dark در CSS: انطباق خودکار تم برای وب جهانی

در دنیای متصل امروزی، وب‌سایت‌ها باید برای کاربران با پیشینه‌ها و ترجیحات گوناگون، قابل دسترس و از نظر بصری جذاب باشند. یکی از مؤثرترین راه‌ها برای دستیابی به این هدف، از طریق انطباق خودکار تم، به‌ویژه ارائه تم‌های روشن و تاریک است که بر اساس تنظیمات سیستم کاربر تنظیم می‌شوند. این پست وبلاگ شما را در پیاده‌سازی این قابلیت با استفاده از CSS media queries و خصوصیات سفارشی راهنمایی می‌کند و تجربه‌ای یکپارچه و راحت را برای مخاطبان بین‌المللی شما تضمین می‌کند.

چرا تم‌های خودکار روشن و تاریک را پیاده‌سازی کنیم؟

دلایل قانع‌کننده متعددی برای گنجاندن انطباق خودکار تم در پروژه‌های وب شما وجود دارد:

• تجربه کاربری بهبودیافته: کاربران اغلب ترجیح قوی برای تم‌های روشن یا تاریک دارند. احترام به تنظیمات سیستم آن‌ها به آن‌ها اجازه می‌دهد تا وب‌سایت شما را به روشی طبیعی و راحت مرور کنند. این امر به‌ویژه برای کاربرانی که ساعات طولانی را در مقابل صفحه نمایش می‌گذرانند مهم است، زیرا تم‌های تاریک می‌توانند خستگی چشم را در محیط‌های کم‌نور کاهش دهند.
• دسترسی‌پذیری بهتر: تم‌های روشن و تاریک می‌توانند به طور قابل توجهی دسترسی‌پذیری را برای کاربران با اختلالات بینایی بهبود بخشند. حالت‌های با کنتراست بالا می‌توانند خواندن متن را آسان‌تر کنند، در حالی که تم‌های تاریک می‌توانند تابش خیره‌کننده را کاهش داده و خوانایی را برای کاربران حساس به نور بهبود بخشند.
• طراحی وب مدرن: پیاده‌سازی تم‌های روشن و تاریک نشان‌دهنده تعهد به اصول طراحی وب مدرن و کاربرمحوری است. این نشان می‌دهد که شما به ارائه یک تجربه صیقلی و سازگار اهمیت می‌دهید.
• کاهش خستگی چشم: این موضوع به‌ویژه برای کاربران در مناطقی که ساعات کاری طولانی در مقابل کامپیوتر دارند (مانند بسیاری از کشورهای آسیایی) حیاتی است. تم تاریک فشار روی چشمان آن‌ها را کاهش می‌دهد.
• صرفه‌جویی در عمر باتری: در دستگاه‌هایی با صفحه نمایش OLED، تم‌های تاریک می‌توانند با کاهش میزان نور ساطع شده، در مصرف باتری صرفه‌جویی کنند. این امر برای کاربران در سراسر جهان، به‌ویژه کسانی که از دستگاه‌های تلفن همراه با ظرفیت باتری محدود استفاده می‌کنند، مرتبط است.

چگونه انطباق خودکار تم را با CSS پیاده‌سازی کنیم

هسته اصلی انطباق خودکار تم در مدیا کوئری prefers-color-scheme نهفته است. این مدیا کوئری CSS به شما امکان می‌دهد تا طرح رنگی ترجیحی کاربر (روشن یا تاریک) را تشخیص داده و استایل‌های مربوطه را اعمال کنید.

مرحله ۱: تعریف خصوصیات سفارشی (متغیرهای CSS)

با تعریف خصوصیات سفارشی (متغیرهای CSS) برای ذخیره مقادیر رنگ برای تم‌های روشن و تاریک خود شروع کنید. این کار تغییر بین تم‌ها را با به‌روزرسانی ساده مقادیر متغیرها آسان می‌کند.

:root {
  --background-color: #ffffff; /* پس‌زمینه تم روشن */
  --text-color: #000000; /* متن تم روشن */
  --link-color: #007bff; /* لینک تم روشن */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #121212; /* پس‌زمینه تم تاریک */
    --text-color: #ffffff; /* متن تم تاریک */
    --link-color: #66b3ff; /* لینک تم تاریک */
    --button-background-color: #333;
    --button-text-color: #fff;
  }
}

در این مثال، ما متغیرهایی برای رنگ پس‌زمینه، رنگ متن، رنگ لینک و رنگ‌های دکمه تعریف می‌کنیم. انتخابگر :root این متغیرها را به کل سند اعمال می‌کند. سپس مدیا کوئری @media (prefers-color-scheme: dark) این متغیرها را با مقادیر تم تاریک بازنویسی می‌کند زمانی که کاربر سیستم خود را روی حالت تاریک تنظیم کرده باشد.

مرحله ۲: اعمال خصوصیات سفارشی به استایل‌های خود

در مرحله بعد، این خصوصیات سفارشی را به استایل‌های CSS خود اعمال کنید تا ظاهر عناصر وب‌سایت خود را کنترل کنید.

body {
  background-color: var(--background-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s; /* انتقال نرم */
}

a {
  color: var(--link-color);
}

button {
  background-color: var(--button-background-color);
  color: var(--button-text-color);
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

در اینجا، ما از تابع var() برای دسترسی به مقادیر خصوصیات سفارشی خود استفاده می‌کنیم. همچنین یک خاصیت transition به عنصر body اضافه کرده‌ایم تا یک انتقال نرم بین تم‌ها ایجاد کنیم.

مرحله ۳: تست و بهینه‌سازی

پیاده‌سازی خود را به طور کامل در مرورگرها و سیستم‌عامل‌های مختلف آزمایش کنید. مرورگرهای مدرن مانند Chrome، Firefox، Safari و Edge به طور کامل از مدیا کوئری prefers-color-scheme پشتیبانی می‌کنند. می‌توانید بین حالت‌های روشن و تاریک در تنظیمات سیستم‌عامل خود جابجا شوید تا تغییرات را در وب‌سایت خود مشاهده کنید.

تکنیک‌ها و ملاحظات پیشرفته

ارائه یک سوئیچ تم دستی

در حالی که انطباق خودکار تم یک نقطه شروع عالی است، برخی از کاربران ممکن است ترجیح دهند تنظیمات سیستم خود را به صورت دستی لغو کنند. شما می‌توانید یک سوئیچ تم دستی با استفاده از جاوا اسکریپت و حافظه محلی (local storage) ارائه دهید.

HTML:

<button id="theme-toggle">تغییر تم</button>

JavaScript:

const themeToggle = document.getElementById('theme-toggle');
const body = document.body;

let currentTheme = localStorage.getItem('theme') || 'auto'; // پیش‌فرض روی خودکار

function setTheme(theme) {
  if (theme === 'dark') {
    body.classList.add('dark-theme');
    body.classList.remove('light-theme');
  } else if (theme === 'light') {
    body.classList.add('light-theme');
    body.classList.remove('dark-theme');
  } else {
    body.classList.remove('light-theme', 'dark-theme');
  }
  localStorage.setItem('theme', theme);
  currentTheme = theme;
}

// اعمال تم اولیه در بارگذاری صفحه
if (currentTheme === 'dark') {
  setTheme('dark');
} else if (currentTheme === 'light') {
  setTheme('light');
} else {
  // اگر روی خودکار تنظیم شده باشد، به prefers-color-scheme اجازه دهید تصمیم بگیرد
}


themeToggle.addEventListener('click', () => {
    if (currentTheme === 'auto'){
        setTheme('light');
    } else if (currentTheme === 'light') {
        setTheme('dark');
    } else {
        setTheme('auto');
    }
});

CSS: CSS زیر را به همراه CSS قبلی اضافه کنید. به بازنویسی دستی توجه کنید:

body.light-theme {
  --background-color: #ffffff; /* پس‌زمینه تم روشن */
  --text-color: #000000; /* متن تم روشن */
  --link-color: #007bff; /* لینک تم روشن */
  --button-background-color: #f0f0f0;
  --button-text-color: #000;
}

body.dark-theme {
  --background-color: #121212; /* پس‌زمینه تم تاریک */
  --text-color: #ffffff; /* متن تم تاریک */
  --link-color: #66b3ff; /* لینک تم تاریک */
  --button-background-color: #333;
  --button-text-color: #fff;
}

این قطعه کد یک دکمه اضافه می‌کند که به کاربران اجازه می‌دهد بین تم‌های روشن، تاریک و خودکار جابجا شوند. تم انتخاب شده در حافظه محلی ذخیره می‌شود تا در بارگذاری‌های بعدی صفحه باقی بماند.

کار با تصاویر و SVGها

ممکن است برخی از تصاویر و SVGها در هر دو تم روشن و تاریک خوب به نظر نرسند. می‌توانید از مدیا کوئری‌های CSS برای نمایش شرطی نسخه‌های مختلف این دارایی‌ها استفاده کنید.

img.light-mode {
  display: block;
}

img.dark-mode {
  display: none;
}

@media (prefers-color-scheme: dark) {
  img.light-mode {
    display: none;
  }

  img.dark-mode {
    display: block;
  }
}

این قطعه کد یک تصویر (با کلاس light-mode) را در حالت روشن و یک تصویر متفاوت (با کلاس dark-mode) را در حالت تاریک نشان می‌دهد.

ملاحظات پالت رنگ برای مخاطبان بین‌المللی

هنگام انتخاب پالت‌های رنگی برای تم‌های روشن و تاریک خود، به تداعی‌های فرهنگی و ملاحظات دسترسی‌پذیری توجه داشته باشید. در اینجا چند دستورالعمل کلی آورده شده است:

• کنتراست: از کنتراست کافی بین رنگ متن و پس‌زمینه برای مطابقت با استانداردهای دسترسی‌پذیری (WCAG) اطمینان حاصل کنید. از ابزارهایی مانند WebAIM's Contrast Checker برای تأیید نسبت کنتراست استفاده کنید.
• کوررنگی: تأثیر انتخاب رنگ خود را بر روی کاربران کوررنگ در نظر بگیرید. از ابزارهایی مانند Color Blindness Simulator برای پیش‌نمایش وب‌سایت خود همانطور که توسط افراد با انواع مختلف کوررنگی دیده می‌شود، استفاده کنید.
• تداعی‌های فرهنگی: آگاه باشید که رنگ‌ها می‌توانند در نقاط مختلف جهان تداعی‌های فرهنگی متفاوتی داشته باشند. به عنوان مثال، رنگ سفید در برخی فرهنگ‌ها اغلب با پاکی و سوگواری همراه است، در حالی که رنگ قرمز در برخی دیگر با خوش‌شانسی و رفاه همراه است. در مورد تداعی‌های فرهنگی تحقیق کنید تا از ایجاد توهین یا سردرگمی ناخواسته جلوگیری کنید.
• پالت‌های خنثی: در صورت شک، پالت‌های رنگی خنثی را انتخاب کنید که کمتر احتمال دارد به اشتباه تفسیر شوند یا توهین‌آمیز باشند. خاکستری‌ها، بژها و رنگ‌های مات می‌توانند یک انتخاب امن و همه‌کاره باشند.
• تست کاربر: با گروه متنوعی از شرکت‌کنندگان، تست کاربر انجام دهید تا بازخورد در مورد انتخاب رنگ‌های خود را جمع‌آوری کرده و اطمینان حاصل کنید که توسط مخاطبان هدف شما به طور مثبت درک می‌شوند.
• بومی‌سازی: در صورت امکان، استفاده از پالت‌های رنگی بومی‌سازی شده را که متناسب با ترجیحات فرهنگی مناطق یا کشورهای خاص طراحی شده‌اند، در نظر بگیرید. این می‌تواند شامل تنظیم رنگ‌ها، اشباع و روشنایی برای هماهنگی با سلیقه‌های محلی باشد.

ملاحظات عملکردی

در حالی که پیاده‌سازی انطباق خودکار تم نسبتاً ساده است، مهم است که تأثیر بالقوه آن بر عملکرد را در نظر بگیرید. از استفاده از انتخابگرهای CSS بیش از حد پیچیده یا انیمیشن‌هایی که می‌توانند رندر را کند کنند، خودداری کنید. همچنین، اطمینان حاصل کنید که خصوصیات سفارشی شما به طور کارآمد تعریف شده‌اند تا سربار جستجوی متغیرها به حداقل برسد.

در اینجا چند روش برتر برای بهینه‌سازی عملکرد آورده شده است:

• انتخابگرهای CSS را ساده نگه دارید: از استفاده از انتخابگرهای CSS بیش از حد خاص یا تو در تو خودداری کنید، زیرا می‌توانند زمان لازم برای تطبیق استایل‌ها با عناصر توسط مرورگر را افزایش دهند.
• از خصوصیات سفارشی CSS با احتیاط استفاده کنید: در حالی که خصوصیات سفارشی قدرتمند هستند، استفاده بیش از حد می‌تواند بر عملکرد تأثیر بگذارد. از آن‌ها به صورت استراتژیک برای مقادیری که به طور مکرر تغییر می‌کنند یا مقادیری که در چندین عنصر به اشتراک گذاشته شده‌اند، استفاده کنید.
• انیمیشن‌های غیرضروری را به حداقل برسانید: انیمیشن‌ها می‌توانند جذابیت بصری به وب‌سایت شما اضافه کنند، اما اگر با دقت پیاده‌سازی نشوند، می‌توانند بر عملکرد نیز تأثیر بگذارند. از ترنزیشن‌ها و انیمیشن‌های CSS به ندرت استفاده کنید و آن‌ها را برای رندر روان بهینه کنید.
• بر روی دستگاه‌های واقعی تست کنید: همیشه وب‌سایت خود را بر روی دستگاه‌های واقعی با شرایط شبکه و قابلیت‌های سخت‌افزاری متفاوت آزمایش کنید تا تنگناهای عملکردی بالقوه را شناسایی کنید. از ابزارهای توسعه‌دهنده مرورگر برای پروفایل کردن عملکرد وب‌سایت خود و شناسایی زمینه‌های بهبود استفاده کنید.

بهترین شیوه‌ها برای دسترسی‌پذیری

اطمینان حاصل کنید که تم‌های روشن و تاریک شما با دستورالعمل‌های دسترسی‌پذیری، مانند WCAG (دستورالعمل‌های دسترسی به محتوای وب) مطابقت دارند. این شامل ارائه کنتراست رنگ کافی، استفاده از HTML معنایی و اطمینان از اینکه همه عناصر تعاملی با صفحه‌کلید قابل دسترسی هستند، می‌شود.

در اینجا چند روش برتر دسترسی‌پذیری خاص برای دنبال کردن آورده شده است:

• کنتراست رنگ کافی: اطمینان حاصل کنید که نسبت کنتراست بین رنگ متن و پس‌زمینه با استانداردهای WCAG 2.1 AA (۴.۵:۱ برای متن معمولی، ۳:۱ برای متن بزرگ) مطابقت دارد. از ابزارهایی مانند WebAIM's Contrast Checker برای تأیید نسبت کنتراست استفاده کنید.
• HTML معنایی: از عناصر HTML معنایی (مانند <header>, <nav>, <article>, <aside>, <footer>) برای ساختار منطقی محتوای خود استفاده کنید. این به صفحه‌خوان‌ها و سایر فناوری‌های کمکی کمک می‌کند تا محتوا را درک کرده و صفحه را به طور مؤثر پیمایش کنند.
• دسترسی‌پذیری با صفحه‌کلید: اطمینان حاصل کنید که همه عناصر تعاملی (مانند لینک‌ها، دکمه‌ها، فیلدهای فرم) با صفحه‌کلید قابل دسترسی هستند. از ویژگی tabindex برای کنترل ترتیب فوکوس و ارائه نشانه‌های بصری برای نشان دادن اینکه کدام عنصر فوکوس دارد، استفاده کنید.
• ویژگی‌های ARIA: از ویژگی‌های ARIA (برنامه‌های اینترنتی غنی قابل دسترس) برای ارائه اطلاعات اضافی در مورد ساختار و عملکرد برنامه وب خود به فناوری‌های کمکی استفاده کنید. به عنوان مثال، از aria-label برای ارائه یک برچسب توصیفی برای یک عنصر، یا aria-hidden برای پنهان کردن یک عنصر از صفحه‌خوان‌ها استفاده کنید.
• تست با فناوری‌های کمکی: وب‌سایت خود را با صفحه‌خوان‌ها و سایر فناوری‌های کمکی آزمایش کنید تا مشکلات دسترسی‌پذیری بالقوه را شناسایی کنید. از ابزارهایی مانند NVDA (NonVisual Desktop Access) یا VoiceOver برای تجربه وب‌سایت خود به عنوان یک کاربر با اختلال بینایی استفاده کنید.
• ارائه متن جایگزین برای تصاویر: از ویژگی alt برای ارائه متن جایگزین توصیفی برای همه تصاویر استفاده کنید. این متن در صورتی که تصویر نتواند بارگذاری شود نمایش داده می‌شود و همچنین توسط صفحه‌خوان‌ها خوانده می‌شود.

نمونه‌هایی در مناطق مختلف

این نمونه‌ها را در نظر بگیرید که چگونه تم‌های روشن و تاریک می‌توانند برای مخاطبان جهانی متنوع طراحی شوند:

• آسیای شرقی: در بسیاری از فرهنگ‌های آسیای شرقی، رنگ سفید با سوگواری همراه است. هنگام طراحی یک تم تاریک برای این مناطق، از استفاده بیش از حد از متن سفید روی پس‌زمینه سیاه خودداری کنید. به جای آن از متن کرم یا خاکستری روشن استفاده کنید.
• خاورمیانه: در برخی از فرهنگ‌های خاورمیانه، رنگ‌های روشن اغلب ترجیح داده می‌شوند. هنگام طراحی یک تم روشن، استفاده از رنگ‌های برجسته و پرانرژی را برای افزودن جذابیت بصری در نظر بگیرید. با این حال، اطمینان حاصل کنید که انتخاب رنگ‌ها با حساسیت‌های فرهنگی تضاد نداشته باشد.
• اروپا: در اروپا، طرح‌های مینیمالیستی اغلب مورد پسند هستند. هنگام طراحی هر دو تم روشن و تاریک، طرح‌بندی‌های تمیز، تایپوگرافی ساده و پالت‌های رنگی ملایم را انتخاب کنید.
• آمریکای لاتین: در آمریکای لاتین، طرح‌های جسورانه و گویا اغلب مورد قدردانی قرار می‌گیرند. هنگام طراحی هر دو تم روشن و تاریک، استفاده از تایپوگرافی بازیگوش، رنگ‌های پرانرژی و انیمیشن‌های پویا را در نظر بگیرید.
• آفریقا: به دلیل سرعت‌های متفاوت اینترنت و قابلیت‌های دستگاه، عملکرد و دسترسی‌پذیری را در اولویت قرار دهید. از عناصر طراحی ساده‌تر استفاده کنید و بر روی اتصالات کندتر آزمایش کنید.

نتیجه‌گیری

پیاده‌سازی تم‌های خودکار روشن و تاریک یک گام حیاتی به سوی ایجاد یک تجربه وب در دسترس‌تر و کاربرپسندتر برای مخاطبان جهانی است. با بهره‌گیری از CSS media queries و خصوصیات سفارشی، می‌توانید به راحتی ظاهر وب‌سایت خود را با ترجیحات کاربر تطبیق دهید، خستگی چشم را کاهش دهید و دسترسی‌پذیری را برای کاربران با اختلالات بینایی بهبود بخشید. به یاد داشته باشید که تداعی‌های فرهنگی، دستورالعمل‌های دسترسی‌پذیری و ملاحظات عملکردی را در نظر بگیرید تا تجربه‌ای یکپارچه و فراگیر را برای همه تضمین کنید.

با اتخاذ این تکنیک‌ها، شما تعهد خود را به اصول طراحی وب مدرن نشان می‌دهید و به نیازهای متنوع مخاطبان بین‌المللی خود پاسخ می‌دهید و وب‌سایت خود را به فضایی خوشایند و راحت برای همه تبدیل می‌کنید.