generated from knso/webklar-preview-template
Frische Farbwelt: Apple-System-Blau + klare Ampel-Signalfarben
- Primärfarbe: Apple-System-Blau (#007AFF) statt dunklem Marineblau — Buttons, Icons und Links wirken wie in Apples eigenen Apps - Header nach Apple-Konvention: Titel in Textfarbe, nur Interaktives im Tint - Ampel: frische Signalfarben in zugänglichen Varianten (klares Rot, Orange statt Braun, sattes Grün) — als Text auf Weiß weiter WCAG-lesbar - Großtitel entfernt (renderte auf iOS 26 nicht zuverlässig) — Standard- Header ist stabil auf allen Screens Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
13
App.tsx
13
App.tsx
@@ -37,21 +37,14 @@ export default function App() {
|
|||||||
screenOptions={{
|
screenOptions={{
|
||||||
headerStyle: { backgroundColor: farben.hintergrund },
|
headerStyle: { backgroundColor: farben.hintergrund },
|
||||||
headerShadowVisible: false,
|
headerShadowVisible: false,
|
||||||
|
// Apple-Konvention: Titel in Textfarbe, nur Interaktives im Blau-Tint
|
||||||
headerTintColor: farben.primaer,
|
headerTintColor: farben.primaer,
|
||||||
headerTitleStyle: { fontSize: schrift.gross, fontWeight: '700' },
|
headerTitleStyle: { fontSize: schrift.gross, fontWeight: '700', color: farben.text },
|
||||||
headerBackTitle: 'Zurück',
|
headerBackTitle: 'Zurück',
|
||||||
contentStyle: { backgroundColor: farben.hintergrund },
|
contentStyle: { backgroundColor: farben.hintergrund },
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Stack.Screen
|
<Stack.Screen name="Home" component={HomeScreen} options={{ title: 'BehördenKlar' }} />
|
||||||
name="Home"
|
|
||||||
component={HomeScreen}
|
|
||||||
options={{
|
|
||||||
title: 'BehördenKlar',
|
|
||||||
headerLargeTitle: true,
|
|
||||||
headerLargeTitleStyle: { color: farben.primaer },
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Stack.Screen name="Consent" component={ConsentScreen} options={{ title: 'Datenschutz' }} />
|
<Stack.Screen name="Consent" component={ConsentScreen} options={{ title: 'Datenschutz' }} />
|
||||||
<Stack.Screen name="Scan" component={ScanScreen} options={{ title: 'Brief scannen' }} />
|
<Stack.Screen name="Scan" component={ScanScreen} options={{ title: 'Brief scannen' }} />
|
||||||
<Stack.Screen name="Analyse" component={AnalyseScreen} options={{ title: 'Ihr Brief erklärt' }} />
|
<Stack.Screen name="Analyse" component={AnalyseScreen} options={{ title: 'Ihr Brief erklärt' }} />
|
||||||
|
|||||||
27
src/theme.ts
27
src/theme.ts
@@ -9,26 +9,27 @@ export const farben = {
|
|||||||
// Inhalte als weiße Karten ohne Rahmen und Schatten (wie Einstellungen/Health)
|
// Inhalte als weiße Karten ohne Rahmen und Schatten (wie Einstellungen/Health)
|
||||||
hintergrund: '#F2F2F7',
|
hintergrund: '#F2F2F7',
|
||||||
flaeche: '#FFFFFF',
|
flaeche: '#FFFFFF',
|
||||||
flaecheSekundaer: '#E9EDF3', // "graue Taste" nach Apple-Art (statt Umrandung)
|
flaecheSekundaer: '#E9E9EB', // "graue Taste" nach Apple-Art (statt Umrandung)
|
||||||
primaer: '#1A365D', // dunkles, ruhiges Blau (Marken-Tint)
|
primaer: '#007AFF', // Apple-System-Blau (Tint für Buttons, Icons, Links)
|
||||||
primaerText: '#FFFFFF',
|
primaerText: '#FFFFFF',
|
||||||
text: '#1A202C',
|
text: '#1A202C',
|
||||||
textSekundaer: '#4A5568',
|
textSekundaer: '#4A5568',
|
||||||
textTertiaer: '#AEAEB2', // z. B. Chevrons (iOS systemGray2)
|
textTertiaer: '#AEAEB2', // z. B. Chevrons (iOS systemGray2)
|
||||||
rand: '#E2E2E7',
|
rand: '#E2E2E7',
|
||||||
// Dezente Hervorhebung für DIE Kernaussage (leichter Marken-Tint)
|
// Dezente Hervorhebung für DIE Kernaussage (leichter Blau-Tint)
|
||||||
hervorhebung: '#EDF2F9',
|
hervorhebung: '#EAF3FF',
|
||||||
hervorhebungRand: '#DCE5F1',
|
hervorhebungRand: '#D4E6FB',
|
||||||
|
|
||||||
// Dringlichkeits-Ampel (kräftig, gut unterscheidbar)
|
// Dringlichkeits-Ampel: frische Signalfarben in Apples "zugänglichen"
|
||||||
ampelRot: '#C0392B',
|
// Varianten — kräftig, aber als Text auf Weiß noch gut lesbar (WCAG)
|
||||||
ampelGelb: '#B7791F',
|
ampelRot: '#D70015',
|
||||||
ampelGruen: '#276749',
|
ampelGelb: '#C25400',
|
||||||
ampelRotHintergrund: '#FDECEA',
|
ampelGruen: '#1E7E34',
|
||||||
ampelGelbHintergrund: '#FDF6E3',
|
ampelRotHintergrund: '#FFEAE8',
|
||||||
ampelGruenHintergrund: '#EAF6EE',
|
ampelGelbHintergrund: '#FFF1E0',
|
||||||
|
ampelGruenHintergrund: '#E7F6EB',
|
||||||
|
|
||||||
fehler: '#C0392B',
|
fehler: '#D70015',
|
||||||
};
|
};
|
||||||
|
|
||||||
export const schrift = {
|
export const schrift = {
|
||||||
|
|||||||
Reference in New Issue
Block a user