Design Workflow

Damit das Styling der Web-Anwendung einheitlich bleibt, kann diese Step-By-Step Liste als Wegweiser benutzt werden.

Custom-Theme erstellen mit dem Lumo theme editor
1. In Rapidclipse ein neues Custom-Theme erstellen (Danach Rechtsklick auf Projekt und Refresh klicken)
2. Css-Code dann beim Download kopieren und in die “styles.css” einfügen
3. Im MainLayout oder der View mit der Route(““) die Theme-Annotation hinzufügen
```
@Theme(themeFolder = "My-Cool-Theme")
public class MainLayout extends VerticalLayout implements PageConfigurator, RouterLayout
{
```
4. Designer-Server refreshen um die Änderungen zu sehen (Für kleine Änderungen in den Dateien kann der Gelbe Refresh Pfeil daneben benutzt werden)
Einzelne Komponente haben verschiedene ThemeVariants die über den Properties-Panel geändert werden können. Hier ein Beispiel für Grids
Falls diese Theme-Variants nicht genügen können eigene “Theme-Variants” als Css-Klassen angelegt werden. Beispiel dazu:
1. In styles.css eine neue Css-Klasse hinzufügen:
```
.info-panel {
	--lumo-primary-text-color: rgb(0, 0, 100);
	background: lightblue;
	margin-top: 0em;
	margin-bottom: 0em;
}
```
2. In Rapidclipse bei den Komponenten diese unter “Class-Name” einfügen
f