Wie du LASR anpasst

1. Hauptfarben anpassen

Um die Hauptfarben des Themes zu ändern, öffnest du die _variables.scss. Dort findest du eine Vielzahl von Variablen, unter anderem für die Farbzuweisung. Die Farben für das LASR Theme in Contao 5 sind wie folgt definiert:

--color-white: #fff;
--color-gray-dark: #090727;
--color-gray: #46465d;
--color-gray-light: #f0f0f0;
--color-gray-lighter: #f2f2f2;
--color-gray-lightest: #f9f9f9;
--color-blue-darker: color-mix(in srgb, var(--color-blue), black 60%);
--color-blue-dark: color-mix(in srgb, var(--color-blue), black 20%);
--color-blue: hsl(206deg, 72%, 47%);
--color-blue-light: color-mix(in srgb, var(--color-blue), white 20%);
--color-blue-lighter: color-mix(in srgb, var(--color-blue), #777 80%);

--color-tint: var(--color-gray-light);
--color-brand-primary-light: var(--color-blue-light);
--color-brand-primary: var(--color-blue);
--color-brand-primary-dark: var(--color-blue-dark);
--color-brand-primary-darker: var(--color-blue-darker);
--color-brand-secondary: var(--color-blue-darker);
--color-brand: var(--color-brand-primary);
--color-highlight: var(--color-brand);
--color-text: var(--color-gray-dark);
--color-text-light: var(--color-gray);
--color-text-inverted: var(--color-white);

Die Hauptfarbe heißt --color-brand-primary. Dieser wurde die Variable --color-blue zugewiesen, der wiederum weiter oben ein Blauton als HSL-Wert zugewiesen wurden. Um die Hauptfarbe zu ändern, ersetzt du

--color-brand-primary: var(--color-blue);

durch eine eigene Variable:

--color-brand-primary: var(--color-red);

oder einen Farbwert:

--color-brand-primary: #e30613;

Nun sollte an jeder Stelle, an der vorher das Blau zu sehen war der neue festgelegte Farbton zu sehen sein.

Wichtig: Das LASR Theme generiert per color-mix() automatisch dunklere und hellere Farbvarianten für zum Beispiel Hover-Status bei Links. Auch die Sekundärfarbe ist eine Variante der Hauptfarbe. Unter Umständen musst du die Varianten anpassen, damit ausreichende Kontrastverhältnisse weiterhin sichergestellt sind.

3. Schriften anpassen

In der LASR Demo verwenden wir standardmäßig die Rubik für Fließtexte und die Raleway für Überschriften. Die Schriften sind zwar Google Webfonts, werden aber lokal, d.h. vom eigenen Server geladen (siehe files/theme/fonts).

3.1. eigene Schriftart verwenden

Um eigene Schriftarten zum Beispiel von Google Webfonts zu verwenden, sind 2 Schritte notwendig:

Schritt 1: Webfonts herunterladen

Webfonts sollten immer lokal und nicht über Anbieter wie Google Webfonts, Adobe Fonts usw. eingebunden werden.

Hier die Umsetzung anhand von Google Webfonts:

1. Lade die gewünschten Webfonts herunter. Sehr einfach geht das mit dem google webfonts helper
2. Speichere die Webfonts im Ordner /fonts
3. passe die Datei /base/_fonts.scss an, indem du die CSS-Anweisungen des Webfont Helper dort einfügst

Schritt 2: Anpassung der Variablen

Um die Schriftart zu verwenden, findest du in der _variables.scss folgende Variablen:

--base-font-family-1: 'Rubik', 'Helvetica Neue', arial, sans-serif;
--base-font-family-2: 'Raleway', 'Helvetica Neue', sans-serif;
--base-font-family: var(--base-font-family-1);

Die Variable --base-font-family-1 ist der Schriftart Rubik zugeordnet. Sie dient als Basis-Schriftart (--base-font-family) und wird standardmäßig auf der Website verwendet, wenn sie nicht durch andere Schriften überschrieben wird.

Die Variable --base-font-family-2 ist der Schriftart Raleway zugeordnet. Sie wird weiter unten in der _variables.scss den Überschriften zugeordnet:

// BASE/TYPE
--headings-font-family: var(--base-font-family-2);

Nachdem du deine neue(n) Schriftart(en) hochgeladen hast, musst du nur noch die Variablen anpassen und solltest die Schriftart(en) sehen können.