حالت تیره با color-scheme و light-dark()؛ تم ساده‌تر از همیشه

پیاده‌سازی حالت تیره قبلاً یعنی کپی‌کردن بلوک‌های رنگ در یک media query. حالا با color-scheme و light-dark() هر رنگ را فقط یک‌بار و کنار هم می‌نویسید.

تعریف رنگ‌ها

:root {
  color-scheme: light dark;
  --bg: light-dark(#ffffff, #0f172a);
  --text: light-dark(#0f172a, #e2e8f0);
  --link: light-dark(#1d4ed8, #93c5fd);
}

body {
  background: var(--bg);
  color: var(--text);
}

مرورگر بر اساس تنظیم سیستم کاربر مقدار اول یا دوم را انتخاب می‌کند. color-scheme همچنین رنگ پیش‌فرض کنترل‌های فرم و اسکرول‌بار را هم هماهنگ می‌کند.

کلید دستی تم

اگر می‌خواهید کاربر خودش انتخاب کند، می‌توانید مقدار color-scheme را با یک data attribute روی ریشه عوض کنید:

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

• برای مرورگرهای خیلی قدیمی یک مقدار پیش‌فرض روشن هم کنار آن بگذارید.
• تصویرها و آیکن‌ها را فراموش نکنید؛ لوگوی سفید روی پس‌زمینهٔ سفید دیده نمی‌شود.