Aussehen
Im Aussehen-Tab passt du die Farben deines News-Moduls an. Du kannst Vorlagen verwenden oder separate Farben für Light Mode und Dark Mode definieren.
Dark Mode Toggle
Section titled “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
Section titled “App-Design übernehmen”Mit einem Tippen kannst du die Farben aus deinem globalen App-Theme übernehmen:
- Tippe oben in der Toolbar 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
- Primärfarbe für Kategorie-Badges
- Eckenradius aus dem Theme
Vorlagen
Section titled “Vorlagen”Wähle eine vorgefertigte Design-Vorlage als Ausgangspunkt.
Klassisch
Section titled “Klassisch”Was es macht: Traditionelles Zeitungs-Design mit leichtem Grau als Hintergrund.
So findest du es: Aussehen > Vorlagen > Klassisch
| Eigenschaft | Light Mode | Dark Mode |
|---|---|---|
| Hintergrund | Hellgrau (#F5F5F5) | Dunkelgrau (#121212) |
| Karten | Weiß (#FFFFFF) | Anthrazit (#1E1E1E) |
| Text | Fast Schwarz (#1A1A1A) | Weiß (#FFFFFF) |
| Sekundärtext | Grau (#757575) | Hellgrau (#B0B0B0) |
| Kategorie-Badge | Blau (#2196F3) | Blau (#2196F3) |
| Breaking Banner | Rot (#D32F2F) | Rot (#D32F2F) |
| Eckenradius | 12px | 12px |
| Schatten | 2 | 2 |
Modern
Section titled “Modern”Was es macht: Flaches, minimalistisches Design ohne Schatten.
So findest du es: Aussehen > Vorlagen > Modern
| Eigenschaft | Light Mode | Dark Mode |
|---|---|---|
| Hintergrund | Weiß (#FFFFFF) | Schwarz (#000000) |
| Karten | Weiß (#FFFFFF) | Dunkelgrau (#1A1A1A) |
| Text | Schwarz (#000000) | Weiß (#FFFFFF) |
| Sekundärtext | Dunkelgrau (#666666) | Grau (#9E9E9E) |
| Kategorie-Badge | Violett (#6200EE) | Violett (#6200EE) |
| Breaking Banner | Dunkelrot (#B00020) | Dunkelrot (#B00020) |
| Eckenradius | 16px | 16px |
| Schatten | 0 | 0 |
Business
Section titled “Business”Was es macht: Professionelles, seriöses Design für Unternehmens-Apps.
So findest du es: Aussehen > Vorlagen > Business
| Eigenschaft | Light Mode | Dark Mode |
|---|---|---|
| Hintergrund | Cremeweiß (#F8F9FA) | Dunkelgrau (#212529) |
| Karten | Weiß (#FFFFFF) | Anthrazit (#343A40) |
| Text | Dunkelgrau (#212529) | Fast Weiß (#F8F9FA) |
| Sekundärtext | Grau (#6C757D) | Hellgrau (#ADB5BD) |
| Kategorie-Badge | Blau (#0D6EFD) | Blau (#0D6EFD) |
| Breaking Banner | Rot (#DC3545) | Rot (#DC3545) |
| Eckenradius | 8px | 8px |
| Schatten | 1 | 1 |
Farben
Section titled “Farben”Alle Farbeinstellungen werden je nach gewähltem Modus (Light/Dark) gespeichert.
Hintergrundfarbe
Section titled “Hintergrundfarbe”Was es macht: Die Hintergrundfarbe der gesamten News-Seite.
So findest du es: Aussehen > Farben > Hintergrund
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
Section titled “Karten-Hintergrund”Was es macht: Die Hintergrundfarbe der einzelnen Artikelkarten.
So findest du es: Aussehen > Farben > Karte
Standard:
- Light Mode: Weiß (#FFFFFF)
- Dark Mode: Anthrazit (#1E1E1E)
Tipps:
- Sollte sich vom Seiten-Hintergrund abheben
- Im Dark Mode leicht heller als der Hintergrund
Textfarbe
Section titled “Textfarbe”Was es macht: Die Farbe für den Haupttext (Artikel-Titel, Vorschautext).
So findest du es: Aussehen > Farben > Text
Standard:
- Light Mode: Fast Schwarz (#1A1A1A)
- Dark Mode: Weiß (#FFFFFF)
Tipps:
- Hoher Kontrast zum Karten-Hintergrund für gute Lesbarkeit
- Im Dark Mode reines Weiß oder leicht abgetöntes Weiß
Sekundäre Textfarbe
Section titled “Sekundäre Textfarbe”Was es macht: Die Farbe für sekundäre Informationen wie Autor, Datum und Lesezeit.
So findest du es: Aussehen > Farben > Sekundärtext
Standard:
- Light Mode: Mittelgrau (#757575)
- Dark Mode: Hellgrau (#B0B0B0)
Tipps:
- Sollte weniger auffallen als die Haupttextfarbe
- Aber trotzdem gut lesbar sein
Kategorie-Badge Farbe
Section titled “Kategorie-Badge Farbe”Was es macht: Die Hintergrundfarbe der Kategorie-Labels auf den Artikelkarten.
So findest du es: Aussehen > Farben > Kategorie-Badge
Standard:
- Light Mode: Blau (#2196F3)
- Dark Mode: Blau (#2196F3)
Tipps:
- Sollte zur Markenfarbe oder Primärfarbe deiner App passen
- Im Dark Mode kann eine hellere Variante besser aussehen
Breaking Banner Farbe
Section titled “Breaking Banner Farbe”Was es macht: Die Hintergrundfarbe des Eilmeldungs-Banners.
So findest du es: Aussehen > Farben > Breaking Banner
Standard:
- Light Mode: Rot (#D32F2F)
- Dark Mode: Rot (#D32F2F)
Tipps:
- Traditionell rot für Aufmerksamkeit
- Sollte sich deutlich von anderen Elementen abheben
- Nicht zu grell im Dark Mode
Farb-Zurücksetzen
Section titled “Farb-Zurücksetzen”Jede Farbeinstellung hat einen Zurücksetzen-Button (X-Symbol), der die Farbe auf den Standardwert zurücksetzt.
Farbpalette - Empfehlungen
Section titled “Farbpalette - Empfehlungen”Light Mode
Section titled “Light Mode”| Element | Empfohlene Farbe |
|---|---|
| Hintergrund | #F5F5F5 bis #FFFFFF |
| Karten | #FFFFFF |
| Text | #000000 bis #1A1A1A |
| Sekundär | #757575 |
| Kategorie-Badge | Deine Primärfarbe |
| Breaking Banner | #D32F2F (Rot) |
Dark Mode
Section titled “Dark Mode”| Element | Empfohlene Farbe |
|---|---|
| Hintergrund | #000000 bis #121212 |
| Karten | #1E1E1E bis #242424 |
| Text | #E0E0E0 bis #FFFFFF |
| Sekundär | #9E9E9E bis #BDBDBD |
| Kategorie-Badge | Deine Primärfarbe (evtl. aufgehellt) |
| Breaking Banner | #D32F2F (Rot) |
Häufige Fragen
Section titled “Häufige Fragen”Muss ich beide Modi konfigurieren?
Section titled “Muss ich beide Modi konfigurieren?”Ja, du solltest beide Modi konfigurieren. Wenn du nur einen Modus anpasst, werden im anderen Modus die Standardfarben verwendet.
Kann ich die gleichen Farben für beide Modi verwenden?
Section titled “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?
Section titled “Warum sehe ich meine Farbänderungen nicht?”Stelle sicher, dass du den richtigen Modus bearbeitest (siehe Toggle oben). Die Änderungen gelten nur für den aktuell gewählten Modus.
Wie setze ich eine einzelne Farbe zurück?
Section titled “Wie setze ich eine einzelne Farbe zurück?”Tippe auf das X-Symbol neben der jeweiligen Farbeinstellung, um sie auf den Standardwert zurückzusetzen.
Welche Vorlage passt zu meiner App?
Section titled “Welche Vorlage passt zu meiner App?”- Klassisch: Für traditionelle Nachrichtenapps, seriöse Inhalte
- Modern: Für minimalistisches Design, Tech-fokussierte Apps
- Business: Für Unternehmenskommunikation, professionelle Inhalte