Kleur

Themakleuren

We gebruiken een deelverzameling van alle kleuren om een kleiner kleurenpalet voor het genereren van kleurschema's te maken, dat ook beschikbaar is als Sass-variabelen en een Sass-map in het bestand scss/_variables.scss van Bootstrap.

Al deze kleuren zijn beschikbaar als Sass-map: $theme-colors.

Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.

Bekijk onze documentatie over Sass-maps en -loops om te zien hoe je deze kleuren aanpast.

Alle kleuren

Alle kleuren van Bootstrap zijn beschikbaar als Sass-variabelen en als Sass-map in het bestand scss/_variables.scss. Om grotere bestanden te voorkomen maken we niet voor elk van deze variabelen tekst- of achtergrondkleurklassen aan. In plaats daarvan kiezen we een deelverzameling van deze kleuren voor een themapalet.

Houd de contrastverhoudingen in de gaten terwijl je kleuren aanpast. Zoals hieronder te zien is, hebben we bij elk van de hoofdkleuren drie contrastverhoudingen toegevoegd: één voor de huidige kleuren van het staal, één ten opzichte van wit en één ten opzichte van zwart.

Opmerkingen over Sass

Sass kan niet programmatisch variabelen genereren, dus hebben we voor elke tint en schaduw handmatig zelf variabelen aangemaakt. We geven de middenwaarde op (bijv. $blue-500) en gebruiken eigen kleurfuncties om onze kleuren lichter (tint) of donkerder (shade) te maken via Sass' kleurfunctie mix().

mix() gebruiken is niet hetzelfde als lighten() en darken(): de eerste mengt de opgegeven kleur met wit of zwart, terwijl de laatste alleen de lichtheidswaarde van elke kleur aanpast. Het resultaat is een veel completer kleurenpakket, zoals te zien in deze CodePen-demo.

Onze functies tint-color() en shade-color() gebruiken mix() in combinatie met onze variabele $theme-color-interval, die een stapsgewijze procentuele waarde bepaalt voor elke gemengde kleur die we produceren. Zie de bestanden scss/_functions.scss en scss/_variables.scss voor de volledige broncode.

Sass-maps met kleuren

De Sass-bronbestanden van Bootstrap bevatten drie maps waarmee je snel en eenvoudig door een lijst kleuren en hun hex-waarden kunt loopen.

• $colors bevat al onze beschikbare basiskleuren (500)
• $theme-colors bevat alle semantisch benoemde themakleuren (hieronder getoond)
• $grays bevat alle tinten en schaduwen van grijs

In scss/_variables.scss vind je de kleurvariabelen en Sass-map van Bootstrap. Hier is een voorbeeld van de Sass-map $colors:

Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.

Voeg waarden toe aan de map, verwijder ze of pas ze aan om te wijzigen hoe ze in veel andere componenten worden gebruikt. Helaas gebruikt op dit moment niet elk component deze Sass-map. Toekomstige updates zullen dit proberen te verbeteren. Ga er tot die tijd van uit dat je de ${color}-variabelen en deze Sass-map gebruikt.

Voorbeeld

Zo kun je ze in je Sass gebruiken:

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

Er zijn ook utility-klassen voor kleur en achtergrond beschikbaar om color en background-color met de 500-kleurwaarden in te stellen.

Utilities genereren

Nieuw in v5.1.0

Bootstrap bevat niet voor elke kleurvariabele color- en background-color-utilities, maar je kunt ze zelf genereren met onze utility-API en onze uitgebreide Sass-maps die in v5.1.0 zijn toegevoegd.

1. Zorg er om te beginnen voor dat je onze functions, variables, mixins en utilities hebt geïmporteerd.
2. Gebruik onze functie map-merge-multiple() om snel meerdere Sass-maps in een nieuwe map samen te voegen.
3. Voeg deze nieuwe gecombineerde map samen om een utility met een klassenaam {color}-{level} uit te breiden.

Hier is een voorbeeld dat met bovenstaande stappen tekstkleur-utilities genereert (bijv. .text-purple-500).

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

Dit genereert nieuwe .text-{color}-{level}-utilities voor elke kleur en elk niveau. Hetzelfde kun je doen voor elke andere utility en eigenschap.