Summarize this content to 400 words in Persian Lang
TLDR: انجمن تم های VSCode اکنون از آن استفاده می کند OKLCH colorspace در الگوریتم تولید رنگ های منطبق برای تصادفی سازی و دستکاری رنگ ها و همچنین دارای یک انتخابگر رنگ oklch برای تنظیم رنگ های تم ایجاد شده استفاده می شود.
می‌توانید به انجمن تم‌های VSCODE نگاهی بیاندازید یا مستقیماً به کد موجود در مخزن GitHub بروید.
دیر کشف
می دانم که oklch colorspace چندان جدید نیست، اما زمانی که من شروع به توسعه انجمن تم های VSCode کردم کاملاً از وجود آن بی اطلاع بودم. فقط چند هفته پیش بود که متوجه شدم و شروع به خواندن مقالات زیادی در مورد آن کردم و از تمام مزایایی که می‌توانست همراه با تغییر فضای رنگ در الگوریتم و خود برنامه باشد آگاه شدم.
در فضای رنگی oklch رنگ با نشان داده می شود
L برای سبکی ادراکی.
C برای رنگ نشان دهنده شدت رنگی، با مقادیر 0 (آکروماتیک) بدون حد بالایی، اما در عمل از 0.5+ تجاوز نمی کند. CSS +0.4 را به عنوان 100% در نظر می گیرد.
H برای زاویه رنگ در یک چرخ رنگ که معمولاً با درجه اعشار نشان داده می شود.
روشنایی ادراکی نه تنها انتخاب آسان رنگ‌ها را با روشنایی یکنواخت برای رنگ‌های مختلف امکان‌پذیر می‌سازد، بلکه امکان دستکاری روشنایی و رنگ رنگ‌ها را بدون هیچ تغییری در پارامتر رنگ فراهم می‌کند، که برای استفاده در الگوریتم تولید رنگ عالی است.
پس از اینکه الگوریتم مجموعه ای از رنگ ها را با استفاده از رنگ پایه انتخاب شده و طرح رنگ/الگوی هندسه مقدس ایجاد کرد، رنگ های موضوع به طور تصادفی بر اساس این رنگ ها با تغییرات روشنایی و رنگی تولید می شوند.
با استفاده از فضای رنگی oklch، می‌توان تمام رنگ‌های مشتق‌شده از طرح رنگ انتخابی را دست نخورده نگه داشت، حتی پس از تمام دستکاری‌های روشنایی و رنگی که برای اطمینان از حداقل کنتراست بین رنگ‌های پس‌زمینه و رنگ‌هایی که به عنوان پیش‌زمینه استفاده می‌شوند، دست نخورده باقی ماند.
حتی پس از آن، زمانی که نیاز یا اراده ای برای تغییر هر یک از رنگ ها وجود دارد، با استفاده از انتخابگر رنگ جدید oklch نه تنها می توان رنگ و روشنایی را بدون تغییر رنگ تنظیم کرد، بلکه می توان با حفظ روشنایی ادراکی، رنگ را تغییر داد. رنگ انتخاب شده بدون تغییر
پس از همه آنچه گفته شد من فقط یک انتخاب دارم، مهاجرت برنامه.
انتقال کد
با خواندن چند مقاله در مورد مشخصات فضای رنگی css، در مورد Culori، یک کتابخانه دستکاری رنگ بسیار کامل و دقیق برای تایپ اسکریپت که فضای رنگی oklch را پیاده سازی می کند، آشنا شدم.
تغییر همه عملکردها و روش هایی که از یک کتابخانه قدیمی دستکاری رنگ استفاده می کردند، کار سختی نبود. برخی از بخش‌های الگوریتم حتی تمیزتر شده و نگهداری و درک آن آسان‌تر است.
پس از انتقال کد، من شروع به جستجوی یک جزء انتخابگر رنگ کردم، اما نتوانستم چیزی را پیدا کنم که بتواند با نیازهای برنامه من مطابقت داشته باشد، باید از Svelte 5 استفاده کند، گزینه استفاده از فضای رنگی oklch و ادغام با رابط کاربری فعلی را داشته باشد. بر اساس اجزای shadcn-svelte.
در میانه این ناامیدی، من با این کار بزرگ از EvilMartians در oklch.com مواجه شدم که منبع باز و حداقل برای من بسیار پیچیده است. پس از چند ساعت گذراندن در مخزن GitHub آنها و نگاه کردن به انتخابگر رنگ در صفحه وب آنها، تصمیم گرفتم آن را امتحان کنم، پیاده سازی خودم را با استفاده از Svelte 5 و اجزای shadcn-svelte توسعه دهم.
من تمام تلاشم را برای توسعه یک جزء قابل استفاده مجدد نکردم، اما اکنون به ساخت یک بسته Svelte 5 از آن فکر می کنم. اما من پرت شدم، به ماجراجویی خود برگشتم، برخی از پس‌زمینه‌های لغزنده را سفارشی کردم تا با تغییر گزینه‌های L، C، H و Alpha به‌صورت پویا به‌روزرسانی شوند.
یک وب‌کار را برای محاسبه رنگ‌های پیکسل برای نقشه‌های دوبعدی پویا برای هر لغزنده پیاده‌سازی کرد، با کمک Culori، تولید گرادیان‌ها برای نمایش دقیق فضای رنگی oklch دشوار نبود.
و در آنجا … یک انتخابگر رنگ oklch کاربردی بود که می توانست نیازهای پشته فعلی من را برآورده کند.
از آنجایی که قبلاً دست هایم کثیف بود، با دوست ارزشمندم کلود 3.5 صحبت کردم تا از او بپرسم که آیا او چند الگوی هندسی مقدس دیگر دارد که می تواند به عنوان طرح های رنگی برای افزودن به لیست طولانی از الگوها/طرح ها استفاده شود. . این بار کلود تلاش‌ها را اندازه‌گیری نکرد و بیش از صدها هندسه مقدس جدید، فیزیک کوانتومی مدرن و برخی معادلات ریاضی دیگر را که می‌توانستند به‌عنوان الگوها/طرح‌های رنگی در الگوریتم ادغام کنند، «تپ» کرد.
نتیجه
این در انجمن تم های VSCode به صورت زنده است و می توانید کد را در مخزن Github بررسی کنید.
لطفاً، مانند همیشه، هر نوع بازخورد و/یا پیشنهادی را در نظرات ارائه دهید یا مشکلی را در مخزن ثبت کنید. بسیار خوشحال می شوم نظرات شما را بشنوم.
از خواندن شما بسیار سپاسگزارم و امیدوارم در مطلب بعدی شما را ببینم!
TLDR: انجمن تم های VSCode اکنون از آن استفاده می کند OKLCH colorspace در الگوریتم تولید رنگ های منطبق برای تصادفی سازی و دستکاری رنگ ها و همچنین دارای یک انتخابگر رنگ oklch برای تنظیم رنگ های تم ایجاد شده استفاده می شود.
می‌توانید به انجمن تم‌های VSCODE نگاهی بیاندازید یا مستقیماً به کد موجود در مخزن GitHub بروید.
دیر کشف
می دانم که oklch colorspace چندان جدید نیست، اما زمانی که من شروع به توسعه انجمن تم های VSCode کردم کاملاً از وجود آن بی اطلاع بودم. فقط چند هفته پیش بود که متوجه شدم و شروع به خواندن مقالات زیادی در مورد آن کردم و از تمام مزایایی که می‌توانست همراه با تغییر فضای رنگ در الگوریتم و خود برنامه باشد آگاه شدم.
در فضای رنگی oklch رنگ با نشان داده می شود
- L برای سبکی ادراکی.
- C برای رنگ نشان دهنده شدت رنگی، با مقادیر 0 (آکروماتیک) بدون حد بالایی، اما در عمل از 0.5+ تجاوز نمی کند. CSS +0.4 را به عنوان 100% در نظر می گیرد.
- H برای زاویه رنگ در یک چرخ رنگ که معمولاً با درجه اعشار نشان داده می شود.
روشنایی ادراکی نه تنها انتخاب آسان رنگ‌ها را با روشنایی یکنواخت برای رنگ‌های مختلف امکان‌پذیر می‌سازد، بلکه امکان دستکاری روشنایی و رنگ رنگ‌ها را بدون هیچ تغییری در پارامتر رنگ فراهم می‌کند، که برای استفاده در الگوریتم تولید رنگ عالی است.
پس از اینکه الگوریتم مجموعه ای از رنگ ها را با استفاده از رنگ پایه انتخاب شده و طرح رنگ/الگوی هندسه مقدس ایجاد کرد، رنگ های موضوع به طور تصادفی بر اساس این رنگ ها با تغییرات روشنایی و رنگی تولید می شوند.
با استفاده از فضای رنگی oklch، می‌توان تمام رنگ‌های مشتق‌شده از طرح رنگ انتخابی را دست نخورده نگه داشت، حتی پس از تمام دستکاری‌های روشنایی و رنگی که برای اطمینان از حداقل کنتراست بین رنگ‌های پس‌زمینه و رنگ‌هایی که به عنوان پیش‌زمینه استفاده می‌شوند، دست نخورده باقی ماند.
حتی پس از آن، زمانی که نیاز یا اراده ای برای تغییر هر یک از رنگ ها وجود دارد، با استفاده از انتخابگر رنگ جدید oklch نه تنها می توان رنگ و روشنایی را بدون تغییر رنگ تنظیم کرد، بلکه می توان با حفظ روشنایی ادراکی، رنگ را تغییر داد. رنگ انتخاب شده بدون تغییر
پس از همه آنچه گفته شد من فقط یک انتخاب دارم، مهاجرت برنامه.
انتقال کد
با خواندن چند مقاله در مورد مشخصات فضای رنگی css، در مورد Culori، یک کتابخانه دستکاری رنگ بسیار کامل و دقیق برای تایپ اسکریپت که فضای رنگی oklch را پیاده سازی می کند، آشنا شدم.
تغییر همه عملکردها و روش هایی که از یک کتابخانه قدیمی دستکاری رنگ استفاده می کردند، کار سختی نبود. برخی از بخش‌های الگوریتم حتی تمیزتر شده و نگهداری و درک آن آسان‌تر است.
پس از انتقال کد، من شروع به جستجوی یک جزء انتخابگر رنگ کردم، اما نتوانستم چیزی را پیدا کنم که بتواند با نیازهای برنامه من مطابقت داشته باشد، باید از Svelte 5 استفاده کند، گزینه استفاده از فضای رنگی oklch و ادغام با رابط کاربری فعلی را داشته باشد. بر اساس اجزای shadcn-svelte.
در میانه این ناامیدی، من با این کار بزرگ از EvilMartians در oklch.com مواجه شدم که منبع باز و حداقل برای من بسیار پیچیده است.
پس از چند ساعت گذراندن در مخزن GitHub آنها و نگاه کردن به انتخابگر رنگ در صفحه وب آنها، تصمیم گرفتم آن را امتحان کنم، پیاده سازی خودم را با استفاده از Svelte 5 و اجزای shadcn-svelte توسعه دهم.
من تمام تلاشم را برای توسعه یک جزء قابل استفاده مجدد نکردم، اما اکنون به ساخت یک بسته Svelte 5 از آن فکر می کنم. اما من پرت شدم، به ماجراجویی خود برگشتم، برخی از پس‌زمینه‌های لغزنده را سفارشی کردم تا با تغییر گزینه‌های L، C، H و Alpha به‌صورت پویا به‌روزرسانی شوند.
یک وب‌کار را برای محاسبه رنگ‌های پیکسل برای نقشه‌های دوبعدی پویا برای هر لغزنده پیاده‌سازی کرد، با کمک Culori، تولید گرادیان‌ها برای نمایش دقیق فضای رنگی oklch دشوار نبود.
و در آنجا … یک انتخابگر رنگ oklch کاربردی بود که می توانست نیازهای پشته فعلی من را برآورده کند.
از آنجایی که قبلاً دست هایم کثیف بود، با دوست ارزشمندم کلود 3.5 صحبت کردم تا از او بپرسم که آیا او چند الگوی هندسی مقدس دیگر دارد که می تواند به عنوان طرح های رنگی برای افزودن به لیست طولانی از الگوها/طرح ها استفاده شود. . این بار کلود تلاش‌ها را اندازه‌گیری نکرد و بیش از صدها هندسه مقدس جدید، فیزیک کوانتومی مدرن و برخی معادلات ریاضی دیگر را که می‌توانستند به‌عنوان الگوها/طرح‌های رنگی در الگوریتم ادغام کنند، «تپ» کرد.
نتیجه
این در انجمن تم های VSCode به صورت زنده است و می توانید کد را در مخزن Github بررسی کنید.
لطفاً، مانند همیشه، هر نوع بازخورد و/یا پیشنهادی را در نظرات ارائه دهید یا مشکلی را در مخزن ثبت کنید. بسیار خوشحال می شوم نظرات شما را بشنوم.
از خواندن شما بسیار سپاسگزارم و امیدوارم در مطلب بعدی شما را ببینم!
