ویژگی CSS color-scheme
و متا تگ مربوطه به توسعه دهندگان این امکان را می دهد که صفحات خود را به پیش فرض های موضوعی خاص از شیوه نامه عامل کاربر انتخاب کنند.
پس زمینه
ویژگی رسانه ترجیحی کاربر prefers-color-scheme
ویژگی رسانه ترجیحی کاربر prefers-color-scheme
می دهد به توسعه دهندگان کنترل کامل بر ظاهر صفحاتشان را می دهد. اگر با آن آشنا نیستید، لطفاً مقاله prefers-color-scheme
مقاله من را بخوانید: سلام تاریکی، دوست قدیمی من ، جایی که من همه چیزهایی را که درباره ایجاد تجربههای شگفتانگیز حالت تاریک میدانم مستند کردهام.
یکی از قطعات پازلی که در مقاله به طور خلاصه به آن اشاره شد، ویژگی CSS color-scheme
و متا تگ مربوطه به همین نام است. هر دوی آنها زندگی شما را بهعنوان یک توسعهدهنده آسانتر میکنند و به شما اجازه میدهند صفحه خود را در پیشفرضهای موضوعی خاص از شیوه نامه عامل کاربر انتخاب کنید، مانند، برای مثال، کنترلهای فرم، نوارهای اسکرول، و همچنین رنگهای سیستم CSS. در عین حال، این ویژگی باعث می شود مرورگرها نتوانند هر گونه تغییری را به تنهایی اعمال کنند.
پشتیبانی از مرورگر
prefers-color-scheme
color-scheme
شیوه نامه عامل کاربر
قبل از ادامه، اجازه دهید به طور مختصر توضیح دهم که شیوه نامه عامل کاربر چیست. در بیشتر مواقع، میتوانید کلمه کاربر (UA) را به عنوان روشی جالب برای گفتن مرورگر در نظر بگیرید. شیوه نامه UA ظاهر و احساس پیش فرض یک صفحه را تعیین می کند. همانطور که از نام آن پیداست، شیوه نامه UA چیزی است که به UA مورد نظر بستگی دارد. می توانید نگاهی به استایل شیت UA کروم (و کرومیوم) بیندازید و آن را با فایرفاکس یا سافاری (و WebKit) مقایسه کنید. به طور معمول، شیوه نامه های UA در اکثر موارد توافق دارند. برای مثال، همه آنها پیوندها را آبی، متن عمومی را سیاه و رنگ پسزمینه را سفید میکنند، اما تفاوتهای مهم (و گاهی آزاردهنده) نیز وجود دارد، به عنوان مثال، نحوه استایل دادن به کنترلهای فرم.
به شیوه نامه UA WebKit و آنچه که در مورد حالت تاریک انجام می دهد نگاهی دقیق بیندازید. (یک جستجوی متن کامل برای "تاریک" در شیوه نامه انجام دهید.) پیش فرض ارائه شده توسط شیوه نامه بر اساس روشن یا خاموش بودن حالت تاریک تغییر می کند. برای نشان دادن این موضوع، در اینجا یکی از قوانین CSS با استفاده از :matches
pseudo class و متغیرهای داخلی WebKit مانند -apple-system-control-background
و همچنین دستورالعمل پیش پردازشگر داخلی WebKit #if defined
وجود دارد:
input,
input:matches([type="password"], [type="search"]) {
-webkit-appearance: textfield;
#if defined(HAVE_OS_DARK_MODE_SUPPORT) &&
HAVE_OS_DARK_MODE_SUPPORT
color: text;
background-color: -apple-system-control-background;
#else
background-color: white;
#endif
/* snip */
}
مقداری غیر استاندارد را برای ویژگی های color
و background-color
بالا مشاهده خواهید کرد. نه text
و نه -apple-system-control-background
رنگ های CSS معتبر نیستند. آنها رنگ های معنایی داخلی WebKit هستند.
به نظر می رسد، CSS دارای رنگ های سیستم معنایی استاندارد شده است. آنها در CSS Color Module Level 4 مشخص شده اند. به عنوان مثال، Canvas
(با تگ <canvas>
اشتباه نشود) برای پسزمینه محتوای برنامه یا اسناد است، در حالی که CanvasText
برای متن در محتوای برنامه یا اسناد است. این دو با هم ترکیب می شوند و نباید به طور جداگانه استفاده شوند.
شیوه نامه های UA می توانند از رنگ های اختصاصی یا استاندارد شده سیستم معنایی خود استفاده کنند تا تعیین کنند چگونه عناصر HTML باید به طور پیش فرض ارائه شوند. اگر سیستم عامل روی حالت تاریک تنظیم شده باشد یا از یک تم تیره استفاده کند، CanvasText
(یا text
) به صورت مشروط روی سفید و Canvas
(یا -apple-system-control-background
) روی سیاه تنظیم می شود. سپس شیوه نامه UA CSS زیر را تنها یک بار اختصاص می دهد و هر دو حالت روشن و تاریک را پوشش می دهد.
/**
Not actual UA stylesheet code.
For illustrative purposes only.
*/
body {
color: CanvasText;
background-color: Canvas
}
ویژگی CSS color-scheme
مشخصات ماژول تنظیم رنگ CSS سطح 1 یک مدل را معرفی می کند و تنظیم خودکار رنگ توسط عامل کاربر را با هدف کنترل تنظیمات ترجیحی کاربر مانند حالت تاریک، تنظیم کنتراست، یا طرح های رنگی خاص مورد نظر کنترل می کند.
ویژگی color-scheme
که در آن تعریف شده است به یک عنصر اجازه می دهد تا نشان دهد که با چه طرح های رنگی رندر می شود. این مقادیر با ترجیحات کاربر مذاکره میشوند و در نتیجه یک طرح رنگ انتخابی ایجاد میشود که بر موارد رابط کاربر (UI) مانند رنگهای پیشفرض کنترلهای فرم و نوارهای پیمایش و همچنین مقادیر استفادهشده رنگهای سیستم CSS تأثیر میگذارد. مقادیر زیر در حال حاضر پشتیبانی می شوند:
normal
نشان می دهد که عنصر به هیچ وجه از طرح های رنگی آگاه نیست، بنابراین عنصر باید با طرح رنگی پیش فرض مرورگر ارائه شود.[ light | dark ]+
نشان میدهد که عنصر از طرحهای رنگی فهرست شده آگاه است و میتواند از پس آن برآید، و ترجیحی مرتب بین آنها را بیان میکند.
در این لیست، light
یک طرح رنگ روشن را با رنگ های پس زمینه روشن و رنگ های پیش زمینه تیره نشان می دهد، در حالی که dark
با رنگ های پس زمینه تیره و رنگ های پیش زمینه روشن، مخالف را نشان می دهد.
برای همه عناصر، رندر کردن با یک طرح رنگ باید باعث شود که رنگهای استفاده شده در تمام رابطهای کاربری ارائهشده توسط مرورگر برای عنصر با هدف طرح رنگ مطابقت داشته باشند. به عنوان مثال می توان به نوارهای اسکرول، زیر خط های بررسی املا، کنترل های فرم و غیره اشاره کرد.
در عنصر :root
، رندر با یک طرح رنگی علاوه بر این باید بر رنگ سطح بوم (یعنی رنگ پسزمینه جهانی)، مقدار اولیه ویژگی color
و مقادیر استفاده شده از رنگهای سیستم تأثیر بگذارد و همچنین باید روی نوارهای اسکرول درگاه دید تاثیر می گذارد.
/*
The page supports both dark and light color schemes,
and the page author prefers dark.
*/
:root {
color-scheme: dark light;
}
متا تگ color-scheme
احترام گذاشتن به ویژگی CSS color-scheme
مستلزم آن است که CSS ابتدا دانلود شود (اگر از طریق <link rel="stylesheet">
ارجاع داده شده باشد) و تجزیه شود. برای کمک به عوامل کاربر در رندر کردن بلافاصله پسزمینه صفحه با طرح رنگ دلخواه، یک مقدار color-scheme
نیز میتواند در عنصر <meta name="color-scheme">
ارائه شود.
<!--
The page supports both dark and light color schemes,
and the page author prefers dark.
-->
<meta name="color-scheme" content="dark light">
ترکیب color-scheme
و prefers-color-scheme
از آنجایی که هم متا تگ و هم ویژگی CSS (اگر روی عنصر :root
اعمال شود) در نهایت به یک رفتار منجر میشوند، من همیشه توصیه میکنم طرح رنگ را از طریق متا تگ مشخص کنید تا مرورگر بتواند سریعتر از طرح ترجیحی استفاده کند.
در حالی که برای صفحات پایه مطلق، هیچ قانون اضافی CSS لازم نیست، در حالت کلی، همیشه باید color-scheme
با prefers-color-scheme
میدهید. به عنوان مثال، WebKit CSS color -webkit-link
که توسط WebKit و Chrome برای پیوند کلاسیک آبی rgb(0,0,238)
استفاده میشود، دارای نسبت کنتراست ناکافی 2.23:1 در پسزمینه سیاه است و WCAG AA بهعنوان ناموفق است . و همچنین الزامات WCAG AAA.
من باگهایی را برای Chrome ، WebKit و Firefox و همچنین یک مشکل متا در استاندارد HTML باز کردهام تا این مشکل برطرف شود.
تعامل با prefers-color-scheme
تأثیر متقابل ویژگی CSS color-scheme
و متا تگ مربوطه با ویژگی رسانه ترجیحی کاربر prefers-color-scheme
ممکن است در ابتدا گیج کننده به نظر برسد. در واقع آنها با هم خیلی خوب بازی می کنند. مهم ترین چیزی که باید درک کنید این است که color-scheme
منحصراً ظاهر پیش فرض را تعیین می کند، در حالی که prefers-color-scheme
ظاهر دارای سبک را تعیین می کند. برای واضح تر شدن این موضوع، صفحه زیر را فرض کنید:
<head>
<meta name="color-scheme" content="dark light">
<style>
fieldset {
background-color: gainsboro;
}
@media (prefers-color-scheme: dark) {
fieldset {
background-color: darkslategray;
}
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, legere ancillae ne vis.
</p>
<form>
<fieldset>
<legend>Lorem ipsum</legend>
<button type="button">Lorem ipsum</button>
</fieldset>
</form>
</body>
کد CSS درون خطی در صفحه background-color
عنصر <fieldset>
را در حالت کلی روی gainsboro
و در صورتی که کاربر طرح رنگ dark
را مطابق با ویژگی رسانه ترجیحی کاربر prefers-color-scheme
ترجیح دهد، به darkslategray
تیره تنظیم میکند.
از طریق عنصر <meta name="color-scheme" content="dark light">
، صفحه به مرورگر میگوید که از یک تم تیره و روشن پشتیبانی میکند و یک تم تیره را ترجیح میدهد.
بسته به اینکه سیستم عامل روی حالت تاریک یا روشن تنظیم شده باشد، کل صفحه بر اساس شیوه نامه عامل کاربر روشن روی تاریک یا برعکس ظاهر می شود. هیچ CSS اضافی ارائه شده توسط توسعه دهنده برای تغییر متن پاراگراف یا رنگ پس زمینه صفحه وجود ندارد.
توجه داشته باشید که چگونه background-color
عنصر <fieldset>
بر اساس فعال بودن حالت تاریک، با پیروی از قوانین موجود در شیوه نامه داخلی ارائه شده توسط توسعهدهنده در صفحه، تغییر میکند. این یا gainsboro
یا darkslategray
است.
ظاهر عنصر <button>
توسط شیوه نامه عامل کاربر کنترل می شود. color
آن روی رنگ سیستم ButtonText
و background-color
و چهار border-color
آن روی رنگ سیستم ButtonFace
تنظیم میشود.
اکنون توجه کنید که چگونه border-color
عنصر <button>
تغییر می کند. مقدار محاسبه شده برای border-top-color
و border-bottom-color
از rgba(0, 0, 0, 0.847)
(سیاه) به rgba(255, 255, 255, 0.847)
(سفید) تغییر می کند. عامل ButtonFace
به صورت پویا بر اساس طرح رنگ به روز می کند. همین امر برای color
عنصر <button>
که روی رنگ سیستم مربوطه تنظیم شده است ButtonText
صدق می کند.
نسخه ی نمایشی
میتوانید جلوههای color-scheme
اعمال شده روی تعداد زیادی از عناصر HTML را در یک نسخه نمایشی در Glitch مشاهده کنید. دمو عمداً نقض WCAG AA و WCAG AAA را با رنگ های پیوند ذکر شده در هشدار بالا نشان می دهد.
قدردانی
ویژگی CSS color-scheme
و متا تگ مربوطه توسط Rune Lillesveen پیاده سازی شد. Rune همچنین یکی از ویرایشگرهای CSS Color Adjustment Module Level 1 است. تصویر قهرمان توسط فیلیپ لئونه در Unsplash .
ویژگی CSS color-scheme
و متا تگ مربوطه به توسعه دهندگان این امکان را می دهد که صفحات خود را به پیش فرض های موضوعی خاص از شیوه نامه عامل کاربر انتخاب کنند.
پس زمینه
ویژگی رسانه ترجیحی کاربر prefers-color-scheme
ویژگی رسانه ترجیحی کاربر prefers-color-scheme
می دهد به توسعه دهندگان کنترل کامل بر ظاهر صفحاتشان را می دهد. اگر با آن آشنا نیستید، لطفاً مقاله prefers-color-scheme
مقاله من را بخوانید: سلام تاریکی، دوست قدیمی من ، جایی که من همه چیزهایی را که درباره ایجاد تجربههای شگفتانگیز حالت تاریک میدانم مستند کردهام.
یکی از قطعات پازلی که در مقاله به طور خلاصه به آن اشاره شد، ویژگی CSS color-scheme
و متا تگ مربوطه به همین نام است. هر دوی آنها زندگی شما را بهعنوان یک توسعهدهنده آسانتر میکنند و به شما اجازه میدهند صفحه خود را در پیشفرضهای موضوعی خاص از شیوه نامه عامل کاربر انتخاب کنید، مانند، برای مثال، کنترلهای فرم، نوارهای اسکرول، و همچنین رنگهای سیستم CSS. در عین حال، این ویژگی باعث می شود مرورگرها نتوانند هر گونه تغییری را به تنهایی اعمال کنند.
پشتیبانی از مرورگر
prefers-color-scheme
color-scheme
شیوه نامه عامل کاربر
قبل از ادامه، اجازه دهید به طور مختصر توضیح دهم که شیوه نامه عامل کاربر چیست. در بیشتر مواقع، میتوانید کلمه کاربر (UA) را به عنوان روشی جالب برای گفتن مرورگر در نظر بگیرید. شیوه نامه UA ظاهر و احساس پیش فرض یک صفحه را تعیین می کند. همانطور که از نام آن پیداست، شیوه نامه UA چیزی است که به UA مورد نظر بستگی دارد. می توانید نگاهی به استایل شیت UA کروم (و کرومیوم) بیندازید و آن را با فایرفاکس یا سافاری (و WebKit) مقایسه کنید. به طور معمول، شیوه نامه های UA در اکثر موارد توافق دارند. برای مثال، همه آنها پیوندها را آبی، متن عمومی را سیاه و رنگ پسزمینه را سفید میکنند، اما تفاوتهای مهم (و گاهی آزاردهنده) نیز وجود دارد، به عنوان مثال، نحوه استایل دادن به کنترلهای فرم.
به شیوه نامه UA WebKit و آنچه که در مورد حالت تاریک انجام می دهد نگاهی دقیق بیندازید. (یک جستجوی متن کامل برای "تاریک" در شیوه نامه انجام دهید.) پیش فرض ارائه شده توسط شیوه نامه بر اساس روشن یا خاموش بودن حالت تاریک تغییر می کند. برای نشان دادن این موضوع، در اینجا یکی از قوانین CSS با استفاده از :matches
pseudo class و متغیرهای داخلی WebKit مانند -apple-system-control-background
و همچنین دستورالعمل پیش پردازشگر داخلی WebKit #if defined
وجود دارد:
input,
input:matches([type="password"], [type="search"]) {
-webkit-appearance: textfield;
#if defined(HAVE_OS_DARK_MODE_SUPPORT) &&
HAVE_OS_DARK_MODE_SUPPORT
color: text;
background-color: -apple-system-control-background;
#else
background-color: white;
#endif
/* snip */
}
مقداری غیر استاندارد را برای ویژگی های color
و background-color
بالا مشاهده خواهید کرد. نه text
و نه -apple-system-control-background
رنگ های CSS معتبر نیستند. آنها رنگ های معنایی داخلی WebKit هستند.
به نظر می رسد، CSS دارای رنگ های سیستم معنایی استاندارد شده است. آنها در CSS Color Module Level 4 مشخص شده اند. به عنوان مثال، Canvas
(با تگ <canvas>
اشتباه نشود) برای پسزمینه محتوای برنامه یا اسناد است، در حالی که CanvasText
برای متن در محتوای برنامه یا اسناد است. این دو با هم ترکیب می شوند و نباید به طور جداگانه استفاده شوند.
شیوه نامه های UA می توانند از رنگ های اختصاصی یا استاندارد شده سیستم معنایی خود استفاده کنند تا تعیین کنند چگونه عناصر HTML باید به طور پیش فرض ارائه شوند. اگر سیستم عامل روی حالت تاریک تنظیم شده باشد یا از یک تم تیره استفاده کند، CanvasText
(یا text
) به صورت مشروط روی سفید و Canvas
(یا -apple-system-control-background
) روی سیاه تنظیم می شود. سپس شیوه نامه UA CSS زیر را تنها یک بار اختصاص می دهد و هر دو حالت روشن و تاریک را پوشش می دهد.
/**
Not actual UA stylesheet code.
For illustrative purposes only.
*/
body {
color: CanvasText;
background-color: Canvas
}
ویژگی CSS color-scheme
مشخصات ماژول تنظیم رنگ CSS سطح 1 یک مدل را معرفی می کند و تنظیم خودکار رنگ توسط عامل کاربر را با هدف کنترل تنظیمات ترجیحی کاربر مانند حالت تاریک، تنظیم کنتراست، یا طرح های رنگی خاص مورد نظر کنترل می کند.
ویژگی color-scheme
که در آن تعریف شده است به یک عنصر اجازه می دهد تا نشان دهد که با چه طرح های رنگی رندر می شود. این مقادیر با ترجیحات کاربر مذاکره میشوند و در نتیجه یک طرح رنگ انتخابی ایجاد میشود که بر موارد رابط کاربر (UI) مانند رنگهای پیشفرض کنترلهای فرم و نوارهای پیمایش و همچنین مقادیر استفادهشده رنگهای سیستم CSS تأثیر میگذارد. مقادیر زیر در حال حاضر پشتیبانی می شوند:
normal
نشان می دهد که عنصر به هیچ وجه از طرح های رنگی آگاه نیست، بنابراین عنصر باید با طرح رنگی پیش فرض مرورگر ارائه شود.[ light | dark ]+
نشان میدهد که عنصر از طرحهای رنگی فهرست شده آگاه است و میتواند از پس آن برآید، و ترجیحی مرتب بین آنها را بیان میکند.
در این لیست، light
یک طرح رنگ روشن را با رنگ های پس زمینه روشن و رنگ های پیش زمینه تیره نشان می دهد، در حالی که dark
با رنگ های پس زمینه تیره و رنگ های پیش زمینه روشن، مخالف را نشان می دهد.
برای همه عناصر، رندر کردن با یک طرح رنگ باید باعث شود که رنگهای استفاده شده در تمام رابطهای کاربری ارائهشده توسط مرورگر برای عنصر با هدف طرح رنگ مطابقت داشته باشند. به عنوان مثال می توان به نوارهای اسکرول، زیر خط های بررسی املا، کنترل های فرم و غیره اشاره کرد.
در عنصر :root
، رندر با یک طرح رنگی علاوه بر این باید بر رنگ سطح بوم (یعنی رنگ پسزمینه جهانی)، مقدار اولیه ویژگی color
و مقادیر استفاده شده از رنگهای سیستم تأثیر بگذارد و همچنین باید روی نوارهای اسکرول درگاه دید تاثیر می گذارد.
/*
The page supports both dark and light color schemes,
and the page author prefers dark.
*/
:root {
color-scheme: dark light;
}
متا تگ color-scheme
احترام گذاشتن به ویژگی CSS color-scheme
مستلزم آن است که CSS ابتدا دانلود شود (اگر از طریق <link rel="stylesheet">
ارجاع داده شده باشد) و تجزیه شود. برای کمک به عوامل کاربر در رندر کردن بلافاصله پسزمینه صفحه با طرح رنگ دلخواه، یک مقدار color-scheme
نیز میتواند در عنصر <meta name="color-scheme">
ارائه شود.
<!--
The page supports both dark and light color schemes,
and the page author prefers dark.
-->
<meta name="color-scheme" content="dark light">
ترکیب color-scheme
و prefers-color-scheme
از آنجایی که هم متا تگ و هم ویژگی CSS (اگر روی عنصر :root
اعمال شود) در نهایت به یک رفتار منجر میشوند، من همیشه توصیه میکنم طرح رنگ را از طریق متا تگ مشخص کنید تا مرورگر بتواند سریعتر از طرح ترجیحی استفاده کند.
در حالی که برای صفحات پایه مطلق، هیچ قانون اضافی CSS لازم نیست، در حالت کلی، همیشه باید color-scheme
با prefers-color-scheme
میدهید. به عنوان مثال، WebKit CSS color -webkit-link
که توسط WebKit و Chrome برای پیوند کلاسیک آبی rgb(0,0,238)
استفاده میشود، دارای نسبت کنتراست ناکافی 2.23:1 در پسزمینه سیاه است و WCAG AA بهعنوان ناموفق است . و همچنین الزامات WCAG AAA.
من باگهایی را برای Chrome ، WebKit و Firefox و همچنین یک مشکل متا در استاندارد HTML باز کردهام تا این مشکل برطرف شود.
تعامل با prefers-color-scheme
تأثیر متقابل ویژگی CSS color-scheme
و متا تگ مربوطه با ویژگی رسانه ترجیحی کاربر prefers-color-scheme
ممکن است در ابتدا گیج کننده به نظر برسد. در واقع آنها با هم خیلی خوب بازی می کنند. مهم ترین چیزی که باید درک کنید این است که color-scheme
منحصراً ظاهر پیش فرض را تعیین می کند، در حالی که prefers-color-scheme
ظاهر دارای سبک را تعیین می کند. برای واضح تر شدن این موضوع، صفحه زیر را فرض کنید:
<head>
<meta name="color-scheme" content="dark light">
<style>
fieldset {
background-color: gainsboro;
}
@media (prefers-color-scheme: dark) {
fieldset {
background-color: darkslategray;
}
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, legere ancillae ne vis.
</p>
<form>
<fieldset>
<legend>Lorem ipsum</legend>
<button type="button">Lorem ipsum</button>
</fieldset>
</form>
</body>
کد CSS درون خطی در صفحه background-color
عنصر <fieldset>
را در حالت کلی روی gainsboro
و در صورتی که کاربر طرح رنگ dark
را مطابق با ویژگی رسانه ترجیحی کاربر prefers-color-scheme
ترجیح دهد، به darkslategray
تیره تنظیم میکند.
از طریق عنصر <meta name="color-scheme" content="dark light">
، صفحه به مرورگر میگوید که از یک تم تیره و روشن پشتیبانی میکند و یک تم تیره را ترجیح میدهد.
بسته به اینکه سیستم عامل روی حالت تاریک یا روشن تنظیم شده باشد، کل صفحه بر اساس شیوه نامه عامل کاربر روشن روی تاریک یا برعکس ظاهر می شود. هیچ CSS اضافی ارائه شده توسط توسعه دهنده برای تغییر متن پاراگراف یا رنگ پس زمینه صفحه وجود ندارد.
توجه داشته باشید که چگونه background-color
عنصر <fieldset>
بر اساس فعال بودن حالت تاریک، با پیروی از قوانین موجود در شیوه نامه داخلی ارائه شده توسط توسعهدهنده در صفحه، تغییر میکند. این یا gainsboro
یا darkslategray
است.
ظاهر عنصر <button>
توسط شیوه نامه عامل کاربر کنترل می شود. color
آن روی رنگ سیستم ButtonText
و background-color
و چهار border-color
آن روی رنگ سیستم ButtonFace
تنظیم میشود.
اکنون توجه کنید که چگونه border-color
عنصر <button>
تغییر می کند. مقدار محاسبه شده برای border-top-color
و border-bottom-color
از rgba(0, 0, 0, 0.847)
(سیاه) به rgba(255, 255, 255, 0.847)
(سفید) تغییر می کند. عامل ButtonFace
به صورت پویا بر اساس طرح رنگ به روز می کند. همین امر برای color
عنصر <button>
که روی رنگ سیستم مربوطه تنظیم شده است ButtonText
صدق می کند.
نسخه ی نمایشی
میتوانید جلوههای color-scheme
اعمال شده روی تعداد زیادی از عناصر HTML را در یک نسخه نمایشی در Glitch مشاهده کنید. دمو عمداً نقض WCAG AA و WCAG AAA را با رنگ های پیوند ذکر شده در هشدار بالا نشان می دهد.
قدردانی
ویژگی CSS color-scheme
و متا تگ مربوطه توسط Rune Lillesveen پیاده سازی شد. Rune همچنین یکی از ویرایشگرهای CSS Color Adjustment Module Level 1 است. تصویر قهرمان توسط فیلیپ لئونه در Unsplash .
ویژگی CSS color-scheme
و متا تگ مربوطه به توسعه دهندگان این امکان را می دهد که صفحات خود را به پیش فرض های موضوعی خاص از شیوه نامه عامل کاربر انتخاب کنند.
پس زمینه
ویژگی رسانه ترجیحی کاربر prefers-color-scheme
ویژگی رسانه ترجیحی کاربر prefers-color-scheme
می دهد به توسعه دهندگان کنترل کامل بر ظاهر صفحاتشان را می دهد. اگر با آن آشنا نیستید، لطفاً مقاله prefers-color-scheme
مقاله من را بخوانید: سلام تاریکی، دوست قدیمی من ، جایی که من همه چیزهایی را که درباره ایجاد تجربههای شگفتانگیز حالت تاریک میدانم مستند کردهام.
یکی از قطعات پازلی که در مقاله به طور خلاصه به آن اشاره شد، ویژگی CSS color-scheme
و متا تگ مربوطه به همین نام است. هر دوی آنها زندگی شما را بهعنوان یک توسعهدهنده آسانتر میکنند و به شما اجازه میدهند صفحه خود را در پیشفرضهای موضوعی خاص از شیوه نامه عامل کاربر انتخاب کنید، مانند، برای مثال، کنترلهای فرم، نوارهای اسکرول، و همچنین رنگهای سیستم CSS. در عین حال، این ویژگی باعث می شود مرورگرها نتوانند هر گونه تغییری را به تنهایی اعمال کنند.
پشتیبانی از مرورگر
prefers-color-scheme
color-scheme
شیوه نامه عامل کاربر
قبل از ادامه، اجازه دهید به طور مختصر توضیح دهم که شیوه نامه عامل کاربر چیست. در بیشتر مواقع، میتوانید کلمه کاربر (UA) را به عنوان روشی جالب برای گفتن مرورگر در نظر بگیرید. شیوه نامه UA ظاهر و احساس پیش فرض یک صفحه را تعیین می کند. همانطور که از نام آن پیداست، شیوه نامه UA چیزی است که به UA مورد نظر بستگی دارد. می توانید نگاهی به استایل شیت UA کروم (و کرومیوم) بیندازید و آن را با فایرفاکس یا سافاری (و WebKit) مقایسه کنید. به طور معمول، شیوه نامه های UA در اکثر موارد توافق دارند. برای مثال، همه آنها پیوندها را آبی، متن عمومی را سیاه و رنگ پسزمینه را سفید میکنند، اما تفاوتهای مهم (و گاهی آزاردهنده) نیز وجود دارد، به عنوان مثال، نحوه استایل دادن به کنترلهای فرم.
به شیوه نامه UA WebKit و آنچه که در مورد حالت تاریک انجام می دهد نگاهی دقیق بیندازید. (یک جستجوی متن کامل برای "تاریک" در شیوه نامه انجام دهید.) پیش فرض ارائه شده توسط شیوه نامه بر اساس روشن یا خاموش بودن حالت تاریک تغییر می کند. برای نشان دادن این موضوع، در اینجا یکی از قوانین CSS با استفاده از :matches
pseudo class و متغیرهای داخلی WebKit مانند -apple-system-control-background
و همچنین دستورالعمل پیش پردازشگر داخلی WebKit #if defined
وجود دارد:
input,
input:matches([type="password"], [type="search"]) {
-webkit-appearance: textfield;
#if defined(HAVE_OS_DARK_MODE_SUPPORT) &&
HAVE_OS_DARK_MODE_SUPPORT
color: text;
background-color: -apple-system-control-background;
#else
background-color: white;
#endif
/* snip */
}
مقداری غیر استاندارد را برای ویژگی های color
و background-color
بالا مشاهده خواهید کرد. نه text
و نه -apple-system-control-background
رنگ های CSS معتبر نیستند. آنها رنگ های معنایی داخلی WebKit هستند.
به نظر می رسد، CSS دارای رنگ های سیستم معنایی استاندارد شده است. آنها در CSS Color Module Level 4 مشخص شده اند. به عنوان مثال، Canvas
(با تگ <canvas>
اشتباه نشود) برای پسزمینه محتوای برنامه یا اسناد است، در حالی که CanvasText
برای متن در محتوای برنامه یا اسناد است. این دو با هم ترکیب می شوند و نباید به طور جداگانه استفاده شوند.
شیوه نامه های UA می توانند از رنگ های اختصاصی یا استاندارد شده سیستم معنایی خود استفاده کنند تا تعیین کنند چگونه عناصر HTML باید به طور پیش فرض ارائه شوند. اگر سیستم عامل روی حالت تاریک تنظیم شده باشد یا از یک تم تیره استفاده کند، CanvasText
(یا text
) به صورت مشروط روی سفید و Canvas
(یا -apple-system-control-background
) روی سیاه تنظیم می شود. سپس شیوه نامه UA CSS زیر را تنها یک بار اختصاص می دهد و هر دو حالت روشن و تاریک را پوشش می دهد.
/**
Not actual UA stylesheet code.
For illustrative purposes only.
*/
body {
color: CanvasText;
background-color: Canvas
}
ویژگی CSS color-scheme
مشخصات ماژول تنظیم رنگ CSS سطح 1 یک مدل را معرفی می کند و تنظیم خودکار رنگ توسط عامل کاربر را با هدف کنترل تنظیمات ترجیحی کاربر مانند حالت تاریک، تنظیم کنتراست، یا طرح های رنگی خاص مورد نظر کنترل می کند.
ویژگی color-scheme
که در آن تعریف شده است به یک عنصر اجازه می دهد تا نشان دهد که با چه طرح های رنگی رندر می شود. این مقادیر با ترجیحات کاربر مذاکره میشوند و در نتیجه یک طرح رنگ انتخابی ایجاد میشود که بر موارد رابط کاربر (UI) مانند رنگهای پیشفرض کنترلهای فرم و نوارهای پیمایش و همچنین مقادیر استفادهشده رنگهای سیستم CSS تأثیر میگذارد. مقادیر زیر در حال حاضر پشتیبانی می شوند:
normal
نشان می دهد که عنصر به هیچ وجه از طرح های رنگی آگاه نیست، بنابراین عنصر باید با طرح رنگی پیش فرض مرورگر ارائه شود.[ light | dark ]+
نشان میدهد که عنصر از طرحهای رنگی فهرست شده آگاه است و میتواند از پس آن برآید، و ترجیحی مرتب بین آنها را بیان میکند.
در این لیست، light
یک طرح رنگ روشن را با رنگ های پس زمینه روشن و رنگ های پیش زمینه تیره نشان می دهد، در حالی که dark
با رنگ های پس زمینه تیره و رنگ های پیش زمینه روشن، مخالف را نشان می دهد.
برای همه عناصر، رندر کردن با یک طرح رنگ باید باعث شود که رنگهای استفاده شده در تمام رابطهای کاربری ارائهشده توسط مرورگر برای عنصر با هدف طرح رنگ مطابقت داشته باشند. به عنوان مثال می توان به نوارهای اسکرول، زیر خط های بررسی املا، کنترل های فرم و غیره اشاره کرد.
در عنصر :root
، رندر با یک طرح رنگی علاوه بر این باید بر رنگ سطح بوم (یعنی رنگ پسزمینه جهانی)، مقدار اولیه ویژگی color
و مقادیر استفاده شده از رنگهای سیستم تأثیر بگذارد و همچنین باید روی نوارهای اسکرول درگاه دید تاثیر می گذارد.
/*
The page supports both dark and light color schemes,
and the page author prefers dark.
*/
:root {
color-scheme: dark light;
}
متا تگ color-scheme
احترام گذاشتن به ویژگی CSS color-scheme
مستلزم آن است که CSS ابتدا دانلود شود (اگر از طریق <link rel="stylesheet">
ارجاع داده شده باشد) و تجزیه شود. برای کمک به عوامل کاربر در رندر کردن بلافاصله پسزمینه صفحه با طرح رنگ دلخواه، یک مقدار color-scheme
نیز میتواند در عنصر <meta name="color-scheme">
ارائه شود.
<!--
The page supports both dark and light color schemes,
and the page author prefers dark.
-->
<meta name="color-scheme" content="dark light">
ترکیب color-scheme
و prefers-color-scheme
از آنجایی که هم متا تگ و هم ویژگی CSS (اگر روی عنصر :root
اعمال شود) در نهایت به یک رفتار منجر میشوند، من همیشه توصیه میکنم طرح رنگ را از طریق متا تگ مشخص کنید تا مرورگر بتواند سریعتر از طرح ترجیحی استفاده کند.
در حالی که برای صفحات پایه مطلق، هیچ قانون اضافی CSS لازم نیست، در حالت کلی، همیشه باید color-scheme
با prefers-color-scheme
میدهید. به عنوان مثال، WebKit CSS color -webkit-link
که توسط WebKit و Chrome برای پیوند کلاسیک آبی rgb(0,0,238)
استفاده میشود، دارای نسبت کنتراست ناکافی 2.23:1 در پسزمینه سیاه است و WCAG AA بهعنوان ناموفق است . و همچنین الزامات WCAG AAA.
من باگهایی را برای Chrome ، WebKit و Firefox و همچنین یک مشکل متا در استاندارد HTML باز کردهام تا این مشکل برطرف شود.
تعامل با prefers-color-scheme
تأثیر متقابل ویژگی CSS color-scheme
و متا تگ مربوطه با ویژگی رسانه ترجیحی کاربر prefers-color-scheme
ممکن است در ابتدا گیج کننده به نظر برسد. در واقع آنها با هم خیلی خوب بازی می کنند. مهم ترین چیزی که باید درک کنید این است که color-scheme
منحصراً ظاهر پیش فرض را تعیین می کند، در حالی که prefers-color-scheme
ظاهر دارای سبک را تعیین می کند. برای واضح تر شدن این موضوع، صفحه زیر را فرض کنید:
<head>
<meta name="color-scheme" content="dark light">
<style>
fieldset {
background-color: gainsboro;
}
@media (prefers-color-scheme: dark) {
fieldset {
background-color: darkslategray;
}
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, legere ancillae ne vis.
</p>
<form>
<fieldset>
<legend>Lorem ipsum</legend>
<button type="button">Lorem ipsum</button>
</fieldset>
</form>
</body>
کد CSS درون خطی در صفحه background-color
عنصر <fieldset>
را در حالت کلی روی gainsboro
و در صورتی که کاربر طرح رنگ dark
را مطابق با ویژگی رسانه ترجیحی کاربر prefers-color-scheme
ترجیح دهد، به darkslategray
تیره تنظیم میکند.
از طریق عنصر <meta name="color-scheme" content="dark light">
، صفحه به مرورگر میگوید که از یک تم تیره و روشن پشتیبانی میکند و یک تم تیره را ترجیح میدهد.
بسته به اینکه سیستم عامل روی حالت تاریک یا روشن تنظیم شده باشد، کل صفحه بر اساس شیوه نامه عامل کاربر روشن روی تاریک یا برعکس ظاهر می شود. هیچ CSS اضافی ارائه شده توسط توسعه دهنده برای تغییر متن پاراگراف یا رنگ پس زمینه صفحه وجود ندارد.
توجه داشته باشید که چگونه background-color
عنصر <fieldset>
بر اساس فعال بودن حالت تاریک، با پیروی از قوانین موجود در شیوه نامه داخلی ارائه شده توسط توسعهدهنده در صفحه، تغییر میکند. این یا gainsboro
یا darkslategray
است.
ظاهر عنصر <button>
توسط شیوه نامه عامل کاربر کنترل می شود. color
آن روی رنگ سیستم ButtonText
و background-color
و چهار border-color
آن روی رنگ سیستم ButtonFace
تنظیم میشود.
اکنون توجه کنید که چگونه border-color
عنصر <button>
تغییر می کند. مقدار محاسبه شده برای border-top-color
و border-bottom-color
از rgba(0, 0, 0, 0.847)
(سیاه) به rgba(255, 255, 255, 0.847)
(سفید) تغییر می کند. عامل ButtonFace
به صورت پویا بر اساس طرح رنگ به روز می کند. همین امر برای color
عنصر <button>
که روی رنگ سیستم مربوطه تنظیم شده است ButtonText
صدق می کند.
نسخه ی نمایشی
میتوانید جلوههای color-scheme
اعمال شده روی تعداد زیادی از عناصر HTML را در یک نسخه نمایشی در Glitch مشاهده کنید. دمو عمداً نقض WCAG AA و WCAG AAA را با رنگ های پیوند ذکر شده در هشدار بالا نشان می دهد.
قدردانی
ویژگی CSS color-scheme
و متا تگ مربوطه توسط Rune Lillesveen پیاده سازی شد. Rune همچنین یکی از ویرایشگرهای CSS Color Adjustment Module Level 1 است. تصویر قهرمان توسط فیلیپ لئونه در Unsplash .
خاصیت CSS color-scheme
و برچسب متا مربوطه به توسعه دهندگان این امکان را می دهد تا صفحات خود را به پیش فرض های خاص موضوع از صفحه شیوه کاربر انتخاب کنند.
پس زمینه
ویژگی رسانه ترجیح کاربر prefers-color-scheme
ویژگی رسانه ترجیح کاربر prefers-color-scheme
، به توسعه دهندگان کنترل کامل بر ظاهر صفحات خود را می دهد. اگر با آن ناآشنا هستید ، لطفاً مقاله من را بخوانید prefers-color-scheme
: سلام تاریکی ، دوست قدیمی من ، جایی که من همه چیز را در مورد ایجاد تجربیات شگفت انگیز حالت تاریک مستند کردم.
یک قطعه پازل که فقط در مقاله به طور خلاصه ذکر شده است ، ویژگی CSS color-scheme
و برچسب متا مربوطه با همین نام است. آنها هر دو زندگی شما را به عنوان یک توسعه دهنده آسانتر می کنند با این امکان که به شما امکان می دهد صفحه خود را به پیش فرض های خاص موضوع از صفحه شیوه کاربر ، مانند مثال ، کنترل فرم ، میله های پیمایش و همچنین رنگ های سیستم CSS انتخاب کنید. در عین حال ، این ویژگی مانع از مرورگرها از اعمال هرگونه تحول به تنهایی می شود.
پشتیبانی از مرورگر
prefers-color-scheme
color-scheme
برگه شیوه کاربر کاربر
قبل از ادامه ، اجازه دهید به طور خلاصه توضیح دهم که یک صفحه شیوه کاربر کاربر چیست. بیشتر اوقات ، شما می توانید به کلمه کاربر (ua) به عنوان روشی فانتزی برای گفتن مرورگر فکر کنید. برگه UA ظاهر و احساس پیش فرض یک صفحه را تعیین می کند. همانطور که از نام آن پیداست ، یک صفحه شیوه UA چیزی است که به UA مورد نظر بستگی دارد. می توانید نگاهی به برگه UA Chrome (و Chromium) داشته باشید و آن را با Firefox یا Safari (و WebKit) مقایسه کنید. به طور معمول ، برگه های سبک امارات متحده عربی در مورد اکثر چیزها موافق هستند. به عنوان مثال ، همه آنها پیوندهایی را به رنگ آبی ، متن کلی سیاه و رنگ پس زمینه سفید ایجاد می کنند ، اما تفاوت های مهم (و گاهی اوقات آزار دهنده) نیز وجود دارد ، به عنوان مثال ، نحوه کنترل شکل آنها.
نگاهی دقیق تر به برگه UA WebKit و آنچه در مورد حالت تاریک انجام می دهد ، بیندازید. . برای نشان دادن این موضوع ، در اینجا یکی از این قانون های CSS با استفاده از :matches
کلاس شبه و متغیرهای WebKit-Internal مانند -apple-system-control-background
و همچنین دستورالعمل پیش پردازنده WebKit-Internal #if defined
:
input,
input:matches([type="password"], [type="search"]) {
-webkit-appearance: textfield;
#if defined(HAVE_OS_DARK_MODE_SUPPORT) &&
HAVE_OS_DARK_MODE_SUPPORT
color: text;
background-color: -apple-system-control-background;
#else
background-color: white;
#endif
/* snip */
}
شما برخی از مقادیر غیر استاندارد را برای خصوصیات color
و background-color
در بالا مشاهده خواهید کرد. نه text
و نه -apple-system-control-background
رنگ های معتبر CSS نیستند. آنها رنگهای معنایی داخلی وب هستند.
به نظر می رسد ، CSS دارای رنگهای استاندارد سیستم معنایی است. آنها در ماژول رنگ CSS سطح 4 مشخص شده اند. به عنوان مثال ، Canvas
(که با برچسب <canvas>
اشتباه گرفته نمی شود) برای پیش زمینه محتوای برنامه یا اسناد است ، در حالی که CanvasText
برای متن در محتوای برنامه یا اسناد است. این دو با هم می روند و نباید در انزوا استفاده شوند.
برگه های سبک UA می توانند از رنگهای اختصاصی یا سیستم معنایی استاندارد خود استفاده کنند تا تعیین کنند که چگونه عناصر HTML باید به طور پیش فرض ارائه شوند. اگر سیستم عامل روی حالت تاریک تنظیم شده باشد یا از یک موضوع تاریک استفاده کند ، CanvasText
(یا text
) به صورت مشروط بر روی سفید تنظیم می شود ، و Canvas
(یا -apple-system-control-background
) روی سیاه تنظیم می شود. برگه UA سپس CSS زیر را فقط یک بار اختصاص می دهد و حالت سبک و تاریک را نیز پوشش می دهد.
/**
Not actual UA stylesheet code.
For illustrative purposes only.
*/
body {
color: CanvasText;
background-color: Canvas
}
خاصیت CSS color-scheme
مشخصات سطح 1 ماژول تنظیم رنگ CSS یک مدل را معرفی می کند و کنترل تنظیم خودکار رنگ توسط نماینده کاربر را با هدف دستیابی به ترجیحات کاربر مانند حالت تاریک ، تنظیم کنتراست یا طرح های رنگی خاص مورد نظر کنترل می کند.
خاصیت color-scheme
که در آن تعریف شده است ، به یک عنصر اجازه می دهد تا نشان دهد که با کدام طرح های رنگی راحت است. این مقادیر با ترجیحات کاربر مذاکره می شوند ، در نتیجه یک طرح رنگی انتخاب شده که روی رابط کاربری (UI) مانند رنگ های پیش فرض کنترل فرم و میله های پیمایش و همچنین مقادیر استفاده شده از رنگ های سیستم CSS تأثیر می گذارد. مقادیر زیر در حال حاضر پشتیبانی می شوند:
normal
نشان می دهد که این عنصر به هیچ وجه از طرح های رنگی آگاه نیست ، بنابراین باید عنصر را با طرح رنگ پیش فرض مرورگر ارائه داد.[ light | dark ]+
نشان می دهد که این عنصر از آن آگاه است و می تواند طرح های رنگی ذکر شده را اداره کند ، و ترجیح سفارش داده شده بین آنها را بیان می کند.
در این لیست ، light
نشان دهنده یک طرح رنگی سبک ، با رنگ های پس زمینه سبک و رنگ های پیش زمینه تیره است ، در حالی که dark
برعکس است ، با رنگ های پس زمینه تیره و رنگ های پیش زمینه نور.
برای همه عناصر ، ارائه با یک طرح رنگی باید باعث ایجاد رنگ های مورد استفاده در تمام UI ارائه شده توسط مرورگر شود تا این عنصر با هدف طرح رنگ مطابقت داشته باشد. مثالها میله های پیمایش ، تأکیدات طلسم ، کنترل فرم و غیره است.
در :root
، ارائه با یک طرح رنگی علاوه بر این باید بر رنگ سطح بوم (یعنی رنگ جهانی پس زمینه) ، مقدار اولیه خاصیت color
و مقادیر استفاده شده از رنگ های سیستم تأثیر بگذارد و همچنین باید بر میله های پیمایش Viewport تأثیر بگذارد.
/*
The page supports both dark and light color schemes,
and the page author prefers dark.
*/
:root {
color-scheme: dark light;
}
برچسب متا color-scheme
احترام به خاصیت CSS color-scheme
نیاز به بارگیری CSS دارد (اگر از طریق <link rel="stylesheet">
) ارجاع شود و تجزیه شود. برای کمک به نمایندگان کاربر در ارائه پس زمینه صفحه با طرح رنگ مورد نظر بلافاصله ، می توان مقدار color-scheme
نیز در یک عنصر <meta name="color-scheme">
ارائه داد.
<!--
The page supports both dark and light color schemes,
and the page author prefers dark.
-->
<meta name="color-scheme" content="dark light">
ترکیبی از color-scheme
و prefers-color-scheme
از آنجا که هر دو برچسب متا و خاصیت CSS (در صورت استفاده از عنصر :root
) در نهایت منجر به یک رفتار یکسان می شوند ، من همیشه توصیه می کنم طرح رنگ را از طریق برچسب متا مشخص کنید ، بنابراین مرورگر می تواند سریعتر به طرح ترجیحی اتخاذ کند.
در حالی که برای صفحات اولیه مطلق ، هیچ قانون CSS اضافی لازم نیست ، در حالت کلی شما همیشه باید color-scheme
با prefers-color-scheme
ترکیب کنید. به عنوان مثال ، WebKit CSS اختصاصی CSS Color -webkit-link
، مورد استفاده WebKit و Chrome برای لینک کلاسیک Blue rgb(0,0,238)
، نسبت کنتراست کافی از 2.23: 1 را در پس زمینه سیاه ندارد و هر دو WCAG AA را شکست می دهد . و همچنین الزامات WCAG AAA.
من اشکالات مربوط به Chrome ، WebKit و Firefox و همچنین یک مسئله متا را در استاندارد HTML باز کرده ام تا این مشکل را برطرف کنم.
تعامل با prefers-color-scheme
تعامل خاصیت CSS color-scheme
و برچسب متا مربوطه با ویژگی رسانه ترجیح کاربر prefers-color-scheme
در ابتدا ممکن است گیج کننده به نظر برسد. در واقع ، آنها واقعاً خوب بازی می کنند. مهمترین چیز برای درک این است که color-scheme
به طور انحصاری ظاهر پیش فرض را تعیین می کند ، در حالی که prefers-color-scheme
ظاهر سبک را تعیین می کند. برای روشن تر کردن این صفحه ، صفحه زیر را فرض کنید:
<head>
<meta name="color-scheme" content="dark light">
<style>
fieldset {
background-color: gainsboro;
}
@media (prefers-color-scheme: dark) {
fieldset {
background-color: darkslategray;
}
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, legere ancillae ne vis.
</p>
<form>
<fieldset>
<legend>Lorem ipsum</legend>
<button type="button">Lorem ipsum</button>
</fieldset>
</form>
</body>
کد CSS درون خطی در صفحه background-color
<fieldset>
را به gainsboro
در مورد کلی تنظیم می کند ، و اگر کاربر یک طرح رنگ dark
را مطابق با ویژگی رسانه ترجیح کاربر ترجیح prefers-color-scheme
به darkslategray
می پردازد.
از طریق عنصر <meta name="color-scheme" content="dark light">
، صفحه به مرورگر می گوید که از یک موضوع تاریک و سبک پشتیبانی می کند ، با اولویت برای یک موضوع تاریک.
بسته به اینکه سیستم عامل روی حالت تاریک یا نور تنظیم شده باشد ، کل صفحه بر اساس شیوه نامه عامل کاربر ، سبک در تاریکی یا برعکس ظاهر می شود. هیچ CSS ارائه شده اضافی برای تغییر متن پاراگراف یا رنگ پس زمینه صفحه وجود ندارد .
توجه داشته باشید که پس از قوانین موجود در صفحه شیوه درون خطی ارائه شده در صفحه ، چگونه تغییر background-color
<fieldset>
بر اساس اینکه آیا حالت تاریک فعال است ، چگونه تغییر می کند. این یا gainsboro
یا darkslategray
است.
ظاهر عنصر <button>
توسط صفحه شیوه کاربر کاربر کنترل می شود. color
آن روی رنگ سیستم ButtonText
تنظیم شده است ، و background-color
آن و چهار border-color
ButtonFace
رنگ سیستم تنظیم شده است.
حال توجه داشته باشید که چگونه رنگ مرزی <button>
border-color
تغییر می کند. مقدار محاسبه شده برای سوئیچ های border-top-color
و border-bottom-color
از rgba(0, 0, 0, 0.847)
(سیاه و سفید) به rgba(255, 255, 255, 0.847)
(سفید) ، زیرا کاربر به روزرسانی های عامل ButtonFace
صورت پویا بر اساس طرح رنگ. همین مورد برای color
عنصر <button>
که روی سیستم مربوطه رنگ ButtonText
تنظیم شده است ، صدق می کند.
نسخه ی نمایشی
می توانید اثرات color-scheme
که برای تعداد زیادی از عناصر HTML در نسخه ی نمایشی روی Glitch اعمال شده است ، مشاهده کنید. نسخه ی نمایشی عمداً نقض WCAG AA و WCAG AAA را با رنگ های پیوند ذکر شده در هشدار فوق نشان می دهد.
قدردانی
خاصیت CSS color-scheme
و برچسب متا مربوطه توسط Rune Lillesveen اجرا شد. Rune همچنین یک ویرایشگر از مشخصات ماژول تنظیم رنگ CSS سطح 1 است. تصویر قهرمان توسط فیلیپ لئون در Unsplash .