...
Overview: Demo mode is used to present teme theme options to clients. The demo mode is based off the "Clean" theme which reflects a Peak Resort branded site with minimal configurations preset. In this mode, the theme will implement the various style mixins dynamically by using the design control. It is important to note that when in this mode, there should be no mixins implemented in the clients theme file other than the three defalut mixins (@include theme-vouchers-css(), @include theme-rewards-css(), @include fix-header-for-td()) that are required to provide base styles for presenting various plugins.
...
Developer mode is activated by toggling on developer mode. Doing so enables additonal additional developer features inclding including proving access to "Preview Mode", and revealing the mixin export options. This is the standard mode that you shoudl should be in while developing a new theme.
...
There are several caveats to be aware of when using theme Designer in Presentation Mode. First is important to be aware that not all theme otions options that are available can be configured in theme designer. Some options are accessable configurable only by developers and are not necessarily options availble available for clients to pick from. The second caveat is that not all theme options are exportable as mixins. A prime example is color options. These are configured by the developer seperatelyseparately, so it is important to note what colors will be applied to the primary, secondary, tertiary, page background, card container background, simple header background, and simply footer background in the JIRA card. The 3rd caveat is that you will not be able to preview the color applications on the Checkout Page at this time due to technical limitations in theme designer and loading the Checkout Page will clear any theme options you have already set. It is best to not load the Checkout Page after setting your theme options dueing during a demo.
How To Develop Themes
...
Theme Designer uses SASS Mixins to implemnt implement theme options. The mixins provide all the CSS necessary to implement the chosen option as well as limited arguments to extend the configuration capabilities. This means you no longer have to manually write CSS to apply styles. The mixins ensure consistency in how theme elements are styled for all clients.
...
The Theme Designer UI works by wrapping the various mixins in implementation classes and then toggling thos those classes on and off in the page root element. When you appply app ply mixins to the client theme file, those mixins will conflict with the mixins the UI is selecting. To avoid these conflicts, it is important to enable Preview Mode while developing. If you want to return to demo mode, you most comment out the mixins in the client stylesheet and toggle Preview Mode back off.
Step-By-Step Theming Process
...
Create a duplicate of the Clean Theme directory and rename it to the current client.
...
Update the _colors.scss file in the client theme directory with all of the client color options.
...
Update the _variables.scss file in the client theme directory with the paths to the correct image files.
...
Update the _typography.scss file in the client theme directory with the clients font information.
...
In the Theme Designer source files, open layouts.vue and checkout.vue. Locate the scss import statment that targets the client theme. Change the path in both files to point at the client theme directory you are working on. This will make Theme Designer load that clients SCSS into the Design window.
...
Make sure that all but the following 3 mixins are commented out in the clients _theme.scss file : @include theme-vouchers-css(), @include theme-rewards-css(), @include fix-header-for-td(). These 3 mixins need to be available during the design process.
...
In Theme Designer, in Presentation Mode, set all of the theme option controls to match the client choices.
...
Enable Developer mode, and click the "Export All Mixins" button.
...
Copy the mixins from the dialog box and paste them into the clients _theme.scss file. Make sure they are uncommented and save the file.
...
In Theme Designer, enable Preview Mode. You should now see the mixins from the clients _theme.scss file being applied.
...
While still in Preview Mode, make any additional configurations necessary to the mixins in the clients _theme.scss file and ensure they appear
...
correct in the Theme Designer preview.
...
IMPORTANT: Once the theme looks how you want it, remove the following 3 mixins from the clients _theme.scss file. The CSS being provided by these mixins will already be available in Commerce so if you forget to
...
remove them from the _theme.scss file you will have two instances of this same CSS in the live site.
...
Copy the clients entire theme directory from Theme Designer over to the Theme directory in commerce.
...
Fire up a local instance of Commerce, set the environment to the client and QA the entire theme.
...
If it looks good, commit the theme to Commerce source.