‫Google برای ترجمه محتوا به زبان ترجیحی شما از فناوری هوشواره استفاده می‌کند. ترجمه‌های هوشواره‌ای ممکن است اشتباه داشته باشند.

رنگ‌های وابسته به طرح رنگ CSS با light-dark()‎

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

Bramus

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

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

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

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

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

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

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

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

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

:root {
  color-scheme: dark;
}

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

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

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

صفحه‌ای که به شما امکان می‌دهد مقدار color-scheme را تغییر دهید. پس‌از تغییر، رنگ‌های صفحه هنگام رفتن از روشن به تیره یا برعکس تغییر می‌کند، اگرچه اعلان‌های عنصر بدنه یکسان باقی می‌ماند.

معرفی `light-dark()`

Browser Support

Source

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

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

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

نتیجه light-dark() یک <color> است. می‌توان از آن در CSS هرجا که <color> پذیرفته می‌شود استفاده کرد. برای مثال در ویژگی‌های 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;
  }
}

صفحه‌ای که ازطریق prefers-color-scheme به حالت روشن یا تیره پاسخ می‌دهد.
مقادیر رنگ در CSS بااستفاده از پُرسمان رسانه تغییر می‌کند.

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

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

صفحه‌ای که بااستفاده از prefers-color-scheme به حالت روشن یا تاریک پاسخ می‌دهد.
مقادیر رنگ بااستفاده از light-dark() تغییر می‌کند.

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

صفحه‌ای که بااستفاده از prefers-color-scheme به حالت روشن یا تیره پاسخ می‌دهد.
مقادیر رنگ بااستفاده از light-dark() تغییر می‌کند.
بااستفاده از یکی از گزینه‌ها می‌توانید حالت روشن یا تیره را اجباری کنید. این کار با دستکاری مقدار color-scheme انجام می‌شود.

رنگ‌های وابسته به طرح رنگ CSS با light-dark()‎ با مجموعه‌ها، منظم بمانید ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.

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

معرفی light-dark()

کاربرد عملی

رنگ‌های وابسته به طرح رنگ CSS با light-dark()‎

معرفی `light-dark()`