How do I determine current mode client side

[#1]

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).

[#2]

This is what worked for me:

STEP 1 : creating a cq:ClientLibraryFolder node with category="[cq.authoring.editor]":

STEP 2: Add the script for listening in on the `cq-layer-activated` event:

Good Luck...