Creating or modifying a theme with the Dev Kit

Modified on Fri, 7 Oct, 2022 at 10:54 AM

In order to be valid, the root folder of a theme must contain a desc.json file. If not, it won't be shown when refreshing the available themes.

Creating a theme

When creating a new theme in the devkit, the devkit must not be running. If it is running, open PowerShell (or the Command prompt, if you used it to start the devkit) and digit CTRL+C to stop the process and restart it when you have added the theme to the themes folder (<DEVIKIT FOLDER>/themes).

In order to create a theme, we recommend copying one of the existing ones (either Blue or Black theme, do not select the default/Green one because other themes are inherited from it, and it might cause issues with future updates) from your devkit themes folder (<DEVKIT FOLDER>/themes) or your Portal themes folder (<NEWIRED PORTAL FOLDER>/themes).

Rename the theme folder as you want. Its name is used as a theme-id and must follow these two rules:

Only alphabetical characters (white characters like space or tabs are not allowed)
The maximum length of 50 characters

A theme is defined by the following file structure:

theme-id/
         less/
                variables.less
                bubble.less
                launcher.less
                _feedback.less
                _fonts.less
                ...
         fonts/
                *.ttf, *.woff, etc.
         desc.json
         preview.png

Once you have copied and renamed the theme, open the file "desc.json" inside the theme, and change the data according to the new theme specs.

Now you can add fonts to the fonts folder and edit the LESS files in the less folder.

To adjust the basic properties (parameters) of a theme, you can change the values in the "variables.less" file.
If you need to edit other parts of the theme, you can modify the "_custom.less" file (recommended) or the other .less modules (not recommended but possible).

Keep in mind that the additional themes will be inherited from the default one (Newired Green), therefore we suggest not deleting it because it will break the other themes.

Here is a complete list of the files you can edit (or add, if the copied theme doesn't contain them):

bubble.less	Entry point for the styles of the bubble
launcher.less	Entry point for the styles of the launcher
variables.less	Definition of variables that are used to customize the theme
_bubble.less	Style definition of the bubble module
_custom.less	Custom style definition - used when the variables provided are not sufficient
_feedback.less	Style definition of the feedback module
_fonts.less	Definition of the fonts that are used in the theme
_global.less	Basic style definition
_handle.less	Style definition of the handle module
_progress.less	Style definition of the progress module
_spotlight.less	Style definition of the spotlight module
_window.less	Style definition of the launcher module - Journey list, settings, ...

Editing a theme

To modify a theme, access its root folder inside the themes folder in the devkit (<DEVKIT>/themes) or in the portal server (<NEWIRED PORTAL FOLDER>/themes). From here, you can add fonts and edit all the .less files in order to change the theme as you want.

Changes applied to themes inside the devkit, can be seen instantly by visiting http://localhost:8000.

Changing preview image

To change the preview image of a theme, you need the theme devkit. If you have it installed and running, visit http://localhost:8000/preview.html, select the theme you want to generate a preview for and take a snapshot of the generated image. Then, replace the current one with the new image (remember to keep the same name).

Uploading/updating a theme

If you need to know more about uploading/updating a theme in the Portal, please check this article.

The Dev Kit is only available to customers that have completed the training offered Newired if you require more information please contact your Customer Engagement Manager or Our Support Channel ( [email protected] )