# Status bar color is customized appropriately

- **Pattern:** `ab-001966` (`mobile-ux-patterns.layout-safe-areas.status-bar-color`)
- **Severity:** medium
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-001966
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001966)

## Why it matters

A dark app with `barStyle="dark-content"` renders dark icons on a dark background — time, battery, and signal become invisible. On Android, omitting `backgroundColor` means the status bar inherits theme colors that may not match the navigation, producing a visible seam between system and app UI. Users perceive this as a rendering bug and submit screenshots to support, inflating ticket volume for a single-line fix.

## Severity rationale

Medium because status bar icons are system-level and users still recover, but the polish signal hurts conversion.

## Remediation

Configure `StatusBar` once at the root of the app, matching `barStyle` to the background luminance:

```tsx
import { StatusBar } from 'react-native';
export default function App() {
  return <><StatusBar barStyle="dark-content" backgroundColor="#ffffff" /><Navigation /></>;
}
```

Use `barStyle="light-content"` for dark themes and `barStyle="dark-content"` for light themes; override per-screen only when a hero banner demands inverted contrast.

## Detection

- **ID:** `status-bar-color`
- **Severity:** `medium`
- **What to look for:** Count all screens and check how many have `StatusBar` configuration. Quote the actual `backgroundColor` and `barStyle` values. Verify the configuration is applied consistently across at least 100% of screens or set globally at root.
- **Pass criteria:** StatusBar is configured with explicit `backgroundColor` and `barStyle` that match the app theme, applied to at least 1 global location (root layout) or consistently across all screens. Provides good contrast with system icons (dark text on light background, light text on dark).
- **Fail criteria:** StatusBar is not configured at all, or color creates poor contrast with icons making them hard to see, or configuration is only on some screens leaving others with default styling.
- **Skip (N/A) when:** The app uses only the system default status bar styling and has no custom theme colors that would conflict with default behavior.
- **Detail on fail:** Quote the actual configuration found (or note its absence). `"StatusBar is not configured — default color may not match app theme, and icon visibility varies by device."` or `"StatusBar uses light color with light text icons, making them invisible."`
- **Remediation:** Use StatusBar component to set appropriate colors:

  ```tsx
  import { StatusBar } from 'react-native';

  export default function App() {
    return (
      <>
        <StatusBar barStyle="dark-content" backgroundColor="#ffffff" />
        <Navigation />
      </>
    );
  }
  ```

  Use `barStyle="dark-content"` for light backgrounds (dark icons) and `barStyle="light-content"` for dark backgrounds (light icons).

---

Taxons: user-experience

HTML version: https://auditbuffet.com/patterns/ab-001966