Repository navigation
Theme einrichten #19
Description
Aufgaben des Product-Owners
Definition of Ready (DoR) v1
- Story mit Stakeholdern abstimmen
- Notwendige Designs für die Devs ausreichend definieren
- Wert (Nutz-, Kunden- und Wissens-Wert) mit Stakeholder abstimmen
- Größe (Aufwand, Komplexität) mit DEVs abstimmen
- Quality Attribute Scenarios (QAS) abstimmen
Story
Als Dev möchte ich das Color-Theme aus den Designs in die App überführen um es komfortabel nachnutzen zu können.
Technische Details
- Style-Guide siehe Eike 2.0
Akzeptanzkriterien
Design
- Farbpalette (Primary, Secondary, Background, Text) ist definiert.
- Light/Dark Mode unterstützt
- Typografie, Abstände und Komponenten-Styling folgen dem Design-System.
- Theme zentral verwaltet
- Bisher erstellte Komponenten wenden das Theme an.
Entwicklung
- Theme importieren und prüfen
Definition of Done (DoD) v2
- Es existiert mindestens ein automatisierter Akzeptanztest pro Akzeptanzkriterium
- Der Autor hat den Code selbst überprüft
- Das Aussehen der App entspricht den besprochenen Design-Entwürfen (z. B. aus Figma)
- Alle Entscheidungen wurden mit Kontext im Issue vermerkt.
- Das Design wurde mit einem Gerät jeder Geräteklasse (in der README) geprüft.
Metadata
Metadata
Assignees
Labels
No labels
Type
Projects
- Status
Activity
tjorbo commentedon Oct 26, 2025
@EikeApp/dev Seid ihr mit der Story (inklusive AKs) zufrieden? Ist ne 2 für euch ok?
dennisprzytarski commentedon Oct 28, 2025
Ich habe mich noch mal mit den Theme Buildern beschäftigt.
Es gibt ein super Community-Projekt namens appainter.dev, nur haben die die Einschränkung, dass sie das Flutter SDK nur bis zur Version 3.32.0 unterstützen, der letzten, wobei wir gern 3.35 nutzen wollen würden, um zB im Web Hot Module Reload aktiv zu haben, was endlich dazugekommen ist mit der Version.
Daher würde ich am ehesten den offiziellen Material Theme Builder empfehlen.
Den kann man über das Web (https://material-foundation.github.io/material-theme-builder/) verwenden und in Figma als Plugin einbinden (https://www.figma.com/community/plugin/1034969338659738588/material-theme-builder).
Die beiden Themen (dark/light) können als Dart-Code exportiert werden.
Weitere Infos zum Theme Builder: https://m3.material.io/blog/material-theme-builder
tjorbo commentedon Nov 11, 2025
@EikeApp/dev wisst ihr ad hoc, ob im Style-Guide alles vorhanden ist, was ihr für ein vollständiges Theme braucht?
tjorbo commentedon Nov 11, 2025
@EikeApp/dev ist ne 2 für euch OK?
20 remaining items
ColinSeanKavanagh commentedon Jan 9, 2026
@nemacke Ich kann das Figma-File leider nicht bearbeiten (und damit auch keine Plugins nutzen), weil ich für die File eine Education-Lizenz benötige (bin derzeit exmatrikuliert). So kann ich dir gerade leider nicht weiterhelfen, es sei denn, wir hosten die Datei nochmal in einer "nicht"-Education-Lizenz.
Und um sicher zu gehen: Derzeit arbeitest du in EIKE 2.0, richtig? In EIKE 1.0 kann ich derzeit keinen Styleguide sehen.
ColinSeanKavanagh commentedon Jan 9, 2026
Ansonsten kann @dennisprzytarski nochmal schauen, der sollte noch eine Education Lizenz von Figma haben.
ColinSeanKavanagh commentedon Jan 26, 2026
@nemacke Anscheinend kann das Plugin nicht das genutzte Theme erfassen. Als ihr es vorher exportiert habt, hat er einfach das Standard-Template exportiert, da er keinen "Input" hatte.
Theme Farben
Ich hab das Theme nun im Plugin nochmal manuell erfasst, mit den Farben aus dem Styleguide. Dabei hatte ich eine Frage:
Ich habe erst einmal einen Export für 2) erstellt, da die Farb-Kombinationen etwas bewusster gewählt aussehen. Korrigier mich da gerne.
Typography
Und noch eine extra Frage: Derzeit ist Roboto in den Designs als Schrift ausgewählt. In 2) nutzt du aber Inter als Title Schriftart. Roboto ist die extrem Standard-Font. Inter ist auch sehr standard, aber etwas moderner. Ich bin da schmerzfrei, aber evtl. hast du ja was das angeht einen Wunsch. :) Ich hab im aktuellen Export nun Inter genutzt, kann ich aber auch einfach umstellen.
ToDo
edit: Anscheinend konnte ich das Design anwenden. Es zeigt aber nicht ganz die Werte an, die eigentlich eingestellt sind...
Ich bin auch nicht ganz zufrieden mit dem Workflow. Das ist alles sehr frickelig und instabil mit dem Plugin. Weiß aber gerade auch keinen besseren Flow, wenn wir mit Figma arbeiten wollen.
Export
@dennisprzytarski @tjorbo
Hier der Export des Themes in Dart-Code.
EIKE App 2.0.zip
dennisprzytarski commentedon Feb 1, 2026
In #13 implementiert.