Theme und Dark Mode

Farben für hell und dunkel

Alle Farben stehen an einer Stelle, je einmal für hell und dunkel. Der Hook useColorScheme verrät, was am Gerät eingestellt ist.

export function useAppColors(): AppColors {
  return useColorScheme() === 'dark' ? darkColors : lightColors;
}

ThemeProvider

Der ThemeProvider im Layout gibt Header und Hintergrund aller Screens die passenden Farben.

export default function RootLayout() {
  const colorScheme = useColorScheme();
  const isDark = colorScheme === 'dark';

  return (
    <ThemeProvider value={isDark ? darkNavigationTheme : lightNavigationTheme}>
      <Stack />
    </ThemeProvider>
  );
}

Farben in den Komponenten

Jede Komponente holt sich die Farben mit useAppColors(). Feste Styles bleiben im StyleSheet, Farben kommen als zweiter Style dazu.

const colors = useAppColors();
const textColor = { color: colors.onPrimaryContainer };

<View style={[styles.card, { backgroundColor: colors.primaryContainer }]}>
  <Text style={[typography.headlineMedium, textColor]}>{city.name}</Text>

Dark Mode

Weil alle Farben aus dem Theme kommen, folgt die App jetzt der Einstellung des Geräts.

• Emulator: Dark Mode in den Schnelleinstellungen umschalten
• Header, Hintergrund, Karte und Liste wechseln sofort die Farben
• kein Neustart nötig: useColorScheme meldet die Änderung