Farge

Temafarger

Vi bruker et undersett av alle farger for å lage en mindre fargepalett for å generere fargeskjemaer, også tilgjengelig som Sass-variabler og et Sass-kart i Bootstraps scss/_variables.scssfil.

Alle disse fargene er tilgjengelige som et Sass-kart, $theme-colors.

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

Sjekk ut våre Sass-kart og loops-dokumenter for hvordan du endrer disse fargene.

Alle farger

Alle Bootstrap-farger er tilgjengelige som Sass-variabler og et Sass-kart i scss/_variables.scssfil. For å unngå økte filstørrelser lager vi ikke tekst- eller bakgrunnsfargeklasser for hver av disse variablene. I stedet velger vi en undergruppe av disse fargene for en temapalett .

Sørg for å overvåke kontrastforhold når du tilpasser farger. Som vist nedenfor har vi lagt til tre kontrastforhold til hver av hovedfargene – én for fargeprøvens nåværende farger, én mot hvit og én mot svart.

Merknader om Sass

Sass kan ikke programmatisk generere variabler, så vi laget manuelt variabler for hver fargetone og nyanse selv. Vi spesifiserer midtpunktsverdien (f.eks. $blue-500) og bruker egendefinerte fargefunksjoner for å tone (lyse opp) eller skygge (mørke) fargene våre via Sass sin mix()fargefunksjon.

Bruk mix()er ikke det samme som lighten()og darken()— førstnevnte blander den angitte fargen med hvit eller svart, mens sistnevnte bare justerer lysstyrken til hver farge. Resultatet er en mye mer komplett serie med farger, som vist i denne CodePen-demoen .

Vår tint-color()og shade-color()funksjoner brukes mix()sammen med $theme-color-intervalvariabelen vår, som spesifiserer en trinnvis prosentverdi for hver blandede farge vi produserer. Se filene scss/_functions.scssog scss/_variables.scssfor hele kildekoden.

Farge Sass kart

Bootstraps kilde Sass-filer inkluderer tre kart som hjelper deg raskt og enkelt å gå over en liste over farger og deres hex-verdier.

• $colorsviser alle våre tilgjengelige 500grunnfarger ( ).
• $theme-colorsviser alle semantisk navngitte temafarger (vist nedenfor)
• $graysviser alle nyanser og nyanser av grått

Innenfor scss/_variables.scssfinner du Bootstraps fargevariabler og Sass-kart. Her er et eksempel på $colorsSass-kartet:

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

Legg til, fjern eller endre verdier i kartet for å oppdatere hvordan de brukes i mange andre komponenter. Dessverre på dette tidspunktet er det ikke alle komponenter som bruker dette Sass-kartet. Fremtidige oppdateringer vil forsøke å forbedre dette. Inntil da, planlegg å bruke ${color}variablene og dette Sass-kartet.

Eksempel

Slik kan du bruke disse i Sass:

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

Farge- og bakgrunnsverktøyklasser er også tilgjengelige for innstilling colorog background-colorbruk av 500fargeverdiene.

Generer verktøy

Bootstrap inkluderer ikke colorverktøy background-colorfor hver fargevariabel, men du kan generere disse selv med vår verktøy-API og våre utvidede Sass-kart lagt til i v5.1.0.

1. For å starte, sørg for at du har importert funksjonene, variablene, mixins og verktøyene våre.
2. Bruk map-merge-multiple()funksjonen vår til å raskt slå sammen flere Sass-kart i et nytt kart.
3. Slå sammen dette nye kombinerte kartet for å utvide ethvert verktøy med et {color}-{level}klassenavn.

Her er et eksempel som genererer tekstfargeverktøy (f.eks. .text-purple-500) ved å bruke trinnene ovenfor.

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

Dette vil generere nye .text-{color}-{level}verktøy for hver farge og nivå. Du kan også gjøre det samme for alle andre verktøy og eiendommer.