Access the Theme Roller dialog by clicking Theme Roller from the Customize menu on the Runtime Developer toolbar.

1. Preview the page by running it.

   The Runtime Developer toolbar displays at the bottom of any editable running page.

2. On the Runtime Developer Toolbar, click Customize and then select Theme Roller.
   
   Description of the illustration customize_menu.png

   Theme Roller fetches the styles for your application and loads them in the editor. The Theme Roller dialog appears.

   
   Description of the illustration theme_roller.png
3. To search for an attribute, enter search terms in the Search field at the top of dialog. Only attributes that contain the search term appear.

   Tip:

   To navigate the Theme Roller dialog using keyboard shortcuts, press Ctrl+Fn+M and then release. Then, press Tab to navigate.
4. To select or modify a theme:
   1. Theme, Select Theme - Select a theme from the drop-down list. In the next illustration, the Theme is set to Redwood Light.
   2. Expand or collapse sections by clicking on the section name.
   3. Modify the attributes.

      Undo and Redo - When you modify an attribute, the Undo and Redo buttons at the bottom of the dialog become active.

   4. Reset a Theme Style - To revert any unsaved theme style changes, select Reset from the Additional Options menu . The Additional Options menu is located next to the Save As button at the bottom of the dialog.
5. Custom CSS - Enter CSS or or LESS-compatible code in the Code Editor. If you are including LESS-compatible code, you must enable the Enable LESS Compilation switch.
   
   Description of the illustration theme_roller_custom_css.png
6. Export or Import - Export or import theme style changes directly from the Theme Roller dialog. Select Export or Import from the Additional Options menu located next to the Save As button at the bottom of the dialog.
7. Save the theme by clicking one of the following:

   • Save - If the theme is editable, Save saves any style change and sets the theme as the application's current style.

   • Save As - Click Save As to save the theme as a new style and sets it as the application's current style.

Import and export theme styles by selecting Import and Export from the Theme Roller Additional Options menu.

To import and export Theme Styles:

1. Preview the page by running it.

   The Runtime Developer toolbar displays at the bottom of any editable running page.

2. On the Runtime Developer Toolbar, click Customize and then select Theme Roller.

   The Theme Roller dialog appears displaying the styles for your application. You can export and import style changes directly from Theme Roller by selecting the following options from the Additional Options menu: Import, Export, and Reset.

   
   Description of the illustration theme_roller_add_options.png

   Tip:

   To navigate the Theme Roller dialog using keyboard shortcuts, press Ctrl+Fn+M and then release. Then, press Tab to navigate.
3. To import theme styles:
   1. From the Additional Options menu, select Import.
      A File Browser appears.
   2. Navigate to the appropriate file to set to set the custom CSS code, variable style changes, add classes and LESS compilation configuration to be applied to the current theme style.

      When importing a file, the following JSON key-values are required:

      {
          "classes": [],
          "vars": {},
          "customCSS":"",
          "useCustomLess":""
      }

      The expected values are described in the following table.

      Key	Type	Value(s)
      classes	JSON array	List of comma-separated class names that are added to the page.
      vars	JSON object	Theme style variables with values.
      customCSS	String	Custom CSS code.
      useCustomLess	String	"Y" if the theme style should be compiled using LESS or "N" for no.

4. To export theme styles:
   1. From the Additional Options menu, select Export.
      This option exports the current style configuration into a JSON file.
5. To reset theme styles:
   1. From the Additional Options menu, select Reset.
      This option reverts any unsaved theme style changes.