Theme Editor Overview
  • 13 Oct 2022
  • 2 Minutes to read
  • Dark
    Light

Theme Editor Overview

  • Dark
    Light

Article Summary

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

Following this and subsequent examples will change the UI of the instance.
Do not follow alongside the examples unless wishing to replicate the changes. If done so accidentally, refer to the Reverting Theme Editor Changes subsection to learn how to undo changes. Note this method reverts all changes.
  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

This method reverts all changes made to the Theme Editor.
Individual, specific reverts can only be done manually, so it is a best practice to track all changes to custom .less files.

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

Custom Less File changes are not retained while upgrading to v8.5.

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.

For further information on the Portal, visit the Decisions Forum.

Was this article helpful?

What's Next