تصاویر را به حالت روشن/تاریک در GitHub پاسخگو کنید

معرفی

سلام، امروز می‌خواهم چیزی را با شما به اشتراک بگذارم که اخیراً در README‌هایم از آن استفاده کرده‌ام تا تصاویرم در حالت‌های روشن یا تاریک پاسخگو باشند. این یک ویژگی بسیار ساده در GitHub است اما افراد زیادی در مورد آن نمی دانند.

تظاهرات

در اینجا نتیجه ردیاب جدید پروژه منبع باز من است

نحوه استفاده از آن

برای استفاده از این ویژگی، باید دو تصویر یا URL داشته باشید که به نسخه‌های روشن و تاریک تصویر شما اشاره می‌کنند. در مثالم موارد زیر را داشتم:

.github/
├── demo-dark.png
├── demo-light.png

با مارک داون

اگر ترجیح می دهید تصاویر خود را با Markdown تنها کاری که باید انجام دهید این است که ضمیمه کنید #gh-dark-mode-only یا #gh-light-mode-only در انتهای URL مثل این:

![Demo-Light](.github/demo-dark.png#gh-dark-mode-only)
![Demo-Dark](.github/demo-light.png#gh-light-mode-only)

با HTML

یا می توانید از آن استفاده کنید <picture /> با جدید تگ کنید media ویژگی، تعیین مقدار (prefers-color-scheme: dark) یا (prefers-color-scheme: light) مثل این:

<picture>
  <source
    srcset=".github/demo-dark.png"
    media="(prefers-color-scheme: dark)"
  />
  <source
    srcset=".github/demo-light.png"
    media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  />
  <img src=".github/demo-light.png" />
</picture>

منابع

من به تنهایی متوجه این موضوع نشدم، اولین باری که در مورد این ویژگی از طریق پروژه github-readme-stats یاد گرفتم، در بخش پاسخگو-کارت-موضوع، نمونه هایی را نشان داد که در نمایه خود README و استفاده کرده ام. من همچنین از مخازن نیز استفاده کرده ام.

تصویر جلد استفاده شده متعلق به لینک اول زیر است.

لینک های مفید:

سوالات

• آیا قبلاً این ویژگی را دیده اید؟
• آیا تا به حال از این استفاده کرده اید؟
• آیا برنامه ای برای اعمال این ویژگی در جایی دارید؟