Skip to di men tin dɛn we de insay Skip to doks nevigishɔn
in English

Kɔlɔ

Bootstrap na wan big kala sistem we de tim wi stayl ɛn kɔmpɔnɛnt dɛn de sɔpɔt am. Dis de mek yu ebul fɔ kɔstɔmayshɔn ɛn ɛkstenshɔn mɔ kɔmprɛhɛnsif fɔ ɛni prɔjek.

Na dis pej

Di tim kɔlɔ dɛn

Wi de yuz wan sɔbsɛt fɔ ɔl di kɔlɔ dɛn fɔ mek wan smɔl kɔlɔ palet fɔ jenarayz kɔlɔ skim dɛn, we de bak as Sass vɛriɔbul dɛn ɛn wan Sass map na Bootstrap in scss/_variables.scssfayl.

Fɔs
Sɛkɔndari
Go bifo
Denja
Wɔnin
Info
Layt
Dak

Ɔl dɛn kɔlɔ ya de as Sass map, $theme-colors.

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

Chek wi Sass maps en loops docs fo hau fo modify dis kala dem.

Ɔl di kɔlɔ dɛn

Ɔl di Bootstrap kɔlɔ dɛn de as Sass vɛriɔbul dɛn ɛn wan Sass map insay scss/_variables.scssfayl. Fɔ avɔyd fɔ mek fayl saiz dɛn go ɔp, wi nɔ de mek tɛks ɔ bakgrɔn kɔlɔ klas fɔ ɛni wan pan dɛn vɛriɔbul dɛn ya. Bifo dat, wi kin pik wan smɔl pat pan dɛn kɔlɔ dɛn ya fɔ wan tim palet .

Mek shɔ se yu de wach di kɔntrast ratio dɛn as yu de kɔstɔmayt di kɔlɔ dɛn. As wi si dɔŋ ya, wi dɔn ad tri kɔntrast ratio to ɛni wan pan di men kɔlɔ dɛn—wan fɔ di kɔlɔ dɛn we di swatch gɛt naw, wan fɔ agens wayt, ɛn wan fɔ agens blak.

$blu wan#0d6efd fɔ di wan dɛn we de
$blu-100
$blu-200
$blu-300
$blu-400
$blu-500
$blu-600
$blu-700
$blu-800
$blu-900
$indigo fɔ di wan dɛn we de#6610f2 fɔ di wan dɛn
$indigo-100 fɔ di wan dɛn we de
$indigo-200 fɔ di wan dɛn we de
$indigo-300 fɔ di wan dɛn we de
$indigo-400 fɔ di wan dɛn we de
$indigo-500 fɔ di wan dɛn we de
$indigo-600 fɔ di wan dɛn we de
$indigo-700 fɔ di wan dɛn we de
$indigo-800 fɔ di wan dɛn we de
$indigo-900 fɔ di wan dɛn we de
$pepul we de na di wɔl#6f42c1 na di pikchɔ
$pepul-100
$pepul-200
$pepul-300
$pepul-400
$pepul-500
$pepul-600
$pepul-700
$pepul-800
$pepul-900
$pink we yu de#d63384 na di pikchɔ
$pink-100 fɔ di wan dɛn we de
$pink-200 fɔ di wan dɛn we de
$pink-300 fɔ di wan dɛn
$pink-400 fɔ di wan dɛn we de
$pink-500 fɔ di wan dɛn
$pink-600 fɔ di wan dɛn
$pink-700 fɔ di wan dɛn
$pink-800 fɔ di wan dɛn
$pink-900 fɔ di wan dɛn
$rɛd#dc3545 fɔ di wan dɛn we de
$rɛd-100
$rɛd-200
$rɛd-300
$rɛd-400
$rɛd-500
$rɛd-600
$rɛd-700
$rɛd-800
$rɛd-900
$ɔrɛnj#fd7e14 fɔ di wan dɛn we de
$ɔrɛnj-100
$ɔrɛnj-200
$ɔrɛnj-300
$ɔrɛnj-400
$ɔrɛnj-500
$ɔrɛnj-600
$ɔrɛnj-700
$ɔrɛnj-800
$ɔrɛnj-900
$yɔlɔ#ffc107 fɔ di wan dɛn we de
$yɔlɔ-100
$yɔlɔ-200
$yɔlɔ-300
$yɔlɔ-400
$yɔlɔ-500
$yɔlɔ-600
$yɔlɔ-700
$yɔlɔ-800
$yɔlɔ-900
$grin#198754 fɔ di wan dɛn we de
$grin-100 fɔ di wan dɛn we de
$grin-200 fɔ di wan dɛn we de
$grin-300 fɔ di wan dɛn we de
$grin-400 fɔ di wan dɛn we de
$grin-500 fɔ di wan dɛn we de
$grin-600 fɔ di wan dɛn we de
$grin-700 fɔ di wan dɛn we de
$grin-800 fɔ di wan dɛn we de
$grin-900 fɔ di wan dɛn we de
$tiɛl#20c997 fɔ di wan dɛn we de
$tiɛl-100
$tiɛl-200
$tiɛl-300
$tiɛl-400
$tiɛl-500
$tiɛl-600
$tiɛl-700
$tiɛl-800
$tiɛl-900
$sayn we dɛn kɔl#0dcaf0 fɔ di wan dɛn we de
$sayn-100 we dɛn kɔl
$sayn-200 we dɛn mek
$sayn-300 fɔ di wan dɛn we de
$sayn-400 fɔ di wan dɛn we de
$sayn-500 fɔ di wan dɛn we de
$sayn-600 fɔ di wan dɛn we de
$sayn-700 fɔ di wan dɛn we de
$sayn-800 fɔ di wan dɛn we de
$sayn-900 fɔ di wan dɛn we de
$grey-500 fɔ di wan dɛn#adb5bd fɔ di wan dɛn we de
$grey-100 fɔ di wan dɛn we de
$grey-200 fɔ di wan dɛn we de
$grey-300 fɔ di wan dɛn we de
$grey-400 fɔ di wan dɛn we de
$grey-500 fɔ di wan dɛn
$grey-600 fɔ di wan dɛn we de
$grey-700 fɔ di wan dɛn we de
$grey-800 fɔ di wan dɛn we de
$grey-900 fɔ di wan dɛn we de
$blak wan#000 fɔ di wan dɛn we de
$wayt#fff fɔ di wan dɛn we de

Notis dɛn bɔt Sass

Sass nɔ kin programmatically jenarayz variebul, so wi manually kriet variebul fɔ ɛvri tint ɛn shed wisɛf. Wi de spɛsifa di midpɔynt valyu (ɛgz., $blue-500) ɛn yuz kɔstɔm kɔlɔ fɛnshɔn dɛn fɔ tint (layt) ɔ shed (dak) wi kɔlɔ dɛn tru Sass in mix()kɔlɔ fɛnshɔn.

Yuz mix()nɔto di sem wit lighten()ɛn darken()—di fɔs wan de miks di kɔlɔ we dɛn dɔn tɔk bɔt wit wayt ɔ blak, we di las wan de jɔs ajɔst di layt valyu fɔ ɛni kɔlɔ. Di rizulyt na wan bɔku mɔ kɔmplit suit fɔ kɔlɔ dɛn, lɛk aw dɛn sho na dis CodePen demo .

Wi tint-color()ɛn shade-color()fɛnshɔn dɛn de yuz mix()alongsay wi $theme-color-intervalvɛriɔbul, we de spɛsifa wan stɛp pasɛnt valyu fɔ ɛni miks kɔlɔ we wi de prodyuz. Si di scss/_functions.scssɛn scss/_variables.scssfayl dɛn fɔ di ful sɔs kɔd.

Map dɛn na Sass we gɛt kɔlɔ

Bootstrap in sɔs Sass fayl dɛn gɛt tri map dɛn fɔ ɛp yu fɔ lɔp kwik ɛn izi wan oba wan list fɔ di kɔlɔ dɛn ɛn dɛn heks valyu dɛn.

  • $colorslist ɔl di bays ( 500) kɔlɔ dɛn we wi gɛt
  • $theme-colorslist ɔl di tim kɔlɔ dɛn we gɛt sɛmantik nem (we dɛn sho dɔŋ ya)
  • $grayslist ɔl di tint ɛn shed dɛn fɔ grey

Insay scss/_variables.scss, yu go si Bootstrap in kɔlɔ vɛriɔbul dɛn ɛn Sass map. Na wan ɛgzampul fɔ di $colorsSass map:

$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
);

Ad, pul, ɔ chenj valyu dɛn insay di map fɔ ɔpdet aw dɛn de yuz dɛn na bɔku ɔda kɔmpɔnɛnt dɛn. Na ɔnfɔni na dis tɛm, nɔto ɔl kɔmpɔnɛnt de yuz dis Sass map. Di ɔpdet dɛn we dɛn go gɛt tumara bambay go tray fɔ mek dis bɛtɛ. Te da tɛm de, plan fɔ mek yus to di ${color}vɛriɔbul dɛn ɛn dis Sass map.

Ɛgzampul

Na so yu kin yuz dɛn wan ya na yu Sass:

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

Kɔlɔ ɛn bakgrɔn yutiliti klas dɛn de bak fɔ sɛt colorɛn background-coloryuz di 500kɔlɔ valyu dɛn.

Jɛnɛreshɔn fɔ yutiliti dɛn

Dɛn ad am na v5.1.0

Bootstrap nɔ inklud colorɛn background-coloryutiliti fɔ ɛvri kala vɛriɔbul, bɔt yu kin jenarayz dɛn wan ya yusɛf wit wi yutiliti API ɛn wi ɛkstend Sass map dɛn we dɛn ad insay v5.1.0.

  1. Fɔ bigin, mek shɔ se yu dɔn import wi fɛnshɔn dɛn, vɛriɔbul dɛn, miksin dɛn, ɛn yutiliti dɛn.
  2. Yuz wi map-merge-multiple()fɛnshɔn fɔ jɔyn bɔku Sass map dɛn togɛda kwik kwik wan insay wan nyu map.
  3. Mej dis nyu kɔmbayn map fɔ ɛkstɛnd ɛni yutiliti wit wan {color}-{level}klas nem.

Na wan ɛgzampul we de jenarayz tɛks kɔlɔ yutiliti dɛn (ɛgz., .text-purple-500) we de yuz di step dɛn we de ɔp.

@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";

Dis go mek nyu .text-{color}-{level}yutiliti fɔ ɛvri kɔlɔ ɛn lɛvul. Yu kin du di sem tin fɔ ɛni ɔda yutiliti ɛn prɔpati bak.