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={{
|
||||
headerStyle: { backgroundColor: farben.hintergrund },
|
||||
headerShadowVisible: false,
|
||||
// Apple-Konvention: Titel in Textfarbe, nur Interaktives im Blau-Tint
|
||||
headerTintColor: farben.primaer,
|
||||
headerTitleStyle: { fontSize: schrift.gross, fontWeight: '700' },
|
||||
headerTitleStyle: { fontSize: schrift.gross, fontWeight: '700', color: farben.text },
|
||||
headerBackTitle: 'Zurück',
|
||||
contentStyle: { backgroundColor: farben.hintergrund },
|
||||
}}
|
||||
>
|
||||
<Stack.Screen
|
||||
name="Home"
|
||||
component={HomeScreen}
|
||||
options={{
|
||||
title: 'BehördenKlar',
|
||||
headerLargeTitle: true,
|
||||
headerLargeTitleStyle: { color: farben.primaer },
|
||||
}}
|
||||
/>
|
||||
<Stack.Screen name="Home" component={HomeScreen} options={{ title: 'BehördenKlar' }} />
|
||||
<Stack.Screen name="Consent" component={ConsentScreen} options={{ title: 'Datenschutz' }} />
|
||||
<Stack.Screen name="Scan" component={ScanScreen} options={{ title: 'Brief scannen' }} />
|
||||
<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)
|
||||
hintergrund: '#F2F2F7',
|
||||
flaeche: '#FFFFFF',
|
||||
flaecheSekundaer: '#E9EDF3', // "graue Taste" nach Apple-Art (statt Umrandung)
|
||||
primaer: '#1A365D', // dunkles, ruhiges Blau (Marken-Tint)
|
||||
flaecheSekundaer: '#E9E9EB', // "graue Taste" nach Apple-Art (statt Umrandung)
|
||||
primaer: '#007AFF', // Apple-System-Blau (Tint für Buttons, Icons, Links)
|
||||
primaerText: '#FFFFFF',
|
||||
text: '#1A202C',
|
||||
textSekundaer: '#4A5568',
|
||||
textTertiaer: '#AEAEB2', // z. B. Chevrons (iOS systemGray2)
|
||||
rand: '#E2E2E7',
|
||||
// Dezente Hervorhebung für DIE Kernaussage (leichter Marken-Tint)
|
||||
hervorhebung: '#EDF2F9',
|
||||
hervorhebungRand: '#DCE5F1',
|
||||
// Dezente Hervorhebung für DIE Kernaussage (leichter Blau-Tint)
|
||||
hervorhebung: '#EAF3FF',
|
||||
hervorhebungRand: '#D4E6FB',
|
||||
|
||||
// Dringlichkeits-Ampel (kräftig, gut unterscheidbar)
|
||||
ampelRot: '#C0392B',
|
||||
ampelGelb: '#B7791F',
|
||||
ampelGruen: '#276749',
|
||||
ampelRotHintergrund: '#FDECEA',
|
||||
ampelGelbHintergrund: '#FDF6E3',
|
||||
ampelGruenHintergrund: '#EAF6EE',
|
||||
// Dringlichkeits-Ampel: frische Signalfarben in Apples "zugänglichen"
|
||||
// Varianten — kräftig, aber als Text auf Weiß noch gut lesbar (WCAG)
|
||||
ampelRot: '#D70015',
|
||||
ampelGelb: '#C25400',
|
||||
ampelGruen: '#1E7E34',
|
||||
ampelRotHintergrund: '#FFEAE8',
|
||||
ampelGelbHintergrund: '#FFF1E0',
|
||||
ampelGruenHintergrund: '#E7F6EB',
|
||||
|
||||
fehler: '#C0392B',
|
||||
fehler: '#D70015',
|
||||
};
|
||||
|
||||
export const schrift = {
|
||||
|
||||
Reference in New Issue
Block a user