پرش به مطلب اصلی

هایلایت‌های رنگی و پس‌زمینه‌ها

هنگام ایجاد رنگ، قالب انعطاف پذیری بینظیری دارد و به شما این امکان را میدهد که به راحتی هر طرح رنگی را که میخواهید به آسانی ایجاد کنید. بنابراین، استفاده از SCSS بهترین راه حل برای اطمینان از یک طرح رنگی سریع، آسان و در عین حال ایجاد طرح های رنگی جدید فوق العاده آسان است.
3 مرحله ساده برای ایجاد یک طرح رنگی جدید با استفاده از SCSS و یک مرحله برای اعمال هایلایت اصلی در کل صفحه وجود دارد.

چگونه می توانم bg-highlight و color-highlight را در سطح قالب تغییر دهم؟​

مثل همیشه ساده است. به بالای فایل html خود بروید و درست قبل از بستن تگ head این کد را اضافه کنید.

html
<link
  rel="stylesheet"
  class="page-highlight"
  type="text/css"
  href="styles/highlights/highlight_red.css" />

highlight_red.css را با رنگ‌های موجود در پوشه styles/highlights جایگزین کنید. لطفاً مرحله زیر را بخوانید تا متوجه شوید قالب چگونه طرح رنگ صحیح را بارگذاری میکنند. استفاده از آن واقعاً ساده است.

چه کلاس‌هایی دریافت میکنید؟​

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

color-awesomeBuyer-light: به متن و آیکون ها اعمال میشود، از hex1 استفاده میکند
color-awesomeBuyer-dark: به متن و آیکون ها اعمال میشود، از 2hex استفاده میکند

bg-awesomeBuyer-light: به عناصر پس زمینه مانند کارت اعمال میشود، از hex1 استفاده میکند
bg-awesomeBuyer-dark: برای عناصر پس زمینه مانند کارت اعمال میشود، از hex2 استفاده میکند

bg-fade-awesomeBuyer-light: نسخه محو شده رنگ bg-awesomeBuyer-light بالا
bg-fade-awesomeBuyer-dark: نسخه محو شده رنگ bg-awesomeBuyer-dark بالا

gradient-awesomeBuyer: برای عناصر پس‌زمینه مانند کارت کاربرد دارد، از ترکیبی از هر 3 hex استفاده میکند که با hex1، hex2، hex3 در پایان شروع میشود.

border-awesomeBuyer: برای عناصر حاشیه دار با استفاده از hex1 اعمال میشود
border-fade-awesomeBuyer: نسخه محو شده رنگ border-awesomeBuyer بالا

چه رنگ هایی به طور پیشفرض گنجانده شده است؟​

اگر میخواهید از این رنگ ها در تگ body یا تگ هایلایت استفاده کنید، کافی است نام آنها را مطابق شکل زیر وارد کنید، اما اگر میخواهید از این رنگ ها برای تغییر رنگ یک المان یا پس زمینه یک المان استفاده کنید. از ساختار awesomeBuyer که در بالا توضیح داده شد استفاده کنید و آن را با هر رنگی از لیست زیر جایگزین کنید.

نکته

همه رنگ‌های قالب را میتوان در داخل فایل scss/appkit/colors.scss یا داخل style.css با جستجو بر اساس فرمول زیر پیدا کرد.
bg-ANY_NAME_FROM_LIST_BELOW-dark

  • mint
  • plum
  • violet
  • magenta
  • red
  • green
  • sky
  • blue
  • yellow
  • teal
  • orange
  • pumpkin
  • pink
  • brown
  • dark

چگونه حالت تاریک را فعال کنم؟ یا رنگ هایلایت یا پس زمینه صفحه را تغییر دهم؟​

تگ body برای کنترل قالب صفحه و همچنین هایلایت و رنگ پس‌زمینه استفاده میشود.

html
<body class="theme-light"></body>

کلاسی که قالب برای تعیین تم رنگی استفاده میکند. برای حالت تاریک از theme-dark، برای حالت روشن از theme-light و برای تشخیص خودکار تم دستگاه خود از detect-theme استفاده کنید. اگر این قابلیت توسط دستگاه شما پشتیبانی نشود، صفحه به طور خودکار به theme-light تغییر حالت میدهد. اکثر دستگاه‌های مدرن اکنون از تشخیص خودکار تم پشتیبانی میکنند و میتوانید این مورد را در صفحه component-auto-dark.html بررسی کنید.

برای تغییر پس‌زمینه، کافیست "none" را در تگ body با هر یک از رنگ‌های موجود در لیست بالا جایگزین کنید.

برای تغییر رنگ color-highlight / bg-highlight، کافیست red2 را با هر یک از رنگ‌های موجود در لیست بالا جایگزین کنید.

آخرین به روز رسانی در تاریخ