In CQ 5.6.1 the author would add .cq-wcm-edit & .cq-wcm-preview classes to the body tag (depending on current mode). This was added client side so you could add CSS classes that would only affect the page in edit mode.
In AEM 6 this doesn't appear to happen any more, as the switch from Edit mode to Preview mode doesn't require a page refresh is there anyway to detect when the mode changes?
( The aim of this is to make sure any CSS to enhance the author experience doesn't show when the author is previewing what the end site will look like).
We are working on improving this. But for now you can listen to the cq-layer-activated event, which will pass an object containing the new layer being activated (layer) and the previous one (prevLayer). You can then get the active layer as described with Granite.author.layerManager.getCurrentLayer(), and set accordingly a class on your page body.