Aussehen
Im Aussehen-Tab passt du die Farben deines Feeds an. Du kannst separate Farben für Light Mode und Dark Mode definieren.
Dark Mode Toggle
Abschnitt betitelt „Dark Mode Toggle“Ganz oben im Tab findest du einen Toggle zum Umschalten zwischen Light Mode und Dark Mode Bearbeitung.
| Modus | Beschreibung |
|---|---|
| Light Mode wird bearbeitet | Du bearbeitest die Farben für den hellen Modus |
| Dark Mode wird bearbeitet | Du bearbeitest die Farben für den dunklen Modus |
App-Design übernehmen
Abschnitt betitelt „App-Design übernehmen“Mit einem Tippen kannst du die Farben aus deinem globalen App-Theme übernehmen:
- Tippe auf App-Design übernehmen
- Die Farben werden aus der Theme Suite übertragen
- Sowohl Light- als auch Dark-Mode-Farben werden angepasst
Was übernommen wird:
- Hintergrundfarbe aus dem App-Theme
- Oberflächenfarbe für Karten
- Primäre und sekundäre Textfarben
- Akzentfarbe für den Like-Button
- Eckenradius aus dem Theme
Alle Farbeinstellungen werden je nach gewähltem Modus (Light/Dark) gespeichert.
Hintergrundfarbe
Abschnitt betitelt „Hintergrundfarbe“Was es macht: Die Hintergrundfarbe des gesamten Feed-Bereichs.
So findest du es: Aussehen > Farben > Hintergrundfarbe
Standard:
- Light Mode: Hellgrau (#F5F5F5)
- Dark Mode: Dunkelgrau (#121212)
Tipps:
- Im Light Mode funktioniert ein helles Grau oder Weiß gut
- Im Dark Mode sollte es deutlich dunkler als die Kartenfarbe sein
Karten-Hintergrund
Abschnitt betitelt „Karten-Hintergrund“Was es macht: Die Hintergrundfarbe der einzelnen Post-Karten.
So findest du es: Aussehen > Farben > Karten-Hintergrund
Standard:
- Light Mode: Weiß (#FFFFFF)
- Dark Mode: Dunkelgrau (#1E1E1E)
Tipps:
- Sollte sich vom Feed-Hintergrund abheben
- Im Dark Mode leicht heller als der Hintergrund
Textfarbe
Abschnitt betitelt „Textfarbe“Was es macht: Die Farbe für den Haupttext (Post-Inhalt).
So findest du es: Aussehen > Farben > Textfarbe
Standard:
- Light Mode: Schwarz (#000000)
- Dark Mode: Hellgrau (#E0E0E0)
Tipps:
- Hoher Kontrast zum Karten-Hintergrund für gute Lesbarkeit
- Im Dark Mode nicht reines Weiß verwenden (zu grell)
Sekundäre Textfarbe
Abschnitt betitelt „Sekundäre Textfarbe“Was es macht: Die Farbe für sekundäre Informationen wie Username und Zeitstempel.
So findest du es: Aussehen > Farben > Sekundäre Textfarbe
Standard:
- Light Mode: Mittelgrau (#757575)
- Dark Mode: Helleres Grau (#BDBDBD)
Tipps:
- Sollte weniger auffallen als die Haupttextfarbe
- Aber trotzdem gut lesbar sein
Like-Farbe
Abschnitt betitelt „Like-Farbe“Was es macht: Die Farbe des Like-Buttons im aktiven Zustand (wenn geliked).
So findest du es: Aussehen > Farben > Like-Farbe
Standard:
- Light Mode: Pink/Rot (#E91E63)
- Dark Mode: Helleres Rot (#E57373)
Tipps:
- Traditionell rot oder pink (wie bei Instagram/Twitter)
- Kann auch deine Akzentfarbe sein
- Sollte im Dark Mode etwas heller sein für bessere Sichtbarkeit
Trennlinienfarbe
Abschnitt betitelt „Trennlinienfarbe“Was es macht: Die Farbe von Trennlinien zwischen Elementen.
So findest du es: Aussehen > Farben > Trennlinienfarbe
Standard:
- Light Mode: Hellgrau (#E0E0E0)
- Dark Mode: Dunkleres Grau (#424242)
Tipps:
- Dezent, aber sichtbar
- Hilft bei der visuellen Strukturierung
Icon-Farbe
Abschnitt betitelt „Icon-Farbe“Was es macht: Die Farbe der Action-Icons (Kommentar, Teilen, etc.) im inaktiven Zustand.
So findest du es: Aussehen > Farben > Icon-Farbe
Standard:
- Light Mode: Mittelgrau (#757575)
- Dark Mode: Helleres Grau (#BDBDBD)
Tipps:
- Sollte zur sekundären Textfarbe passen
- Nicht zu dunkel im Dark Mode
Farb-Zurücksetzen
Abschnitt betitelt „Farb-Zurücksetzen“Jede Farbeinstellung hat einen Zurücksetzen-Button (X-Symbol), der die Farbe auf den Standardwert zurücksetzt.
Farbpalette - Empfehlungen
Abschnitt betitelt „Farbpalette - Empfehlungen“Light Mode
Abschnitt betitelt „Light Mode“| Element | Empfohlene Farbe |
|---|---|
| Hintergrund | #F5F5F5 bis #FFFFFF |
| Karten | #FFFFFF |
| Text | #000000 bis #212121 |
| Sekundär | #757575 |
| Like | #E91E63 oder deine Akzentfarbe |
Dark Mode
Abschnitt betitelt „Dark Mode“| Element | Empfohlene Farbe |
|---|---|
| Hintergrund | #000000 bis #121212 |
| Karten | #1E1E1E bis #242424 |
| Text | #E0E0E0 bis #FAFAFA |
| Sekundär | #9E9E9E bis #BDBDBD |
| Like | #E57373 oder deine Akzentfarbe (aufgehellt) |
Vorlagen-Farben
Abschnitt betitelt „Vorlagen-Farben“Wenn du eine Vorlage anwendest, werden folgende Farbschemata verwendet:
Instagram-Stil
Abschnitt betitelt „Instagram-Stil“| Modus | Hintergrund | Karten | Like |
|---|---|---|---|
| Light | #FAFAFA | #FFFFFF | #ED4956 |
| Dark | #000000 | #121212 | #ED4956 |
Twitter-Stil
Abschnitt betitelt „Twitter-Stil“| Modus | Hintergrund | Karten | Like |
|---|---|---|---|
| Light | #FFFFFF | #FFFFFF | #F91880 |
| Dark | #000000 | #16181C | #F91880 |
Facebook-Stil
Abschnitt betitelt „Facebook-Stil“| Modus | Hintergrund | Karten | Like |
|---|---|---|---|
| Light | #F0F2F5 | #FFFFFF | #1877F2 |
| Dark | #18191A | #242526 | #2D88FF |
Minimal
Abschnitt betitelt „Minimal“| Modus | Hintergrund | Karten | Like |
|---|---|---|---|
| Light | #FFFFFF | #FFFFFF | #000000 |
| Dark | #121212 | #1E1E1E | #FFFFFF |
Häufige Fragen
Abschnitt betitelt „Häufige Fragen“Muss ich beide Modi konfigurieren?
Abschnitt betitelt „Muss ich beide Modi konfigurieren?“Ja, du solltest beide Modi konfigurieren. Wenn du nur einen Modus anpasst, werden im anderen Modus die Standardfarben oder Fallback-Werte verwendet.
Kann ich die gleichen Farben für beide Modi verwenden?
Abschnitt betitelt „Kann ich die gleichen Farben für beide Modi verwenden?“Technisch ja, aber das ist nicht empfehlenswert. Light und Dark Mode sollten sich deutlich unterscheiden, um in beiden Umgebungen gut lesbar zu sein.
Warum sehe ich meine Farbänderungen nicht in der Vorschau?
Abschnitt betitelt „Warum sehe ich meine Farbänderungen nicht in der Vorschau?“Stelle sicher, dass du den richtigen Modus bearbeitest (siehe Toggle oben). Die Vorschau zeigt immer den aktuell gewählten Modus.
Wie setze ich eine einzelne Farbe zurück?
Abschnitt betitelt „Wie setze ich eine einzelne Farbe zurück?“Tippe auf das X-Symbol neben der jeweiligen Farbeinstellung, um sie auf den Standardwert zurückzusetzen.