Tuesday, January 9, 2018

Reverse-Engineering the iPhone X Home Indicator Color

Nathan Gitter:

  1. The home indicator’s color is determined by the system and cannot be modified directly.
  2. The home indicator’s color is determined by the content underneath, and it is not always a solid color.
  3. The home indicator on the simulator is not an accurate representation of the home indicator on a real device.
  4. The home indicator animates to its new color(s) when the content underneath changes.
  5. The home indicator is either in a “light” or “dark” state.


If a screen in your app has a background color in the middle range where the home indicator could be either light or dark, you may prefer one style over the other. If the status bar is white, for example, it may look more visually balanced if the home indicator is white as well. Being aware of the home indicator’s nuanced behavior can help ensure that it doesn’t accidentally animate between light and dark when it could be distracting to the user.

Comments RSS · Twitter

Leave a Comment