Farben, Themes und Dark Mode

Seit Bootstrap 5.3 laufen alle Farben über CSS-Variablen. Das klingt nach einer Kleinigkeit, ändert aber, wie ein Theme gebaut wird.

Früher wurden Farben beim Kompilieren in jede einzelne Regel geschrieben. Wer nachträglich etwas ändern wollte, musste neu kompilieren – oder mit !important dagegenhalten. Heute steht der Wert an einer Stelle und wird von dort referenziert. Eine Umstellung braucht keinen Build mehr.

Der Dark Mode fällt damit fast nebenbei ab. Statt eines zweiten Stylesheets werden nur die Variablen neu belegt, sobald das Attribut data-bs-theme auf dark steht. Komponenten, die sich an die Variablen halten, ziehen automatisch mit.

Daraus folgt die wichtigste Regel für eigene Anpassungen: eigene Farben gehören in die Variablen-Ebene, nicht in einzelne Komponenten. Ein fest eingetragener Hexwert an einer Card ist genau die Stelle, an der der Dark Mode später bricht.