Dark Mode

The design system supports automatic dark mode with system preference detection.

Theme Modes

Mode	Behavior
'system'	Follows device settings (default)
'light'	Always light mode
'dark'	Always dark mode

Changing Theme Mode

import { useMultinaireTheme } from '@multinaire/multinaire-design';

function ThemeToggle() {
  const { themeMode, changeThemeMode } = useMultinaireTheme();

  return (
    <View>
      <Text>Current: {themeMode}</Text>

      <Button title="Light" onPress={() => changeThemeMode('light')} />
      <Button title="Dark" onPress={() => changeThemeMode('dark')} />
      <Button title="System" onPress={() => changeThemeMode('system')} />
    </View>
  );
}

Getting Current Theme

Use useMultinaireThemeMode() to get the resolved theme (accounts for system preference):

import { useMultinaireThemeMode } from '@multinaire/multinaire-design';

function MyComponent() {
  const resolvedTheme = useMultinaireThemeMode();
  // Returns 'light' or 'dark' (never 'system')

  return (
    <MultinaireIcon
      icon={resolvedTheme === 'dark' ? 'Sun' : 'Moon'}
    />
  );
}

Theme Picker Component

import {
  MultinaireListPicker,
  useMultinaireTheme,
} from '@multinaire/multinaire-design';

const themeOptions = [
  { text: 'System', value: 'system' },
  { text: 'Light', value: 'light' },
  { text: 'Dark', value: 'dark' },
];

function ThemePicker() {
  const { themeMode, changeThemeMode } = useMultinaireTheme();

  return (
    <MultinaireListPicker
      selectedItem={themeMode}
      items={themeOptions}
      onChange={changeThemeMode}
    />
  );
}

Persistence

Theme preference is automatically saved to AsyncStorage. When the app restarts, the user's preference is restored.

Status Bar

The status bar color automatically updates based on the theme. The library uses expo-system-ui to set the background color.

Best Practices

1. Design for both modes - Test your UI in both light and dark
2. Use semantic colors - onBackground instead of hardcoded black/white
3. Avoid pure black - Use #121212 or similar for better readability
4. Check contrast ratios - Ensure text is readable in both modes
5. Test images - Some images may need different versions for each mode