Status Bar Theming

Status Bar Theming

Matching the Status Bar to Light and Dark Mode

Because the bar is transparent, its icons must contrast with whatever your screen paints under them: dark icons on a light theme, light icons on a dark one, or the clock and battery vanish. useColorScheme() (useColorScheme) tells you the scheme and updates live when the user flips the system setting.

theme.ts: one palette per schemeTypeScript

import { useColorScheme } from 'react-native';
const light = { bg: '#ffffff', card: '#e3f2fd', text: '#102a43', accent: '#1565c0' };
const dark = { bg: '#0b1320', card: '#1b2a41', text: '#e3f2fd', accent: '#90caf9' };
export function useTheme() {
  const scheme = useColorScheme(); // 'light' | 'dark', updated live when the user switches
  const isDark = scheme === 'dark';
  return { colors: isDark ? dark : light, isDark };
}

With core React Native 36,878 you then write <StatusBar barStyle={isDark ? 'light-content' : 'dark-content'} />. React Native 0.87 adds barStyle="auto", which does that for you; with Expo SDK 57 6,418 (React Native 0.86) the same job falls to expo-status-bar, next. Set "userInterfaceStyle": "automatic" in app.json (the blank template ships "light", which pins iOS to light). On Android the setting only takes effect once expo-system-ui is installed; this project lacks it, so the app simply follows the system, and adb shell cmd uimode night yes turned the last screen in Loading States in BookNest's figure dark.

MENU