Theme Editor Overview

Overview

The Theme Editor edits the instance UI. 

The changes made in the Theme Editor can be applied immediately without writing or changing the code on the default LESS files for Decisions. Users can select to edit the User Portal, Designer Studio, or Mobile theme. After selecting a theme, the Theme Editor lists all UI elements within that theme that can be changed.

A common use case may involve changing the color scheme to better fit with branding. Furthermore, any navigational icons, loading icons, etc., may be changed.

Accessing the Theme Editor

To view the Theme Editor. Open the System folder from the Studio. Right-click on it to view the System's Action, then select Theme Editor.

The left panel displays the different UI elements within the selected UI Theme. Specific elements may be found via the search bar. 

There are four element types available for editing. 

• Image
• Font
• Size
• Color

Selecting an element populates the right panel with configurable options. Each type may be manually edited via the Edit action. Selecting the Pick Variable option instead lets this element mirror the styling of the selected elements. This may be useful for preserving the same color scheme, icons, etc., across multiple UIs. 

Applying a Change in the Theme Editor

1. Select User Portal from the top radio button list in the Theme Editor window. Expand portal, then expand topbar.
   
2. Select background. In the right-side panel, click Pick Color and click the pencil icon. Select a color and click PICK.
3. Click SAVE. The Save Theme window will allow the user to either apply the changes or only save them and apply them later. Applying changes requires the Portal to reload.
   Are changes not appearing after reload?

   Try clearing the browser's cache to update the theme.
   

Import/Exporting Theme Editor Settings

To transfer Theme Editor Settings from one instance to another, copy the custom .less files(s) formatted as "theme.[UITheme]-custom" found under C:\Program Files\Decisions\Decisions Web Host\HUI\styles\less\themes of the originating instance and paste them into the same directory in another instance.

These custom files generate and then update automatically upon changes to the instance's Theme Editor. These files will also stay in the file system even after upgrading.

After pasting the custom .less files, restart the application of the instance. Upon a successful restart, the instance will apply the imported Theme Editor settings.

Reverting Theme Editor Settings

Navigate to C:\Program Files\Decisions\Decisions Server\wwwroot\styles\Less\themes and delete the "theme.[UITheme]-custom" .less file(s) and then restart the application.

Applying Theme Changes

In v8.6+, users can apply Theme changes by clicking the System folder, selecting Themes, and clicking the Rebuild Styles action. This action will compile the LESS files and styles and display a notification on the status to the user. The default styles and CSS are located at C:\Program Files\Decisions\Decisions Server\wwwroot\styles\lessdefault. Whenever there is a failure, the system will display the validation and the error in the logs.

Rebuild Theme Editor

The following example walks through a workaround. 

1. Copy the files ending with custom.less from C:\Program Files\Decisions\Decisions Server\wwwroot\styles\Less\themes and paste to Decisions\FileStorage\Primary\styles\themes.
2. Right-click the System folder, select Themes, and then choose Rebuild Styles.