How to set conditional displays for modules when in editing/preview modes

[EdCupaioli]

Background

I am developing a nav bar which is transparent with white text on init. This is an issue since the preview for the module has a white background.

Solution

Using the In-app editory and preview variables allowed me to set a conditional so I can view the menu in it's scrolled from top state. Example: 

<nav class="my-nav {% if is_in_global_content_editor or is_in_module_previewer %}nav-scrolled{% endif %}">
<!-- All my nav code... -->
</nav>

I used the is_in_module_previewer variable to check if the module was in the preview mode (boolean) and added the class that would make the links visible on white backgrounds. 

I then used the if_is_in_global_content_editor variable since my nav is a global module and I want my content editors to be able to preview the nav bar while they edit. 

[Jnix284 · Accepted solution]

Thanks for sharing this @EdCupaioli, I've started to see more themes take advantage of the editor/preview variables to improve the user experience - there are a lot of cool things you can do with is_in_theme_editor as well.