Kleur

Tema kleuren

Wy brûke in subset fan alle kleuren om in lytser kleurpalet te meitsjen foar it generearjen fan kleurskema's, ek beskikber as Sass-fariabelen en in Sass-kaart yn Bootstrap's scss/_variables.scssbestân.

Al dizze kleuren binne beskikber as in Sass map $theme-colors,.

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

Besjoch ús Sass-kaarten en loops-dokuminten foar hoe't jo dizze kleuren kinne feroarje.

Alle kleuren

Alle Bootstrap-kleuren binne beskikber as Sass-fariabelen en in Sass-kaart yn scss/_variables.scssbestân. Om ferhege triemgrutte te foarkommen, meitsje wy gjin tekst- of eftergrûnkleurklassen foar elk fan dizze fariabelen. Ynstee kieze wy in subset fan dizze kleuren foar in temapalet .

Soargje derfoar dat jo kontrastferhâldingen kontrolearje as jo kleuren oanpasse. Lykas hjirûnder werjûn, hawwe wy trije kontrastferhâldingen tafoege oan elk fan 'e haadkleuren - ien foar de hjoeddeistige kleuren fan' e swatch, ien foar tsjin wyt, en ien foar tsjin swart.

Notysjes oer Sass

Sass kin net programmatysk fariabelen generearje, dus wy hawwe sels fariabelen makke foar elke tint en skaad. Wy spesifisearje de middelpuntwearde (bgl. $blue-500) en brûke oanpaste kleurfunksjes om ús kleuren te tint (ferljochtsje) of te skaadjen (tsjusterje) fia de kleurfunksje fan Sass mix().

It brûken mix()is net itselde as lighten()en darken()- de eardere kombinearret de opjûne kleur mei wyt of swart, wylst de lêste allinich de ljochtenswearde fan elke kleur oanpast. It resultaat is in folle mear folsleine suite fan kleuren, lykas werjûn yn dizze CodePen demo .

Us tint-color()en shade-color()funksjes brûke mix()neist ús $theme-color-intervalfariabele, dy't in stapte persintaazje wearde spesifisearret foar elke mingde kleur dy't wy produsearje. Sjoch de scss/_functions.scssen scss/_variables.scssbestannen foar de folsleine boarnekoade.

Kleur Sass kaarten

De boarne Sass-bestannen fan Bootstrap omfetsje trije kaarten om jo te helpen fluch en maklik oer in list mei kleuren en har hex-wearden te rinnen.

• $colorslit al ús beskikbere basiskleuren ( 500).
• $theme-colorslistet alle semantysk neamde temakleuren (hjirûnder werjûn)
• $grayslist alle tinten en skaden fan griis

Binnen scss/_variables.scssfine jo Bootstrap's kleurfariabelen en Sass-kaart. Hjir is in foarbyld fan 'e $colorsSass-kaart:

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

Wearden tafoegje, fuortsmite of wizigje binnen de kaart om te aktualisearjen hoe't se wurde brûkt yn in protte oare komponinten. Spitigernôch brûkt op dit stuit net elke komponint dizze Sass-kaart. Takomstige updates sille stribje om dit te ferbetterjen. Oant dan plan om gebrûk te meitsjen fan de ${color}fariabelen en dizze Sass-kaart.

Foarbyld

Hjir is hoe't jo dizze kinne brûke yn jo Sass:

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

Kleur- en eftergrûnhelpklassen binne ek beskikber foar it ynstellen coloren background-colorbrûken fan de 500kleurwearden.

Generearjen fan nutsbedriuwen

Bootstrap omfettet gjin hulpprogramma's foar elke kleurfariabele, colormar background-colorjo kinne dizze sels generearje mei ús utility API en ús útwreide Sass-kaarten tafoege yn v5.1.0.

1. Om te begjinnen, soargje derfoar dat jo ús funksjes, fariabelen, mixins en nutsbedriuwen hawwe ymportearre.
2. Brûk ús map-merge-multiple()funksje om meardere Sass-kaarten fluch gear te foegjen yn in nije kaart.
3. Kombinearje dizze nije kombineare kaart om elk nut mei in klassenamme út te wreidzjen {color}-{level}.

Hjir is in foarbyld dat tekstkleurhelpprogramma's genereart (bgl. .text-purple-500) mei de boppesteande stappen.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@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}Dit sil nije nutsfoarsjenningen generearje foar elke kleur en nivo. Jo kinne itselde dwaan foar elk oar nut en eigendom.