رنگ های سیستم این توانایی را دارند که به مقدار color-scheme
فعلی استفاده شده واکنش نشان دهند. تابع light-dark()
همین قابلیت را در اختیار نویسندگان قرار می دهد.
رنگ های سیستم در 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
اعمال می شود.