دسته رنگها

برای استفاده از دسته رنگهای تعریف شده در برنامه میتوانید از کلاسهای مربوطه استفاده کنید.

دسته رنگها به تنهایی تغییری در ظاهر ایجاد نمیکنند، آنها فقط متغیرهای css را مقدار دهی کرده و در استایل مورد نظر میتوانید از این مقدارها استفاده کنید.

در زیر جدول کلاسها به همراه رنگهای استفاده شده در آن نمایش داده شده است.

تم ها روی زمینه روشن

تم ها روی زمینه تیره

ورودی صحیح، خطا و هشداری

متغیرهای رنگی

در صورتی که یک دسته رنگ را نسبت میدهید، این دسته رنگ به صورت خودکار متغیرهای زیر را مقدار دهی خواهد کرد.

ساختار نام گذاری بدین صورت است که ابتدا نام متغییر با --current شروع شده و پس از آن نام دسته مورد نظر آورده میشود، مانند -normal، -select و... که در جدول بالا یک ستون به آن اختصاص داده شده است. پس از آن عنوان خصوصیت رنگی آورده میشود که به شرح زیر میباشد.

این 5 نام رنگی، برای هر دسته رنگی تکرار میشود، پس در نهایت شما 55 تنوع رنگی برای امور مختلف خواهید داشت.

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

    <div class="primary" style="background-color:var(--normal-back);">
        Test
    </div>

بدیهی است زمانیکه میخواهید در css استفاده کنید فقط کافیست مقداری که درون style نوشته اید را درون کلاس css خود بنویسید.

نام دسته رنگها

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

اگر تمایل به استفاده از کلاس دور خط دارید، عبارت outline را بعد از فراخوانی کلاس رنگ خود استفاده کنید.

    <button class="primary">Test</button>
    <button class="primary outline">Test</button>

کلاسهای مقدار مستقیم

اگر بخواهید به طور مستقیم مقدار پس زمینه و رنگ متن یک کادر را بدون استفاده از متغییرها انجام دهید کافیست در انتهای نام دسته رنگی عبارت -color را اضافه کنید. مانند primary-color

اگر بخواهید به طور مستقیم مقدار رنگ متن که با رنگ پس زمینه دسته انتخاب شده یکی است را بدون استفاده از متغییرها انجام دهید کافیست در انتهای نام دسته رنگی عبارت -text را اضافه کنید. مانند primary-text

معرفی رنگها

کلیه رنگها درون متغیرهای css در قسمت root تعریف شده اند، شما میتوانید به صورت مستقیم از آنها استفاده کرده و یا برای ساخت دسته رنگ مد نظر، فقط آنها را تغییر دهید.

نحوه نام گذاری قبلا گفته شده است با این تفاوت که شروع با نام دسته رنگی به جای --current میباشد. یعنی --primary-normal-color یا --default-select-back

با استفاده از دو دکمه زیر، توسط جاوا اسکریپت رنگ اصلی متغیر پس زمینه تغییر میکند.

    document.querySelector(':root').style.setProperty('--primary-back', 'magenta');
    --primary-back: red;

در صورت تمایل به ایجاد انواع مختلف تم، میتوانید با تغییر این متغییرها، انواع رنگهای مد نظر خود را داشته باشید.

شید یا گرادیانت

اگر نیاز داشتید بر روی موضوع خود، شید داشته باشید میتوانید از کلاس gradients استفاده کنید.

    <button class="primary gradients">...</button>

رنگهای ثابت

ویجت نس دارای یک پالت داخلی است، که با استفاده از نام رنگ و میزان روشنایی آن میتوان رنگ دلخواه را به پس زمینه یا متن داد.

نحوه کار بدین صورت است که، ابتدا پالت رنگ و سپس دسته رنگی آورده میشود. دسته رتگی بین اعداد 50، 100، 200، 300، 400، 500، 600، 700، 800 و 900 است و دسته رنگی بعدی از a100، a200، a400 و a700 میباشد.

برای نسبت دادن به رنگ پس زمینه و ... از عبارات زیر استفاده کنید. برای مثال برای رنگ قرمز:
red-400-bkcolor: پس زمینه
red-400-text: متن
red-400-cb: پس زمینه و متن
red-400-cbf: پس زمینه، متن و پرکردن svg (fill)
red-400-border: کادر
همانطور اضافه شده مقدار ?-i به معنی اجباری شدن است. red-400-text-i
برای اطلاع بیشتر فایل css را بررسی کنید.

اسامی رنگها