> ## Documentation Index
> Fetch the complete documentation index at: https://starrycodes.mintlify.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Scaffold - System UI Control

> Wraps a Scaffold in an AnnotatedRegion to customize the appearance and icon brightness of the system status bar and navigation bar overlays.

<Steps titleSize="h3">
  <Step title="🎨 System Overlay Styling">
    <ResponseField name="addAnnotatedRegion({Color? statusBarColor, Brightness? statusBarBrightness, Color? navigationBarColor, Brightness? navigationBarBrightness})" type="Widget">
      <Expandable title="Parameters">
        <ParamField body="statusBarColor" type="Color?" default="null">
          The `background color` of the status bar overlay.
        </ParamField>

        <ParamField body="statusBarBrightness" type="Brightness?" default="null">
          Controls the `brightness` of status bar icons (e.g., `Brightness.light` for dark icons, `Brightness.dark` for light icons).
        </ParamField>

        <ParamField body="navigationBarColor" type="Color?" default="null">
          The `background color` of the system navigation bar (bottom bar on Android).
        </ParamField>

        <ParamField body="navigationBarBrightness" type="Brightness?" default="null">
          Controls the `brightness` of the navigation bar icons.
        </ParamField>
      </Expandable>

      Wraps the `Scaffold` in an `AnnotatedRegion` to customize the system status bar and navigation bar overlays.

      ```dart lines wrap theme={"theme":{"light":"github-light","dark":"github-dark-dimmed"}}
      // Ensures status bar icons (clock, battery) are white/light:
      return myScaffold.addAnnotatedRegion(
        statusBarBrightness: Brightness.light, // Controls icon/text color
        statusBarColor: Colors.black,          // Status bar background color
      );
      ```
    </ResponseField>
  </Step>
</Steps>