Färg

Temafärger

Vi använder en delmängd av alla färger för att skapa en mindre färgpalett för att generera färgscheman, även tillgänglig som Sass-variabler och en Sass-karta i Bootstraps scss/_variables.scssfil.

Alla dessa färger finns tillgängliga som en Sass-karta, $theme-colors.

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

Kolla in våra Sass-kartor och loops-dokument för hur du ändrar dessa färger.

Alla färger

Alla Bootstrap-färger är tillgängliga som Sass-variabler och en Sass-karta i scss/_variables.scssfil. För att undvika ökade filstorlekar skapar vi inte text- eller bakgrundsfärgklasser för var och en av dessa variabler. Istället väljer vi en delmängd av dessa färger för en temapalett .

Se till att övervaka kontrastförhållanden när du anpassar färger. Som visas nedan har vi lagt till tre kontrastförhållanden till var och en av huvudfärgerna – en för swatchens nuvarande färger, en för mot vit och en för mot svart.

Anteckningar om Sass

Sass kan inte programmatiskt generera variabler, så vi skapade manuellt variabler för varje nyans och nyans själva. Vi anger mittpunktsvärdet (t.ex. $blue-500) och använder anpassade färgfunktioner för att tona (ljusa) eller skugga (mörkare) våra färger via Sass mix()färgfunktion.

Att använda mix()är inte detsamma som lighten()och darken()— den förra blandar den angivna färgen med vit eller svart, medan den senare bara justerar ljushetsvärdet för varje färg. Resultatet är en mycket mer komplett svit av färger, som visas i denna CodePen-demo .

Vår tint-color()och shade-color()funktioner används mix()tillsammans med vår $theme-color-intervalvariabel, som anger ett stegvist procentvärde för varje blandad färg vi producerar. Se filen scss/_functions.scssoch scss/_variables.scssför hela källkoden.

Färg Sass kartor

Bootstraps käll Sass-filer inkluderar tre kartor som hjälper dig att snabbt och enkelt gå över en lista med färger och deras hexadecimala värden.

• $colorslistar alla våra tillgängliga basfärger ( 500).
• $theme-colorslistar alla semantiskt namngivna temafärger (visas nedan)
• $grayslistar alla nyanser och nyanser av grått

Inom scss/_variables.scsshittar du Bootstraps färgvariabler och Sass-karta. Här är ett exempel på $colorsSass-kartan:

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

Lägg till, ta bort eller ändra värden i kartan för att uppdatera hur de används i många andra komponenter. Tyvärr använder inte alla komponenter denna Sass-karta för närvarande. Framtida uppdateringar kommer att sträva efter att förbättra detta. Tills dess, planera att använda ${color}variablerna och denna Sass-karta.

Exempel

Så här kan du använda dessa i din Sass:

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

Färg- och bakgrundsverktygsklasser är också tillgängliga för att ställa in coloroch background-coloranvända 500färgvärdena.

Generera verktyg

Bootstrap inkluderar inte verktyg colorför background-colorvarje färgvariabel, men du kan skapa dessa själv med vårt verktygs-API och våra utökade Sass-kartor som lagts till i v5.1.0.

1. För att börja, se till att du har importerat våra funktioner, variabler, mixins och verktyg.
2. Använd vår map-merge-multiple()funktion för att snabbt slå samman flera Sass-kartor till en ny karta.
3. Slå samman denna nya kombinerade karta för att utöka alla verktyg med ett {color}-{level}klassnamn.

Här är ett exempel som genererar textfärgverktyg (t.ex. .text-purple-500) med hjälp av stegen ovan.

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

Detta kommer att generera nya .text-{color}-{level}verktyg för varje färg och nivå. Du kan göra detsamma för alla andra verktyg och egendom också.