...
Developer mode is activated by toggling on developer mode. Doing so enables additional developer features including proving access to "Preview Mode", and revealing the mixin export options. This is the standard mode that you should be in while developing a new theme.
...
Preview Mode
Presentation Preview Mode provides a way to preview your theme with the mixins implemented on the client stylesheet. Enabling Preview Mode disables the Theme Designer styling controls as well as the styles being applied via the UI. This allows you to preview how the theme will look when running in Commerce.
IMPORTANT: It is very important to not include style mixins in the client _theme.scss file when not in preview mode as this will cause CSS conflicts in the theme. When viewing a theme in Presentation Mode, you should comment out any mixins you have added to the stylesheet. DO NOT comment out these plugin mixins until the theme is ready to deploy ((@include theme-vouchers-css(), @include theme-rewards-css(), @include fix-header-for-td())
Note: Preview Mode is only available when Demo Mode is enabled.
How to Demo
Demo mode is the default state for Theme Designer. There is no configuration necessary to start using it. The controls on the left panel are used to select between the pages you want to view. The controls in the right panel provide the theme options. There is currently a limitation with the checkout page in demo mode in that it will not retain the settings configured on other pages. This should be resolved in the future.
...