استایل پیش‌فرض حالت تاریک با ویژگی CSS طرح رنگ و متا تگ مربوطه بهبود یافته است

ویژگی CSS color-scheme و متا تگ مربوطه به توسعه دهندگان این امکان را می دهد که صفحات خود را به پیش فرض های موضوعی خاص از شیوه نامه عامل کاربر انتخاب کنند.

Thomas Steiner

پس زمینه

ویژگی رسانه ترجیحی کاربر prefers-color-scheme

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

یکی از قطعات پازلی که در مقاله به طور خلاصه به آن اشاره شد، ویژگی CSS color-scheme و متا تگ مربوطه به همین نام است. هر دوی آنها زندگی شما را به‌عنوان یک توسعه‌دهنده آسان‌تر می‌کنند و به شما اجازه می‌دهند صفحه خود را در پیش‌فرض‌های موضوعی خاص از شیوه نامه عامل کاربر انتخاب کنید، مانند، برای مثال، کنترل‌های فرم، نوارهای اسکرول، و همچنین رنگ‌های سیستم CSS. در عین حال، این ویژگی باعث می شود مرورگرها نتوانند هر گونه تغییری را به تنهایی اعمال کنند.

پشتیبانی از مرورگر

prefers-color-scheme

پشتیبانی مرورگر

• 76
• 79
• 67
• 12.1

منبع

color-scheme

پشتیبانی مرورگر

• 81
• 81
• 96
• 13

منبع

شیوه نامه عامل کاربر

قبل از ادامه، اجازه دهید به طور مختصر توضیح دهم که شیوه نامه عامل کاربر چیست. در بیشتر مواقع، می‌توانید کلمه کاربر (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 با رنگ های پس زمینه تیره و رنگ های پیش زمینه روشن، مخالف را نشان می دهد.

برای همه عناصر، رندر کردن با یک طرح رنگ باید باعث شود که رنگ‌های استفاده شده در تمام رابط‌های کاربری ارائه‌شده توسط مرورگر برای عنصر با هدف طرح رنگ مطابقت داشته باشند. به عنوان مثال می توان به نوارهای اسکرول، زیر خط های بررسی املا، کنترل های فرم و غیره اشاره کرد.

توجه: ویژگی color-scheme CSS را می توان هم در سطح :root و هم در سطح هر عنصر جداگانه استفاده کرد.

در عنصر :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 است.

حالت نور: سبک های مشخص شده توسط توسعه دهنده و عامل کاربر. متن سیاه و سفید است و پس‌زمینه طبق شیوه نامه عامل کاربر سفید است. background-color عنصر <fieldset> طبق شیوه نامه توسعه‌دهنده خط‌دار، gainsboro است.

حالت تاریک: سبک های مشخص شده توسط توسعه دهنده و عامل کاربر. متن به رنگ سفید و پس‌زمینه سیاه است، مطابق با شیوه نامه عامل کاربر. background-color عنصر <fieldset> طبق شیوه نامه توسعه‌دهنده خط‌دار، darkslategray است.

ظاهر عنصر <button> توسط شیوه نامه عامل کاربر کنترل می شود. color آن روی رنگ سیستم ButtonText و background-color و چهار border-color آن روی رنگ سیستم ButtonFace تنظیم می‌شود.

حالت نور: 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 صدق می کند.

حالت نور: مقادیر محاسبه شده border-top-color و border-bottom-color که هر دو روی ButtonFace در شیوه نامه عامل کاربر تنظیم شده اند، اکنون rgba(0, 0, 0, 0.847) هستند.

حالت تاریک: مقادیر محاسبه‌شده border-top-color و border-bottom-color که هر دو روی ButtonFace در شیوه نامه عامل کاربر تنظیم شده‌اند، اکنون rgba(255, 255, 255, 0.847) .

نسخه ی نمایشی

می‌توانید جلوه‌های color-scheme اعمال شده روی تعداد زیادی از عناصر HTML را در یک نسخه نمایشی در Glitch مشاهده کنید. دمو عمداً نقض WCAG AA و WCAG AAA را با رنگ های پیوند ذکر شده در هشدار بالا نشان می دهد.

نسخه آزمایشی به color-scheme: light .

نسخه آزمایشی به color-scheme: dark . به نقض WCAG AA و WCAG AAA با رنگ های پیوند توجه کنید.

قدردانی

ویژگی CSS color-scheme و متا تگ مربوطه توسط Rune Lillesveen پیاده سازی شد. Rune همچنین یکی از ویرایشگرهای CSS Color Adjustment Module Level 1 است. تصویر قهرمان توسط فیلیپ لئونه در Unsplash .

،

ویژگی CSS color-scheme و متا تگ مربوطه به توسعه دهندگان این امکان را می دهد که صفحات خود را به پیش فرض های موضوعی خاص از شیوه نامه عامل کاربر انتخاب کنند.

Thomas Steiner

پس زمینه

ویژگی رسانه ترجیحی کاربر prefers-color-scheme

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

یکی از قطعات پازلی که در مقاله به طور خلاصه به آن اشاره شد، ویژگی CSS color-scheme و متا تگ مربوطه به همین نام است. هر دوی آنها زندگی شما را به‌عنوان یک توسعه‌دهنده آسان‌تر می‌کنند و به شما اجازه می‌دهند صفحه خود را در پیش‌فرض‌های موضوعی خاص از شیوه نامه عامل کاربر انتخاب کنید، مانند، برای مثال، کنترل‌های فرم، نوارهای اسکرول، و همچنین رنگ‌های سیستم CSS. در عین حال، این ویژگی باعث می شود مرورگرها نتوانند هر گونه تغییری را به تنهایی اعمال کنند.

پشتیبانی از مرورگر

prefers-color-scheme

پشتیبانی مرورگر

• 76
• 79
• 67
• 12.1

منبع

color-scheme

پشتیبانی مرورگر

• 81
• 81
• 96
• 13

منبع

شیوه نامه عامل کاربر

قبل از ادامه، اجازه دهید به طور مختصر توضیح دهم که شیوه نامه عامل کاربر چیست. در بیشتر مواقع، می‌توانید کلمه کاربر (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 با رنگ های پس زمینه تیره و رنگ های پیش زمینه روشن، مخالف را نشان می دهد.

برای همه عناصر، رندر کردن با یک طرح رنگ باید باعث شود که رنگ‌های استفاده شده در تمام رابط‌های کاربری ارائه‌شده توسط مرورگر برای عنصر با هدف طرح رنگ مطابقت داشته باشند. به عنوان مثال می توان به نوارهای اسکرول، زیر خط های بررسی املا، کنترل های فرم و غیره اشاره کرد.

توجه: ویژگی color-scheme CSS را می توان هم در سطح :root و هم در سطح هر عنصر جداگانه استفاده کرد.

در عنصر :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 است.

حالت نور: سبک های مشخص شده توسط توسعه دهنده و عامل کاربر. متن سیاه و سفید است و پس‌زمینه طبق شیوه نامه عامل کاربر سفید است. background-color عنصر <fieldset> طبق شیوه نامه توسعه‌دهنده خط‌دار، gainsboro است.

حالت تاریک: سبک های مشخص شده توسط توسعه دهنده و عامل کاربر. متن به رنگ سفید و پس‌زمینه سیاه است، مطابق با شیوه نامه عامل کاربر. background-color عنصر <fieldset> طبق شیوه نامه توسعه‌دهنده خط‌دار، darkslategray است.

ظاهر عنصر <button> توسط شیوه نامه عامل کاربر کنترل می شود. color آن روی رنگ سیستم ButtonText و background-color و چهار border-color آن روی رنگ سیستم ButtonFace تنظیم می‌شود.

حالت نور: 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 صدق می کند.

حالت نور: مقادیر محاسبه شده border-top-color و border-bottom-color که هر دو روی ButtonFace در شیوه نامه عامل کاربر تنظیم شده اند، اکنون rgba(0, 0, 0, 0.847) هستند.

حالت تاریک: مقادیر محاسبه‌شده border-top-color و border-bottom-color که هر دو روی ButtonFace در شیوه نامه عامل کاربر تنظیم شده‌اند، اکنون rgba(255, 255, 255, 0.847) .

نسخه ی نمایشی

می‌توانید جلوه‌های color-scheme اعمال شده روی تعداد زیادی از عناصر HTML را در یک نسخه نمایشی در Glitch مشاهده کنید. دمو عمداً نقض WCAG AA و WCAG AAA را با رنگ های پیوند ذکر شده در هشدار بالا نشان می دهد.

نسخه آزمایشی به color-scheme: light .

نسخه آزمایشی به color-scheme: dark . به نقض WCAG AA و WCAG AAA با رنگ های پیوند توجه کنید.

قدردانی

ویژگی CSS color-scheme و متا تگ مربوطه توسط Rune Lillesveen پیاده سازی شد. Rune همچنین یکی از ویرایشگرهای CSS Color Adjustment Module Level 1 است. تصویر قهرمان توسط فیلیپ لئونه در Unsplash .

،

ویژگی CSS color-scheme و متا تگ مربوطه به توسعه دهندگان این امکان را می دهد که صفحات خود را به پیش فرض های موضوعی خاص از شیوه نامه عامل کاربر انتخاب کنند.

Thomas Steiner

پس زمینه

ویژگی رسانه ترجیحی کاربر prefers-color-scheme

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

یکی از قطعات پازلی که در مقاله به طور خلاصه به آن اشاره شد، ویژگی CSS color-scheme و متا تگ مربوطه به همین نام است. هر دوی آنها زندگی شما را به‌عنوان یک توسعه‌دهنده آسان‌تر می‌کنند و به شما اجازه می‌دهند صفحه خود را در پیش‌فرض‌های موضوعی خاص از شیوه نامه عامل کاربر انتخاب کنید، مانند، برای مثال، کنترل‌های فرم، نوارهای اسکرول، و همچنین رنگ‌های سیستم CSS. در عین حال، این ویژگی باعث می شود مرورگرها نتوانند هر گونه تغییری را به تنهایی اعمال کنند.

پشتیبانی از مرورگر

prefers-color-scheme

پشتیبانی مرورگر

• 76
• 79
• 67
• 12.1

منبع

color-scheme

پشتیبانی مرورگر

• 81
• 81
• 96
• 13

منبع

شیوه نامه عامل کاربر

قبل از ادامه، اجازه دهید به طور مختصر توضیح دهم که شیوه نامه عامل کاربر چیست. در بیشتر مواقع، می‌توانید کلمه کاربر (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 با رنگ های پس زمینه تیره و رنگ های پیش زمینه روشن، مخالف را نشان می دهد.

برای همه عناصر، رندر کردن با یک طرح رنگ باید باعث شود که رنگ‌های استفاده شده در تمام رابط‌های کاربری ارائه‌شده توسط مرورگر برای عنصر با هدف طرح رنگ مطابقت داشته باشند. به عنوان مثال می توان به نوارهای اسکرول، زیر خط های بررسی املا، کنترل های فرم و غیره اشاره کرد.

توجه: ویژگی color-scheme CSS را می توان هم در سطح :root و هم در سطح هر عنصر جداگانه استفاده کرد.

در عنصر :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 است.

حالت نور: سبک های مشخص شده توسط توسعه دهنده و عامل کاربر. متن سیاه و سفید است و پس‌زمینه طبق شیوه نامه عامل کاربر سفید است. background-color عنصر <fieldset> طبق شیوه نامه توسعه‌دهنده خط‌دار، gainsboro است.

حالت تاریک: سبک های مشخص شده توسط توسعه دهنده و عامل کاربر. متن به رنگ سفید و پس‌زمینه سیاه است، مطابق با شیوه نامه عامل کاربر. background-color عنصر <fieldset> طبق شیوه نامه توسعه‌دهنده خط‌دار، darkslategray است.

ظاهر عنصر <button> توسط شیوه نامه عامل کاربر کنترل می شود. color آن روی رنگ سیستم ButtonText و background-color و چهار border-color آن روی رنگ سیستم ButtonFace تنظیم می‌شود.

حالت نور: 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 صدق می کند.

حالت نور: مقادیر محاسبه شده border-top-color و border-bottom-color که هر دو روی ButtonFace در شیوه نامه عامل کاربر تنظیم شده اند، اکنون rgba(0, 0, 0, 0.847) هستند.

حالت تاریک: مقادیر محاسبه‌شده border-top-color و border-bottom-color که هر دو روی ButtonFace در شیوه نامه عامل کاربر تنظیم شده‌اند، اکنون rgba(255, 255, 255, 0.847) .

نسخه ی نمایشی

می‌توانید جلوه‌های color-scheme اعمال شده روی تعداد زیادی از عناصر HTML را در یک نسخه نمایشی در Glitch مشاهده کنید. دمو عمداً نقض WCAG AA و WCAG AAA را با رنگ های پیوند ذکر شده در هشدار بالا نشان می دهد.

نسخه آزمایشی به color-scheme: light .

نسخه آزمایشی به color-scheme: dark . به نقض WCAG AA و WCAG AAA با رنگ های پیوند توجه کنید.

قدردانی

ویژگی CSS color-scheme و متا تگ مربوطه توسط Rune Lillesveen پیاده سازی شد. Rune همچنین یکی از ویرایشگرهای CSS Color Adjustment Module Level 1 است. تصویر قهرمان توسط فیلیپ لئونه در Unsplash .

،

خاصیت CSS color-scheme و برچسب متا مربوطه به توسعه دهندگان این امکان را می دهد تا صفحات خود را به پیش فرض های خاص موضوع از صفحه شیوه کاربر انتخاب کنند.

Thomas Steiner

پس زمینه

ویژگی رسانه ترجیح کاربر prefers-color-scheme

ویژگی رسانه ترجیح کاربر prefers-color-scheme ، به توسعه دهندگان کنترل کامل بر ظاهر صفحات خود را می دهد. اگر با آن ناآشنا هستید ، لطفاً مقاله من را بخوانید prefers-color-scheme : سلام تاریکی ، دوست قدیمی من ، جایی که من همه چیز را در مورد ایجاد تجربیات شگفت انگیز حالت تاریک مستند کردم.

یک قطعه پازل که فقط در مقاله به طور خلاصه ذکر شده است ، ویژگی CSS color-scheme و برچسب متا مربوطه با همین نام است. آنها هر دو زندگی شما را به عنوان یک توسعه دهنده آسانتر می کنند با این امکان که به شما امکان می دهد صفحه خود را به پیش فرض های خاص موضوع از صفحه شیوه کاربر ، مانند مثال ، کنترل فرم ، میله های پیمایش و همچنین رنگ های سیستم CSS انتخاب کنید. در عین حال ، این ویژگی مانع از مرورگرها از اعمال هرگونه تحول به تنهایی می شود.

پشتیبانی از مرورگر

prefers-color-scheme

پشتیبانی مرورگر

• 76
• 79
• 67
• 12.1

منبع

color-scheme

پشتیبانی مرورگر

• 81
• 81
• 96
• 13

منبع

برگه شیوه کاربر کاربر

قبل از ادامه ، اجازه دهید به طور خلاصه توضیح دهم که یک صفحه شیوه کاربر کاربر چیست. بیشتر اوقات ، شما می توانید به کلمه کاربر (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 ارائه شده توسط مرورگر شود تا این عنصر با هدف طرح رنگ مطابقت داشته باشد. مثالها میله های پیمایش ، تأکیدات طلسم ، کنترل فرم و غیره است.

توجه: خاصیت CSS color-scheme می تواند در هر دو سطح :root و همچنین در سطح هر عنصر فرد استفاده شود.

در :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 است.

حالت نور: سبک های مشخص شده توسط توسعه دهنده و عامل کاربر. متن سیاه است و پس زمینه مطابق با صفحه شیوه کاربر کاربر سفید است. پس زمینه <fieldset> background-color gainsboro مطابق با شیوه نامه توسعه دهنده داخلی است.

حالت تاریک: سبک های مشخص شده توسط توسعه دهنده و عامل کاربر. متن سفید است و پس زمینه مطابق با صفحه شیوه کاربر کاربر سیاه است. background-color <fieldset> رنگ darkslategray مطابق با شیوه نامه توسعه دهنده داخلی است.

ظاهر عنصر <button> توسط صفحه شیوه کاربر کاربر کنترل می شود. color آن روی رنگ سیستم ButtonText تنظیم شده است ، و background-color آن و چهار border-color ButtonFace رنگ سیستم تنظیم شده است.

حالت نور: background-color و border-color روی رنگ سیستم دکمه تنظیم شده است.

حال توجه داشته باشید که چگونه رنگ مرزی <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 تنظیم شده است ، صدق می کند.

حالت نور: مقادیر محاسبه شده از border-top-color و border-bottom-color که هر دو روی ButtonFace در صفحه شیوه کاربر تنظیم شده اند ، اکنون rgba(0, 0, 0, 0.847) .

حالت تاریک: مقادیر محاسبه شده از border-top-color و border-bottom-color که هر دو روی ButtonFace در صفحه شیوه کاربر تنظیم شده اند ، اکنون rgba(255, 255, 255, 0.847) .

نسخه ی نمایشی

می توانید اثرات color-scheme که برای تعداد زیادی از عناصر HTML در نسخه ی نمایشی روی Glitch اعمال شده است ، مشاهده کنید. نسخه ی نمایشی عمداً نقض WCAG AA و WCAG AAA را با رنگ های پیوند ذکر شده در هشدار فوق نشان می دهد.

نسخه ی نمایشی به color-scheme: light .

نسخه ی نمایشی به color-scheme: dark . به نقض WCAG AA و WCAG AAA با رنگ های پیوند توجه داشته باشید.

قدردانی

خاصیت CSS color-scheme و برچسب متا مربوطه توسط Rune Lillesveen اجرا شد. Rune همچنین یک ویرایشگر از مشخصات ماژول تنظیم رنگ CSS سطح 1 است. تصویر قهرمان توسط فیلیپ لئون در Unsplash .