رنگ

تھیم کے رنگ

ہم رنگ سکیمیں بنانے کے لیے ایک چھوٹا رنگ پیلیٹ بنانے کے لیے تمام رنگوں کا سب سیٹ استعمال کرتے ہیں، جو بوٹسٹریپ کی scss/_variables.scssفائل میں ساس متغیر اور ساس نقشہ کے طور پر بھی دستیاب ہے۔

یہ تمام رنگ ساس نقشہ کے طور پر دستیاب ہیں $theme-colors۔

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

ان رنگوں کو کیسے تبدیل کیا جائے اس کے لیے ہمارے ساس نقشے اور لوپس کی دستاویزات دیکھیں ۔

تمام رنگ

scss/_variables.scssتمام بوٹسٹریپ رنگ ساس متغیرات اور فائل میں ایک ساس نقشہ کے طور پر دستیاب ہیں ۔ فائل کے سائز میں اضافے سے بچنے کے لیے، ہم ان میں سے ہر ایک متغیر کے لیے متن یا پس منظر کے رنگ کی کلاسیں نہیں بناتے ہیں۔ اس کے بجائے، ہم تھیم پیلیٹ کے لیے ان رنگوں کا سب سیٹ منتخب کرتے ہیں ۔

رنگوں کو اپنی مرضی کے مطابق بناتے وقت متضاد تناسب کی نگرانی کرنا یقینی بنائیں۔ جیسا کہ ذیل میں دکھایا گیا ہے، ہم نے ہر ایک اہم رنگ میں تین متضاد تناسب شامل کیے ہیں- ایک سویچ کے موجودہ رنگوں کے لیے، ایک سفید کے مقابلے میں، اور ایک سیاہ کے مقابلے میں۔

ساس پر نوٹس

Sass پروگرام کے لحاظ سے متغیرات پیدا نہیں کر سکتا، اس لیے ہم نے دستی طور پر ہر ٹنٹ اور شیڈ کے لیے متغیرات بنائے۔ ہم مڈ پوائنٹ ویلیو (مثلاً، $blue-500) بتاتے ہیں اور ساس کے کلر فنکشن کے ذریعے اپنے رنگوں کو ٹنٹ (ہلکا) یا سایہ (گہرا) کرنے کے لیے حسب ضرورت کلر فنکشن استعمال کرتے ہیں mix()۔

استعمال mix()کرنا ایک جیسا نہیں ہے lighten()اور darken()— سابقہ ​​مخصوص رنگ کو سفید یا سیاہ کے ساتھ ملا دیتا ہے، جب کہ مؤخر الذکر صرف ہر رنگ کی ہلکی پن کی قدر کو ایڈجسٹ کرتا ہے۔ نتیجہ رنگوں کا ایک بہت زیادہ مکمل مجموعہ ہے، جیسا کہ اس CodePen ڈیمو میں دکھایا گیا ہے ۔

ہمارے tint-color()اور shade-color()فنکشنز mix()ہمارے متغیر کے ساتھ استعمال ہوتے ہیں $theme-color-interval، جو ہمارے تیار کردہ ہر مخلوط رنگ کے لیے ایک مرحلہ وار فی صد قدر بتاتا ہے۔ scss/_functions.scssمکمل سورس کوڈ کے لیے اور scss/_variables.scssفائلیں دیکھیں ۔

رنگین ساس نقشے۔

بوٹسٹریپ کے ماخذ Sass فائلوں میں تین نقشے شامل ہیں جو آپ کو رنگوں کی فہرست اور ان کی ہیکس قدروں کو تیزی سے اور آسانی سے لوپ کرنے میں مدد کرتے ہیں۔

• $colorsہمارے تمام دستیاب بیس ( 500) رنگوں کی فہرست
• $theme-colorsتمام لفظی طور پر نامزد تھیم کے رنگوں کی فہرست (نیچے دکھایا گیا ہے)
• $graysبھوری رنگ کے تمام رنگوں اور رنگوں کی فہرست

کے اندر scss/_variables.scss، آپ کو بوٹسٹریپ کے رنگ متغیرات اور ساس کا نقشہ مل جائے گا۔ $colorsیہاں ساس نقشہ کی ایک مثال ہے :

$colors: (
  "blue":       $blue,
  "indigo":     $indigo,
  "purple":     $purple,
  "pink":       $pink,
  "red":        $red,
  "orange":     $orange,
  "yellow":     $yellow,
  "green":      $green,
  "teal":       $teal,
  "cyan":       $cyan,
  "white":      $white,
  "gray":       $gray-600,
  "gray-dark":  $gray-800
);

نقشے میں اقدار کو شامل کریں، ہٹائیں یا ان میں ترمیم کریں تاکہ یہ اپ ڈیٹ کیا جا سکے کہ وہ بہت سے دوسرے اجزاء میں کیسے استعمال ہوتے ہیں۔ بدقسمتی سے اس وقت، ہر جزو اس ساس نقشے کو استعمال نہیں کرتا ہے۔ مستقبل کے اپ ڈیٹس اس میں بہتری لانے کی کوشش کریں گے۔ تب تک، ${color}متغیرات اور اس ساس نقشہ کو استعمال کرنے کا منصوبہ بنائیں۔

مثال

یہاں یہ ہے کہ آپ ان کو اپنے ساس میں کیسے استعمال کرسکتے ہیں:

.alpha { color: $purple; }
.beta {
  color: $yellow-300;
  background-color: $indigo-900;
}

رنگ اور پس منظر کی افادیت کی کلاسیں رنگ کی قدروں کو ترتیب دینے colorاور background-colorاستعمال کرنے کے لیے بھی دستیاب ہیں۔500

افادیت پیدا کرنا

v5.1.0 میں شامل کیا گیا۔

colorبوٹسٹریپ میں ہر رنگ کے متغیر کے لیے یوٹیلیٹیز اور یوٹیلیٹیز شامل نہیں ہوتے ہیں background-color، لیکن آپ ان کو ہمارے یوٹیلیٹی API اور v5.1.0 میں شامل کیے گئے ہمارے توسیعی Sass نقشوں سے خود تیار کر سکتے ہیں۔

1. شروع کرنے کے لیے، یقینی بنائیں کہ آپ نے ہمارے فنکشنز، ویری ایبلز، مکسینز اور یوٹیلیٹیز کو درآمد کر لیا ہے۔
2. map-merge-multiple()ایک نئے نقشے میں متعدد ساس نقشوں کو تیزی سے ضم کرنے کے لیے ہمارے فنکشن کا استعمال کریں ۔
3. {color}-{level}کلاس کے نام کے ساتھ کسی بھی افادیت کو بڑھانے کے لیے اس نئے مشترکہ نقشے کو ضم کریں ۔

یہاں ایک مثال ہے جو .text-purple-500مندرجہ بالا مراحل کا استعمال کرتے ہوئے ٹیکسٹ کلر یوٹیلیٹیز (مثلاً ) تیار کرتی ہے۔

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans);

$utilities: map-merge(
  $utilities,
  (
    "color": map-merge(
      map-get($utilities, "color"),
      (
        values: map-merge(
          map-get(map-get($utilities, "color"), "values"),
          (
            $all-colors
          ),
        ),
      ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

یہ ہر رنگ اور سطح کے لیے نئی .text-{color}-{level}افادیت پیدا کرے گا۔ آپ کسی دوسری افادیت اور جائیداد کے لیے بھی ایسا ہی کر سکتے ہیں۔