Farbe

Themenfarben

Wir verwenden eine Teilmenge aller Farben, um eine kleinere Farbpalette zum Generieren von Farbschemata zu erstellen, die auch als Sass-Variablen und eine Sass-Karte in der Bootstrap- scss/_variables.scssDatei verfügbar sind.

Alle diese Farben sind als Sass-Map erhältlich $theme-colors.

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

Sehen Sie sich unsere Dokumente zu Sass-Maps und Loops an, um zu erfahren , wie Sie diese Farben ändern können.

Alle Farben

Alle Bootstrap-Farben sind als Sass-Variablen und als Sass-Map in einer scss/_variables.scssDatei verfügbar. Um erhöhte Dateigrößen zu vermeiden, erstellen wir keine Text- oder Hintergrundfarbklassen für jede dieser Variablen. Stattdessen wählen wir eine Teilmenge dieser Farben für eine Themenpalette .

Achten Sie beim Anpassen der Farben auf die Kontrastverhältnisse. Wie unten gezeigt, haben wir jeder der Hauptfarben drei Kontrastverhältnisse hinzugefügt – eines für die aktuellen Farben des Farbfelds, eines für Weiß und eines für Schwarz.

Anmerkungen zu Sass

Sass kann keine Variablen programmgesteuert generieren, also haben wir selbst manuell Variablen für jeden Farbton und jede Schattierung erstellt. Wir spezifizieren den Mittelpunktwert (z. B. $blue-500) und verwenden benutzerdefinierte Farbfunktionen, um unsere Farben über die Farbfunktion von Sass zu tönen (aufhellen) oder schattieren (abdunkeln) mix().

Die Verwendung mix()ist nicht dasselbe wie lighten()und darken()— Ersteres mischt die angegebene Farbe mit Weiß oder Schwarz, während Letzteres nur den Helligkeitswert jeder Farbe anpasst. Das Ergebnis ist eine viel vollständigere Farbpalette, wie in dieser CodePen-Demo gezeigt .

Unsere Funktionen tint-color()und werden neben unserer Variablen verwendet, die einen abgestuften Prozentwert für jede von uns erzeugte Mischfarbe angibt. Den vollständigen Quellcode finden Sie in den Dateien und .shade-color()mix()$theme-color-intervalscss/_functions.scssscss/_variables.scss

Sass-Karten in Farbe

Die Sass-Quelldateien von Bootstrap enthalten drei Karten, mit denen Sie schnell und einfach eine Liste von Farben und ihren Hex-Werten durchlaufen können.

• $colorslistet alle unsere verfügbaren 500Grundfarben ( ) auf
• $theme-colorslistet alle semantisch benannten Themenfarben auf (siehe unten)
• $grayslistet alle Farbtöne und Graustufen auf

Darin scss/_variables.scssfinden Sie die Farbvariablen und die Sass-Karte von Bootstrap. Hier ist ein Beispiel für die $colorsSass-Karte:

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

Fügen Sie Werte innerhalb der Karte hinzu, entfernen oder ändern Sie sie, um zu aktualisieren, wie sie in vielen anderen Komponenten verwendet werden. Leider verwenden derzeit nicht alle Komponenten diese Sass-Karte. Zukünftige Updates werden danach streben, dies zu verbessern. Planen Sie bis dahin, die ${color}Variablen und diese Sass-Karte zu verwenden.

Beispiel

So können Sie diese in Ihrem Sass verwenden:

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

Farb- und Hintergrund - Hilfsklassen sind auch zum Festlegen colorund background-colorVerwenden der 500Farbwerte verfügbar.

Dienstprogramme generieren

Bootstrap enthält keine Dienstprogramme für jede Farbvariable, aber Sie können diese selbst mit unserer Dienstprogramm-APIcolor und unseren in v5.1.0 hinzugefügten erweiterten Sass-Maps generieren.background-color

1. Stellen Sie zunächst sicher, dass Sie unsere Funktionen, Variablen, Mixins und Dienstprogramme importiert haben.
2. Verwenden Sie unsere map-merge-multiple()Funktion, um mehrere Sass-Karten schnell in einer neuen Karte zusammenzuführen.
3. Führen Sie diese neue kombinierte Karte zusammen, um jedes Dienstprogramm mit einem {color}-{level}Klassennamen zu erweitern.

.text-purple-500Hier ist ein Beispiel, das mithilfe der obigen Schritte Textfarben-Hilfsprogramme (z. B. ) generiert .

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

Dadurch werden neue .text-{color}-{level}Dienstprogramme für jede Farbe und Ebene generiert. Das Gleiche können Sie auch für alle anderen Versorgungsunternehmen und Immobilien tun.