Create and Deploy a Custom Theme

You can use predefined base themes to create custom themes in SAS Theme Designer for Flex.

Log on to SAS Theme Designer 4.1 for Flex. The address for the application is: http://machine:port/SASThemeDesignerForFlex.
When prompted by the application to choose a task, select Create a Theme.
In the New Theme window, enter a name for your custom theme and select one of the predefined base themes. Click OK.

Note: Most special characters are not allowed in the theme name. The theme name can include alphabetic letters, digits, an underscore, and spaces.

In the right pane, notice that a sample application that uses the selected base theme is displayed. The right pane provides an automatic, instant preview as you work.

Here are the predefined base themes that are available to choose from:

SAS Blue Steel

The SAS Blue Steel theme enables you to modify the Application banner and Splash screen components. You can replace the banner logo with a customized logo. In release 3.5 and later, you can customize the two splash screens.

SAS Corporate

The SAS Corporate theme is the default theme for SAS Theme Designer for Flex. Colors for this theme are based on a navy blue palette. The SAS Corporate theme enables you to modify the Application banner and Splash screen components. You can replace the banner logo with a customized logo. In release 3.5 and later, you can customize the two splash screens.

SAS Dark

The SAS Dark theme is implemented in a minimal way, without custom graphical skins. The SAS Dark theme is based on darker, charcoal gray tones and should be used if a company’s theme contains a dark palette. The SAS Dark theme can be customized extensively. The full range of components on the User Interface Components panel are available for customization.

SAS High Contrast

The SAS High Contrast theme improves the accessibility of the text and interface for visually impaired users. The SAS High Contrast theme uses a black background, with white outlines, text, and icons. A currently selected (active) item is aqua color and previously selected items are purple. The full range of components on the User Interface Components panel are available for customization.

SAS Light

The SAS Light theme is implemented in a minimal way, without custom graphical skins. The SAS Light theme uses shades of light gray, beige, and white for its color palette. It should be used if a company’s theme contains an overall light palette. The SAS Light theme can be customized extensively. The full range of components on the User Interface Components panel are available for customization.

After you create and deploy a custom theme, you can use that theme as a basis for future themes. Such dependent relationships among themes are dynamic. For example, if you change Theme A, that change affects all themes that are based on Theme A (except for any design elements that are explicitly specified in the dependent themes).
In the upper left portion of the User Interface Components panel, select a component. Use the controls in the lower left pane to make changes to the selected interface component. The impact of each change is instantly shown in the sample application in the right pane.

All of the customizable design elements are listed in the User Interface Components panel. The sample application on the right contains examples of all of the available components. Changes that you make to certain user interface components affect other components. For example, if you change the color for Button, the colors for Tabs and Accordion change.
Repeat step 4 for each interface component whose appearance you want to alter. To save you work at any time, select FileSave from the main menu.

Tip
To revert the settings for a particular interface component (undoing all of your unsaved changes to that component in the current session), select the component in the User Interface Components pane and then click Reset to Defaults in the lower left pane. As a result, the settings that were initially loaded for this session are reapplied.
When you are ready to deploy the new theme, select FileSave and deploy from the main menu. In the confirmation message box, click OK.

Note: At run time, both the target theme and its base theme must be available. Each custom theme contains only information about how it differs from its base theme. The base theme is deployed simultaneously with the custom theme; both themes must be available to the consuming applications. If you have additional layers of nesting (for example, a custom theme that depends on another custom theme that in turn depends on a base theme), then all dependent themes must be available. If you deploy a theme whose base theme is not deployed, the application auto-deploys the base theme.

Note: You cannot deploy a theme for only a particular application, or for only a particular set of users. All deployed themes are available to all eligible applications, and to all users.
To verify the results:
1. In a separate browser, launch an eligible application.
2. Access the application’s preferences settings (for example, select FilePreferences from the application’s main menu).
3. On the Global Preferences page in the Preferences window, select the new custom theme from the Theme drop-down list. Click OK.
4. If the appearance of the consuming application does not change immediately, log off and log on to the application to view the application with the new theme.
  
  Tip
  You can work iteratively and view results in the consuming application. In the SAS Theme Designer 4.1 for Flex, make changes to the custom theme, and then save and deploy the theme. On your desktop, switch to the browser window where a consuming application is running and simply refresh the page. It is not necessary to relaunch the consuming application.
  
  Tip
  It is a good practice to thoroughly review the effects of the custom theme on each consuming application.