Update auf CSS-Variablen

Mit Version 3.5.0 des MATE Themes wurde das Theme barrierefrei angepasst und alle SCSS-Variablen auf CSS-Variablen umgestellt.
Dadurch ist beim Update von einer älteren Version (< 3.5.0) auf eine neuere Version (≥ 3.5.0) ein manueller Zwischenschritt notwendig.

Voraussetzungen

  • Vorhandene Installation des MATE Themes < 3.5.0
  • Update auf Contao 5

1. Theme-Update durchführen

  1. Öffne den Contao Manager.
  2. Aktualisiere das MATE Theme auf 3.5.0 oder höher (empfohlen: neueste Version).

2. Änderungen an den SCSS-Dateien

Ab Version 3.5.0 gibt es die Datei _custom_colors.scss nicht mehr.
Alle Farbdefinitionen befinden sich jetzt in _custom_variables.scss.

📂 Alter Aufbau (< 3.5.0)

mate/sass/
├── custom.scss
├── _custom_variables.scss
└── _custom_colors.scss

📂 Neuer Aufbau (≥ 3.5.0)

mate/sass/
├── custom.scss
└── _custom_variables.scss

3. Neue Theme-Dateien anlegen

Nach dem Update auf 3.5.0 oder höher funktioniert die Seite zwar weiterhin, aber nicht alle neuen Features sind direkt verfügbar.
Daher solltest du die aktuellen Theme-Dateien anlegen.

Vollständiger Neu-Import des Theme-Ordners

  1. Benenne in der Dateiverwaltung den Ordner mate um, z. B. in mate-alt.
  2. Öffne im Contao Manager den Bereich Systemwartung → Datenbank prüfen und führe die Datenbankaktualisierung durch.
  3. Die Migration zum Anlegen der neuen Theme-Dateien wird nun angeboten – ausführen.
  4. Es wird ein neuer Ordner mate mit den aktuellen Dateien angelegt.

Bilder verschieben:
Falls im alten mate-Ordner Bilder lagen, verschiebe sie entweder in den neuen Ordner oder in einen eigenen Bilder-Ordner.
Verknüpfungen bleiben erhalten, wenn die Bilder über „Ein Bild hinzufügen“ in Contao eingebunden wurden.

4. Eigene Anpassungen übernehmen

Falls du Änderungen in custom.scss, _custom_colors.scss oder _custom_variables.scss hattest, müssen diese manuell in die neuen Dateien übernommen werden.

Wichtig: In V2 werden CSS-Variablen statt SCSS-Variablen verwendet.

Beispiel Farbvariable

Vorher (V1 – SCSS):

$mateColor1: #b6cf92;

Neu (V2 – CSS-Variablen):

:root {
  --mateColor1: #b6cf92;
}

CSS-Variablen werden im Code so verwendet:

color: var(--mateColor1);

5. SCSS-Anpassungen aktualisieren

Falls du in deiner custom.scss noch SCSS-Variablen verwendest ($variable),
ändere diese auf das CSS-Variablenformat (var(--variable)).

Beispiel:

/* Vorher */
color: $mateColor1;

/* Neu */
color: var(--mateColor1);

Barrierefreiheit

Ausführliche Tipps, neue Funktionen ab Version 3.5.0 und Best Practices zur barrierefreien Gestaltung findest du hier:
♿ Barrierefreiheit im MATE Theme

Direkter Download der neuen Variablen-Datei

Die aktuelle _custom_variables.scss findest du hier:
📄 GitHub: _custom_variables.scss

Falls du die Dateien manuell anpassen willst, muss im Ordner sass zusätzlich eine leere Datei mit dem Namen .v2 vorhanden sein, um die V2-Struktur zu aktivieren.