رنگ های وابسته به طرح رنگ CSS با () روشن-تاریک

رنگ های سیستم این توانایی را دارند که به مقدار color-scheme فعلی استفاده شده واکنش نشان دهند. تابع light-dark() همین قابلیت را در اختیار نویسندگان قرار می دهد.

Bramus

رنگ های سیستم در CSS

در CSS می توانید از رنگ های زیادی از یکی از فضاهای رنگی متعدد استفاده کنید. به عنوان مثال، می‌توانید از رنگ‌های نام‌گذاری شده، رنگ‌های هگزا، توابع رنگی مرتبط با یک فضای رنگی خاص، تابع color() عمومی‌تر استفاده کنید.

به عنوان مثال، رنگ cornflowerblue می‌توان به صورت #6495ED یا hsl(218.54deg 79.19% 66.08%) یا color(display-p3 0.43 0.58 0.9) نشان داد.

علاوه بر این نام‌ها و قالب‌های مختلف، CSS شامل رنگ‌هایی است که به عنوان رنگ‌های سیستم توصیف شده‌اند، که در ماژول رنگ CSS سطح 4 مشخص شده‌اند. این رنگ های سیستمی رنگ هایی هستند که توسط مرورگر تعریف شده و با یک کلمه کلیدی نمایش داده می شوند.

برای مثال، رنگ سیستم Canvas – که نباید با عنصر <canvas> اشتباه گرفته شود – نمایانگر «پس‌زمینه محتوای برنامه یا اسناد» است. این به خوبی با CanvasText که نشان دهنده "متن در محتوای برنامه یا اسناد" است، جفت می شود، و همچنین قرار است در ارتباط با آن استفاده شود.

در CSS از آنها به صورت زیر استفاده می کنید:

body {
  color: CanvasText;
  background-color: Canvas;
}

به‌طور پیش‌فرض، CanvasText رنگی نزدیک به black و Canvas رنگی نزدیک به white است. پیاده سازی واقعی به مرورگر بستگی دارد. به عنوان مثال، CanvasText در کروم به #121212 منجر می شود، در حالی که Safari آن را به عنوان کمی سبک تر #1e1e1e مشخص کرده است.

قدرت پنهان این رنگ های سیستمی این است که می توانند به مقدار محاسبه شده ویژگی color-scheme پاسخ دهند. به عنوان مثال، مقادیر CanvasText و Canvas زمانی که color-scheme استفاده شده dark باشد، تغییر می کند.

:root {
  color-scheme: dark;
}

body {
  color: CanvasText;
  background-color: Canvas;
}

در دمو زیر، می‌توانید مقدار color-scheme set on :root را تغییر دهید و ببینید صفحه چگونه پاسخ می‌دهد.

• وقتی روی light dark تنظیم می شود، نشان می دهد که عنصر از هر دو حالت روشن و تاریک پشتیبانی می کند. انتخاب مقدار مورد استفاده به مقدار شرط رسانه prefers-color-scheme بستگی دارد.
• وقتی روی light تنظیم می شود، نشان می دهد که عنصر از طرح رنگ روشن پشتیبانی می کند.
• وقتی روی dark تنظیم می شود، نشان می دهد که عنصر از طرح رنگ تیره پشتیبانی می کند.

معرفی light-dark()

تا به حال، واکنش به مقدار color-scheme استفاده شده چیزی بود که برای رنگ های سیستم محفوظ بود. به لطف light-dark() مشخص شده در ماژول رنگی CSS سطح 5 ، اکنون شما نیز همین قابلیت را دارید.

light-dark() تابعی است که دو آرگومان را می پذیرد که هر دو باید یک <color> باشند. یکی از هر دو بسته به طرح رنگ مورد استفاده انتخاب می شود.

• اگر طرح رنگ استفاده شده light یا ناشناخته باشد، مقدار محاسبه شده اولین مقدار برگردانده می شود.
• اگر طرح رنگ استفاده شده dark باشد، مقدار محاسبه شده رنگ دوم برگردانده می شود.

نتیجه light-dark() یک <color> است. می توان آن را در هر جایی که <color> پذیرفته است در CSS استفاده کرد. به عنوان مثال در خواص color و background-color ، و همچنین در تابعی مانند linear-gradient() .

در مثال زیر، رنگ پس زمینه استفاده شده #333 در حالت تاریک، یا #ccc در حالت روشن (یا یک حالت ناشناخته) است.

:root {
  color-scheme: light dark;
}

body {
  background-color: light-dark(#ccc, #333);
}

توجه داشته باشید که برای اینکه light-dark() به درستی کار کند، باید یک color-scheme مشخص کنید. از آنجایی که این ویژگی ارث می برد، معمولاً آن را روی :root تنظیم می کنید، اما اگر می خواهید می توانید آن را روی یک عنصر خاص تنظیم کنید.

کاربرد عملی

در مثال زیر، چند ویژگی سفارشی رنگ‌ها را در صفحه نمایش می‌دهند. برای تأمین حالت تاریک، مقادیر آن ویژگی‌های سفارشی با یک مقدار متفاوت در یک شرط رسانه prefers-color-scheme .

:root {
  --primary-color: #333;
  --primary-background: #e4e4e4;
  --highlight-color: hotpink;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: #fafafa;
    --primary-background: #121212;
    --highlight-color: lime;
  }
}

به لطف light-dark() ، این کد را می توان ساده کرد. از آنجایی که color-scheme روی :root روی light dark تنظیم شده است، مقادیر این رنگ ها به طور خودکار هنگام تغییر سیستم عامل شما از حالت روشن به تاریک و بالعکس تغییر می کند.

:root {
  color-scheme: light dark;
  --primary-color: light-dark(#333, #fafafa);
  --primary-background: light-dark(#e4e4e4, #121212);
  --highlight-color: light-dark(hotpink, lime);
}

به عنوان یک امتیاز اضافی، می‌توان با تنظیم color-scheme روی dark یا light زیردرخت خاصی از DOM را مجبور کرد که فقط از حالت روشن یا تاریک استفاده کند. در مثال زیر، این به :root اعمال می شود.