Why are so many mobile side panels dark grey?

Question

The fact that so many mobile side panels are dark grey (Facebook etc.) - is it based on any research?

Answer 1

Mobile side panels are largely used for navigation (headings, titles and labels). In these cases, a dark background helps to highlight elements on the screen. Having the contrast between dark and light screens also helps a user distinguish between the two. In the case of Facebook, GroupMe, etc., a darker background is beneficial as the contrast helps indicate which elements are secondary to the primary screen.

Answer 2

It would depend on the rest of the layout. As a designer, a lot of times white just doesn't look good as a background color on some projects, whereas dark grey can be. Again, it all depends on the rest of the layout.

It also sticks out more than white does, and often looks a lot more sleek. From a design perspective, I'd prefer to use a black/dark navigation than a white one.

Answer 3

The white is normally used for the main content. Using darker shades for side panel builds a visual heirarchy where content is higher and the navigation/side panel is lower.

Also, by using a non-regular background, it communicates that the side panel view is temporary.