LU14b - Variablen für Farben und Schriften

Siehe auch selfhtml - CSS/Funktion/var()

Die Einstellungen der Farben und Schriften in Bootstrap werden über Variablen definiert. Eine Liste aller Variablen finden wir unter bootstrap - css-variables

Ohne in alle Details von Variablen zu CSS zu gehen, schauen wir uns die wichtigsten Grundlagen an:

:root {
  --bs-blue: #0d6efd;
  ...

:root legt fest, dass die Variablen für die ganze HTML-Datei gelten.
–bs-blue: #0d6efd; erstellt eine Variable mit dem Bezeichner bs-blue und weist der Variable einen Wert zu.

Nachdem die Variablen definiert sind, können wir sie für die Definition unserer Styles nutzen:

p { color: var(--bs-primary); }

Hier wird der Wert der Variable bs-primary für die Schriftfarbe aller p-Elemente gesetzt.

Möchten wir den Wert einer Variable überschreiben, gibt es zwei Lösungen:

Wir laden die Bootstrap CSS-Datei bootstrap.css herunter und editieren die Werte direkt in dieser Datei.
Wir erstellen eine separate CSS-Datei und überschreiben die Variablen dort.

Bei Variante 2 haben wir einen guten Überblick, welche Variablen wir überschreiben. Wichtig ist dabei, dass wir unsere CSS-Datei nach der CSS-Datei von Bootstrap einbinden:

<!DOCTYPE html>
<html lang='de'>
  <head>
    <meta charset='UTF-8'>
    <title>Title</title>
    <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65' crossorigin='anonymous'>
    <link rel='stylesheet' href='css/style.css'>
  </head>
  <body>
    ...
  </body>
</html>

Bei CSS gilt, dass immer die letzte Definition einer Variable oder eines Style verwendet wird.

Anhand der Variablen sehen wir, dass Bootstrap die Farben Blau, Indigo, Purpur, Pink, Rot, Orange, Gelb, Grün, Petrol (teal) und Cyan verwendet. Dazu kommen noch Schwarz, Weiss und mehrere Abstufungen von Grau. Falls wir für unsere Webseite einfach einen anderen Farbton für eine der Farben verwenden möchten, passen wir einfach den entsprechenden Wert an.

Neben diesen einzelnen Farben gibt es noch Variablen für die primäre, sekundäre und tertiäre Farbe. Mit diesen Variablen lässt sich am einfachsten ein eigenes Farbschema umsetzen. Dazu suchen wir alle Variablen mit primary, secondary und tertiary im Namen, z.B. bs-secondary-color. Viele dieser Variablen sind mehrfach vorhanden, mit unterschiedlichen Varianten zur Definition der Farben.

Hier ein Auszug aus der CSS-Datei:

...
  --bs-secondary-color: rgba(33, 37, 41, 0.75);
  --bs-secondary-color-rgb: 33, 37, 41;
  --bs-secondary-bg: #e9ecef;
  --bs-secondary-bg-rgb: 233, 236, 239;
...

Die meisten Farben sind im RGB-Format mit dezimalen oder hexadezimalen Werten angegeben. Einzelne Werte verwenden das erweiterte RGBA-Format. Dabei wird zusätzlich zu den drei Grundfarben noch die Transparenz mit einem Dezimalwert von 0.0 (vollständig transparent) bis 1.0 (keine Transparenz) angegeben.

Auch für die verwendeten Schriften sind in der CSS-Datei entsprechende Variablen definiert. Zum Beispiel

  ...
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  ...

Unabhängig von Bootstrap sollten wir immer mehrere alternative Schriftarten festlegen. Der Browser durchsucht die Liste, bis er eine Schriftart finden, die er darstellen kann. Mehr dazu finden Sie unter selfhtml - font-family.

m293-LU14

Kevin Maurizi, Marcel Suter

LU14b - Variablen für Farben und Schriften

Variablen in CSS

Variablen überschreiben

Farben anpassen

Schriften

BZZ - Modulwiki