Theme Editor Overview
  • 23 May 2022
  • 2 Minutes to read
  • Dark
    Light

Theme Editor Overview

  • Dark
    Light

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 also 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 following UI may be edited with the Theme Editor:

  • User Portal
  • Studio
  • Mobile

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 when needing to preserve 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. In the Theme Editor window, select User Portal from the top radio button list. 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 to only save the changes 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 any changes made 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 Service Host Manager 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.


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



Was this article helpful?

What's Next