How to change home indicator background color on iPhone X?

Question

I would like to change the background color of the view that appears on the bottom of the new iPhone X with a home indicator inside.

Is it possible?

Solution 1

The home indicator color is determined automatically based on the color of the content below it.

Most of the time, this means you should not worry about its color since it is out of your control, and will always be clearly visible to users.

However, you can place a colored view in the area behind the home indicator to manipulate its color.

Examples

(Please note that these examples were taken on the iOS simulator, and behavior on a real device is different.)

Background: white (#ffffff)

Home Indicator: black (#000000)

---

Background: black (#000000)

Home Indicator: gray (#484848)

---

Background: gray (#5f5f5f)

Home Indicator: dark gray (#282828)

---

Background: blue (#1a98fc)

Home Indicator: very dark gray (#121212)

---

I wrote an in-depth article about the home indicator color if you want to learn more about its behavior: Reverse-Engineering the iPhone X Home Indicator Color

Solution 2

The home indicator (line) colour is set automatically based on the content below it, often the root view background.

To change the background colour use this:

self.window.rootViewController.view.backgroundColor = [UIColor colorWithWhite:0.98 alpha:1.0] ;

Solution 3

You can add some negative distance between a colored view's bottom and the safe area's bottom.

Comments

[Fengson]

How do I access the view that's behind the indicator, so that I can change it's background color?

[nathangitter]

There's no specific view in that location. In my examples above, I changed the background color of the entire view. If you want to change just that area, you can constraint a view to that area.

[Eddie]

I've read the answer and the article and I've got a question: How do you make a color free component like that home indicator? Like, I've got a camera running, and have a close button on top of it. How do I make the button always clearly visible despite the background color (camera's layer) just like how the home indicator changing its color?

[RainCast]

Wow... The investigations described in the medium article is simply mind blowing ...

[Miniapps]

I believe that only when it's set a toolbar it becomes a filled area, with the toolbar bartintcolor (like it happens with the navigation bar...)